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 save the ones already made.

Here, you can click on the three-dotted menu and Edit a 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, from the menus on the left, you will see the field’s properties on the right. Each different type of form field has its own properties. 

Custom Fields:

• 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. 

Predefined Fields:

• First Name, Last Name, Email, Phone Number, Website, Company Name, Job Title, Street Address Line, City, State/Province/Region.
• Industry: Predefined options for different types of industries such as Agriculture, Automotive, Banking etc.
• Company Size: Predefined options for the amount of employees a company may have, for example 1-4, 5-9, 10-19 employees, etc. 
• Country: Under this label, you will find different predefined options of all the country names.
• Gender: Predefined options for genders.
• Marital Status: Predefined options for marital statuses.

Note: All predefined form fields are Required and displays an asterisk by default, however, you can easily customize this to your liking. The asterisk can be turned off alone, keeping the field Required. Or if the Required option is deselected, the field will not be required and no asterisk will be visible.

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 To My Forms 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 To My Forms in 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 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. 

Save Your Existing Forms 

Open the page where your existing form from before the form builder was released exists, click on the form in the form editor and select Edit Form.

Once the form builder opens, simply select Save To My Forms and the form will be saved to your forms library.

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!