​
1. Embed the Surface Form

  1. Using an iFrame directly:

    <iframe
    id="surface-iframe"
    src="<your_form_url>"
    frameborder="0"
    allowfullscreen>
</iframe>

  2. Using script (Recommended)

    • Go to the public/index.html file in your React.js project and add the following code at the end of <body> tag:
    <!-- Start Surface Tag -->
 <script src="https://cdn.jsdelivr.net/gh/trysurface/scripts@latest/surface_tag.min.js"></script>
 <!-- End Surface Tag -->

 <script>
   window.onload = function () {
     const surface_src = "your_form_url";
     const surface_embed_type = ""; // "popup" or "inline"
     const target_element_class = ""; // "surface-form-button" for popup or "surface-form-target for inline"
     const c = new SurfaceEmbed(
       surface_src,
       surface_embed_type,
       target_element_class
     );
     c.popupSize = ""; // "small", "medium", "large"
   };
 </script>
    • Replace your_form_url with the form sharing link you copied in step 1.
    • Replace surface_embed_type with "popup" if you want to show the form as a popup or "inline" if you want to show the form inline.
    • Replace target_element_class with "surface-form-button" if you want to show the form as a popup or "surface-form-target" if you want to show the form inline.
    • Replace popupSize with "small", "medium", or "large" if you want to set the size of the popup form.

​
2. Add className to the target element

Add surface-form-button class to the HTML element if you want to show the form as a popup or surface-form-target class to the target element if you want to show the form inline.

<button className="surface-form-button">Open Form</button>

​
3. All done!

You have successfully integrated Surface Forms with your React.js application. You can now embed forms in your React.js application.