Setup Your Surface Form in Framer

Follow these steps to embed or update a Surface form on your Framer website:

1. Open your Framer project and navigate to the Custom Code settings. This is typically found in the site-wide settings area where scripts and custom code are managed.

2. Locate the script that references your Surface form URL (e.g., https://forms.withsurface.com/s/your-form-id).

3. Replace the existing form URL with your new Surface form URL.

4. Save your changes and verify the form is working correctly on your staging environment before publishing to production.

5. Once confirmed, deploy the changes to production.

Usage

Keep the following in mind after setting up your form:

• Multiple embed locations: Your website may have the form URL referenced in more than one place in Framer (e.g., a "Book a Demo" button and a dedicated /demo page). Make sure to update all locations where the old form URL appears to avoid submissions going to the wrong form.

• Direct form links: If you or your team members share the raw form URL directly (e.g., via email or internally), those links will need to be updated as well. Submissions via a direct standalone link will bypass any changes made in Framer.

• Verifying submissions: After deploying, monitor your new form's submissions to confirm traffic is routing correctly. If you notice submissions still arriving on the old form, check with your team to see if anyone is still sharing or using the old direct link.

If you run into any issues during setup or need help verifying the form is working, feel free to reach out to the Surface support team.