How to add a form to your page and customize it

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

Form_-_add_new_form.png

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. 

Forms_-_edit_form.gif

However, new and old form fields are edited within the form selector itself.

Editing Form Fields: 

Forms_-_edit_form_fields.gif

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  

Forms_-_type_of_fields.png

Additional Form Options: 

When editing a form within the builder, you'll be presented with four different options.

Forms_-_form_settings_menu.png

The Form Button Style option looks like this:

Forms_-_form_button_style_new.gif

Form buttons are edited separately from the main form itself. You can drag the button wherever you'd like and resize it to any size. You can also edit the following attributes:
  • 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:

Forms_-_form_style.png

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

Forms_-_form_submission_gif.gif

  • 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 create a custom “Thank you Message,” and you can also remove it. 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 

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.

Screen_Capture_on_2023-03-22_at_11-02-41.gif

NOTE: The redirect option cannot be used together with the download option. They are mutually exclusive and only work separately. You can either choose a redirect or a file download as an automatic action after the visitor submits the form, not both. To learn more about the 'download file' option please refer to the dedicated article here: https://d.pr/jjVoHd 
The Multistep option allows you to turn your form into a multistep form. Check out this article for more details on multistep forms: https://d.pr/2O3oFc