The first step in editing a form is clicking on it. You will then be presented with the Form Settings menu, where you can edit the form's style and the button's style, or select whether the form should be visible on both Desktop & Mobile.
However, new form fields are edited when you click Edit Form, which takes you to the form's editing window.
Editing Form Fields
There are 4 primary form field editing options:
Edit the properties of an existing form field by clicking on it and changing the settings from the menu on the right;
Duplicate the form field by clicking on it and choosing the duplicate option (two pages icon);
Delete the form field by clicking on it and then on X;
Rearrange the position of a form by clicking on the six dots above the middle of the field and dragging.
Each different type of form field has its own properties.
Input fields can have formatting validation enabled in the bottom-right corner, which means they will not allow the visitor to submit the form if the field does not contain input in the format 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.
You can also add business email validation for your email fields by following our dedicated guide here: https://d.pr/n2ZN9i
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;
Drop-down, checkbox, radio button selections: These types of form fields typically require a few pre-defined options for the visitor to select from.
If you want to make further changes to the form, like bolding form fields, the button, etc, you can do so by following these steps:
Right-click on the form in the builder and select Edit CSS.
Enable the toggle for Inline Style Editing.
Find the CSS selector for your desired action.
Add the CSS property.
For more details on the Inline CSS option, you can check out the article here: https://d.pr/a0Uucr.
You can also use custom code to target that specific field and add the code in the HTML/CSS section as seen here: https://d.pr/sVZJxC.
Adding New Form Fields
You can add new form fields at any time by clicking on the form and then Edit Form from the menu on the right in the builder. Doing so, you will be taken to the editing window and will be presented with a list of Predefined field-type options and the ability to create a custom field with Create New on the left side of the editor.
My fields - predefined field types:
First Name, Last Name, Email, Phone Number, Website, Company Name, Job Title, Street Address Line, City, State/Province/Region, Postal/ZIP Code.
Industry: Predefined options for different types of industries such as Agriculture, Automotive, Banking etc.
Company Size: Predefined options for the number 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.
Birthday: A field with a Date format.
Gender: Predefined options for genders.
Marital Status: Predefined options for marital statuses.
Create New - custom field types:
Single-line text
Multiple-line text (textarea)
Email
Dropdown
Radio buttons
Checkboxes - standard multi-choice checkboxes
Checkbox (GDPR/TOS) - one checkbox that allows you to link to your TOS, Privacy Policy, etc.
Date - a date format field. You can pick from multiple date format options as well as restrict the time frame and days of the week.
Password
A single-line text field can be set as hidden. The hidden field will not be visible to the user, but it can have a set value or a dynamic one (based on the value of a URL parameter). Click here for more details.
The password field will be encrypted. The content appears as asterisks **** both on the live URL and in the lead data in Instapage. The content of the password field can be viewed in the lead info in a CRM if the page is integrated with a CRM. To learn more about the integrations we have and how you can connect them, please refer to this article: https://d.pr/yHKD8R.
The checkbox field will send the value entered for each option when checked and will send no value when left unchecked. It does not send boolean values.
To add links to your Checkbox (GDPR/TOS) field, select the desired text with your cursor, then click on Link setup, as shown in the screenshot below.
For the Single-line text Field, you can select the Custom Formatting option in order to restrict how the page visitor can enter information. You can also choose to display a numeric keypad on the mobile version of the page.
You can use this for phone number formatting, or, for example, if you have a Zip Code field and want to accept only inputs consisting of 6 numeric characters, you can enter '000000' there.
If you need the field to include zero, the letter "a" or the asterisk symbol * as an established part of it instead of a replacement, you can use a backslash "\" in front of the character that you want to be fixed. For example, to have the (+60)-(___)-(____) phone number format, you would input (+6\0)-(000)-(0000). The first zero will be fixed due to the backslash in front of it, while the other zeroes will indicate that any number can be typed in by the page visitor.
Saving fields
Fields that you created and customized yourself can be saved to be reused in other forms.
When you are done editing a custom field, click on Save to My Fields in the bottom right corner. Give it a recognizable name and then Save.
Saved fields will appear at the top of the My Fields area in the Form Builder. The GIF below shows the process of creating and saving a field, and then seeing it in the indicated area.
Additional Form Options
If you click on Form Style, you can change elements such as the form colors and the field label position.
If you click on Button Style, you will be able to change elements such as:
Button Colors: Select a color for your form button, for when you hover over the button, and for the button text;
Button Text: This is where you'll choose the text that your form button displays;
Button Font: You can control the font used and its size;
Flat: This adds a flat look to your form button to give it a modern/simple look;
Glossy: This adds a subtle gradient to your form button to give it a 3D look;
Drop Shadow: This adds a subtle drop shadow to the bottom of your form button to give it more depth;
Border: Allows you to add an outline to your button;
3D effect: Gives the button an added depth look and makes it stand out more;
Image: You can set an image as the background of the button, instead of a color;
Corner Radius: This allows you to round out the corners of your form button;
Accessibility: Aria-label - it 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 find our full accessibility article here: https://d.pr/5Gk7z2