Publishing and Embedding Your First Form

After creating your form on Reform, the next step is to publish it and decide how you'd like to share it with your audience. Below, we’ll guide you through the process of publishing your form and embedding it directly onto your website.

Step 1: Publish Your Form

1. Locate the "Draft" Button:
   • While on the form builder page, navigate to the bottom right corner of your screen. You will find a button labeled "Draft."
2. Publish Your Form:
   • Click on the arrow within the "Draft" button. A small menu will expand, displaying different options.
   • Select the "Published" option from this menu. Once selected, your form will be published and go live.
3. Access the Form URL:
   • After publishing, an overlay will appear on your screen. This overlay contains a unique URL for your form. You can share this URL directly with users who need to access the form.

Step 2: Embedding the Form on Your Website

If you prefer to embed the form directly into your website, follow these steps:

1. Open Sharing Options:
   • On the overlay that appears with the form URL, click on the "More sharing options" button.
   • Alternatively, you can navigate to the "Share" tab on the platform, where all sharing options are available.

2. Choose the "Embed" Option:
   • Under the sharing options, locate the "Embed" option. There you will access a generated embeddable iFrame code for your form.
3. Customize Your Embed Code:
   • The iFrame code comes with simple customization options. For instance, you can choose to make the form’s background transparent so it blends seamlessly with your website design. Read more about this feature here. 
   • Copy the generated iFrame code.
4. Embed the Code on Your Website:
   • Copy and paste the iFrame code into your website’s HTML where you want the form to appear.

How the Embedded Form Functions

Once embedded, the form comes with several built-in features to ensure a smooth user experience:

• Auto-Resizing of the Embed Window:
  • The embed script automatically adjusts the size of the form's window based on the content. This ensures that your users never see a scrollbar, regardless of the length of the form.
• Smooth Navigation:
  • When users navigate through multi-page forms, the window will automatically scroll to the top of the form each time they move to a new page. This feature maintains focus and makes the form-filling process smoother.
• Query Parameters Passing:
  • The script also passes query parameters from the parent site to the embedded form. This can be particularly useful for advanced use cases like pre-filling form fields with known user data or tracking where your users are coming from.
• Response Collection:
  • Regardless of where the form is embedded, all respondents' answers will still be sent to the "Responses" tab on our platform. Here, you can easily view and analyze the collected data as needed.

By following these steps, you can effortlessly integrate your form into your website, providing a seamless and professional experience for your users.

If you have any specific needs, suggestions or have questions, please contact us at [email protected]. We're here to assist you!