You can add a form to your page by clicking on the Form button from the left sidebar:
The first step in editing a form is clicking on it. You will then be presented with the Form Settings menu, in which you can further edit the form's style and functionality.
However, new and old form fields are edited within the form selector itself.
Editing Form Fields:
There are 3 primary form field editing options:
- Edit the properties of an existing form field;
- Delete the form field;
- Rearrange the position of the fields by clicking and dragging them.
Each different type of form field has its own properties.
- 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;
- Input fields can 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.
- Drop-down, check box, radio button selections: These types of form fields typically require a few pre-defined options for the visitor to select from.
Adding New Form Fields:
You can add new form fields at any time by clicking on EDIT and then on the +ADD FIELD button. Doing so will present you with several field-type options. You can learn more about the different types of form fields here: https://d.pr/RdyHVH
Additional Form Options:
When editing a form within the builder, you'll be presented with four different options.
The Form Button Style option looks like this:
- 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 a 3D look.
- Border: Allows you to add an outline on your button;
- 3D effect: Gives the button an added depth look and makes it stand out more;
- Image: This allows you to use an image for your button instead of the predefined styles;
- Rounded Corners: This allows you to round out the corners of your form button;
- Corner radius: This allows you to give your button rounded or straight corners.
- 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 learn more about accessibility on Instapage here: https://d.pr/fbmTvR
The Form Style option allows you to edit the following attributes:
- Input color: The color of the text users see when adding text to a field;
- Field color: The background of the form fields;
- Label color: The color of the field name/description text;
- Border color: The color of the border surrounding form fields;
- Label Position: Where you would like the name/description to appear. Above the field or inside it.
- Inner shadow: Use this to give your form fields depth;
The form's submission option allows you to edit the following attributes:
- Redirect: What happens after submission. Send to another page, URL.
- Download: A file is downloaded on the visitor's device upon form submission;
- Thank You Message: The message that instantly appears when a user submits.
- Time setting for Thank You message: Set the time that the Thank You message will appear on the screen once the form is submitted.
You can make a form show up either on Desktop or Mobile, or both of them, using the Visible on function as seen below. You can restore the form by clicking on Show hidden, right-clicking on the element, and then Restore.
