How can we help you?

Welcome to our new Form Builder and Form Library! With the drag-and-drop Form Builder, you can quickly create high-performing, custom forms for your landing pages. All newly created forms will be stored in your central Form Library, making them easy to manage and reuse across your landing pages. Follow this guide to learn how to make the most of the Form Builder and Form Library.

Accessing the Form Library

This can be found under Assets. Here you will be able to create your new forms or find the ones already created.

Here you can click on the three-dotted menu and Edit the form, Rename, Duplicate or Delete it.

Creating and/or Editing Forms

Add Form Fields:

From the menu on the left, click on the form fields you want to add, or simply drag and drop them onto the designated place.

Once you have selected a field type, on the menu on the right, you will see the field’s properties. Each different type of form field has its own. 

• Text field label: Description of the information you'd like to collect from your visitors;
• Required: A visitor will not be able to submit the form if they leave a required field empty;
• Single-line text fields have the following settings: state: Normal or Hidden, which lets you set this field as being visible on the page, or hidden.

  More details about hidden fields can be found here: https://d.pr/w5kPVQ 

• They can also have formatting validation enabled, which means that they will not allow the visitor to submit the form if that field does not have input in the form of what you set up. If you choose email validation, the visitors will only be able to submit the form if they enter input of the type text@text.text in this field.
• Input: this allows you to either leave the field blank or set up a placeholder.
• Drop-down, check box, radio button selections: These form fields require pre-defined options for the visitor to select from. 

For more information about the different types of fields, you can access our designated Help Center article here: https://d.pr/h9Zh1y 

Additional Form Options: 

From the menu on the right, under FORM Settings, we have the following options:

1. Steps: Add more steps to turn your form into a multi-step one. You can customize the look of each step and add fields, etc. Click on the Step number and use the menu from the right to add the desired field types. 

As a good practice, we recommend having the same number of fields on each step so that each step has the same height. 

Once you are done configuring each step, you can also style the form with the options under FORM Style. You can also add a redirect link from Form submissions under FORM Settings. Under this, you can also configure the Thank you message.

When you’ve finished creating your multistep form, you can click on Save and you can click on Insert to add the form to the page.

2. Form Submissions: configure what happens after the form is submitted.

Redirect to a page: 

• Page location: An Instapage landing page - where you can choose one of your pages as the redirect
• Outside URL - where you can set up an outside page as the redirect.

Download: A file is downloaded on the visitor's device upon form submission. It can either be from an Outside URL or you can upload the file directly to Instapage.

Pass URL parameters: you can enable this toggle if you wish to pass parameters through URLs for enhanced tracking and customization. For more details about this, we can check our article here: https://d.pr/2hq8XZ. 

3. Thank You Message: The message that instantly appears when a user submits. 

Time out setting for the Thank You message lets you set the time that the Thank You message will appear on the screen once the form is submitted.

If you wish, you can also remove the Thank You message. If it is removed, this will display a "Processing..." message once the form is submitted. If you wish to translate this message into another language or delete this as well, and there will be no text displayed, you can do so by using the code from this article here: https://d.pr/y0Qwiy 

4. Google Analytics: Assign Google Analytics events to track form interactions. For more details about this, check out our article: https://d.pr/RG9D4T. 

From the same menu, we have FORM Style: 

Input and label settings: 

• Label Position: Where you would like the name/description to appear. Above the field or inside it.
• Label text color:  The color of the field name/description text;
• Input text color: The color of the text users see when adding text to a field;
• Field color: The background of the form fields;
• Border color: The color of the border surrounding form fields;
• Input field inner shadow: Use this to give your form fields depth;

Button settings: 

• Corner radius: This allows you to give your button rounded or straight corners.
• Font: You can control the font used, its weight and size;
• Button colors: Select a color for your form button, for when you hover over the button and for the button text and when you hover over this too;
• Button Drop shadow:  This adds a subtle drop shadow to the bottom of your form button to give it a 3D look. 
• Button Border: Allows you to add an outline on your button;

To edit the text on the button, you simply need to click on it and add the new text on the right, along with its aria label. 

The aria-label should indicate to a visitor using a screen reader where the link on the submit button would take them and what action would result from clicking on it. You can learn more about accessibility on Instapage here: https://d.pr/fbmTvR 

After making all the changes, click on Save on the top right corner. This will save the form and it will take you back to the Form library.

Three-Dotted Menu: Click on the three dots next to any form to rename, save it to My Forms, or delete it.

Managing Hidden Fields

Show/Hide Hidden Fields: Use the Show hidden/Hide hidden toggle to display or hide hidden fields while editing your form. More details about hidden fields can be found here: https://d.pr/w5kPVQ 

Adding Forms to Your Page

You can add a form to your page by clicking on the Form library button from the left sidebar:

Here, you can either:

• Use an Existing Form: Select a form from your library and add it to your page.
• Create a New Form: Start from scratch to create a form tailored to your needs.
• Choose from our Form Templates: Pick from our pre-designed form templates for a quick start.

You can hover over any of the already created forms and either Preview and Edit it, or you can click on Insert and add it to the page.

If you wish to further customize the form directly inside the builder, you can use the menu on the right hand side, which shows up after clicking on the form. You can change the form and button style and choose whether the form will be visible on both Desktop & Mobile or just one of them. 

By following these steps, you can efficiently create and manage forms that enhance user interactions on your pages. If you have any further questions, feel free to reach out to our support team for assistance at help@instapage.com. 

Happy form building!