Surface
Contact UsDashboard
HomeDocsGuides
Form EmbeddingFramer

Email Input Field Trigger

Triggering via email input field submission

This feature requires paid tier of framer!

1. Create Surface Constructor

  1. In Framer, go to project settings.
  2. Scroll down to Custom Code section.
    Add the following code in the End of <body> tag section.

Modify the Surface Form Embedding Script to include the data-question-id attribute.

You must replace the <question_id> within data-question-id attribute below with the question ID from the Surface Form Builder.

Question ID Location
<!-- Start Surface Form Embed -->

<script data-question-id="<question_id>">
  (function () {
    const surface_src = "surface_form_url";
    const surface_embed_type = "slideover"; // works on all embedding types!
    const target_element_class = "surface-form-button";
    const c = new SurfaceEmbed(
      surface_src,
      surface_embed_type,
      target_element_class
    );
  })();
</script>

<!-- End Surface Form Embed -->

2. Add the Form Component

  1. In Framer, click on insert to add new component inside the website.
  2. Select Form Builder from the list of components.
Form Component

3. Create new code override for the form component

Form Component
  1. In the form component, click on properties to open the properties panel.
  2. Scroll down to Code Overrides section.
  3. Click on New File to create a new file.
  4. Name the file as SurfaceFormHandler.
  5. Click on Create to create the file.

4. Modify the Surface Form Embedding Script

In the SurfaceFormHandler file, add the following code:

Form Component
export function withClass(Component): ComponentType {
    return (props) => {
        props.className += " surface-form-handler" // Remember to add a space
        return <Component {...props} />
    }
}

5. Apply the code override to the form component

Form Component
  1. In the form component, click on properties to open the properties panel.
  2. Scroll down to Code Overrides section.
  3. Select SurfaceFormHandler from the list of files.
  4. Select withClass from the list of overrides.
  5. Click on Apply to apply the code override.

Inline

Embed a Surface Form inline

Popup

Embed a Surface Form popup

On this page

1. Create Surface Constructor2. Add the Form Component3. Create new code override for the form component4. Modify the Surface Form Embedding Script5. Apply the code override to the form component