Add a Form – Articulation Help Center

Forms are an important part of a website because they easily allow your visitors - and customers, if you are a business - to get in touch with you. We provide three different components that you can use to start building a form.

Newsletter Form - A simple form with an email field and submit button.
Contact Form - A basic contact form, with fields for name, email, and a submit button.
Survey - A survey form with a few radio input fields as well as a submit button.

To add any of the three, simply drag the component to a page of your site.

Form Input Components

With the Contact Form and Survey components, you can also add and remove the various form inputs used in the component. Note that the Newsletter Form does not support adding additional inputs since it’s intended to be a simple signup form.

Radio Input

Radio inputs allow a visitor to select a single choice from a list of choices. The input component has the following options:

Label - The text shown before the list of choices.
Required - Use this toggle to make the question required. This is toggled on by default.
Choices - The list of choices a visitor can pick from. To edit the text of a choice, click on the text shown for the choice in the list and type. To add more choices, click the Add Choice button. To remove a choice, click the red X button for the choice.
Layout - With this option you can choose to have choices list out inline, or horizontally, or vertically. This can be set separately for different screen sizes by clicking the desktop/mobile icon.
Help Text - Help text is displayed beneath the choices in the component. Edit this field if you’d like to include further information about the input.
Design - Within this design group, you can use the default color or set a custom color for the Label Color, Choice Color, and Help Text Color.
Spacing - The Margin option found here controls the space around the input, and can be set separately for different screen sizes.
Hover - Click on Hover to customize the Label Color, Choice Color, and Help Text Color when hovering over the input with a mouse.

Text Input

Text inputs are single-line input fields for shorter lengths of text, and have the following options:

Label - The text shown before the input field.
Validation - With this field you can validate that the right type of text is entered into the field, such as making sure it’s an email address. Options for validation include: text, email, number, phone number, URL, date, time, and color.
Required - This option is toggled on by default and makes the field required.
Help Text - Enter text into this option to add additional text below the field.
Design - Within this option group are style options for the input field, such as Label Color, Help Text Color, and Shape.
Spacing - To control the spacing around the field and label text, edit the Margin option found here. This can be set separately for different screen sizes.
Hover - To customize the Label Color and Help Text Color when hovering over the field with a mouse, click on Hover at the top of the options panel.

Checkboxes

Checkboxes are similar to radio inputs, except that visitors can check multiple choices rather than a single choice. It has similar options to radio buttons as well:

Label - The text shown before the list of choices.
Required - Use this toggle to make the question required; this is toggled on by default.
Choices - The list of choices a visitor can pick from. To edit the text of a choice, click on the text shown for the choice in the list and type. To add more choices, click the Add Choice button. To remove a choice, click the red X button for the choice.
Layout - With this option you can choose to have choices displayed horizontally inline, or vertically. This can be set separately for different screen sizes by clicking the desktop/mobile icon.
Help Text - Edit this field if you’d like to include further information about the input underneath the list of choices.
Design - Within this design group, you can use the default color or set a custom color for the Label Color, Choice Color, and Help Text Color.
Spacing - The Margin option controls the space around the input, and can be set separately for different screen sizes.
Hover - Click on Hover to customize the Label Color, Choice Color, and Help Text Color when hovering over the input with a mouse.

Form Button

All form components automatically include a Form Button component, but if you remove it and need to add one, drag this component into your form.

Note: if you add a second button somewhere else in the form, it will also submit the form. The component has the following options:

Label - The text shown on the button.
Size & Position - Within this group are the following options:
Align - Use this option to align the button to the left, right, or center of the form.
Size - With this option you can change the size of the button. This can be set separately for different screen sizes by clicking the desktop/mobile icon.
Full Width - Toggle this option on to have the button fill the full width of the form. This can also be set separately for different screen sizes.
Design - The Style option found here controls the styling of the button. The standard and highlight choices use the colors and styles set within your site’s style settings. The custom option allows you to customize the font, shape, text color, background, and border of the button.
Spacing - The Margin option found in this style group controls the spacing around the button within the component, and can be set individually for different screen sizes.

File Upload Input

With the File Upload input, visitors can use your form to upload files with their form submission. The component has the following options:

Label - The text shown above the file upload button.
Required - This option makes the field required, and is toggled on by default.
Help Text - Text you enter into this field is displayed below the upload button, and is great if you want to give additional information on the field.
Design - With the options in this group, you can customize the Label Color, Help Text Color, and Shape.
Spacing - The Margin option here controls the space around the input field and label, and can be set separately for different screen sizes by clicking the desktop/mobile icon.
Hover - By clicking on Hover at the top of the options panel, you can customize the Label Color and Help Text Color when a visitor moves their mouse over the field.

Select Input

The Select Input field adds a dropdown menu that visitors select a choice from. Clicking on the component will show the following options:

Label - The text shown before the dropdown menu.
Required - Use this toggle to make the question required; this is toggled on by default.
Choices - The list of choices a visitor can pick from. To edit the text of a choice, click on the text shown for the choice in the list and type. To add more choices, click the Add Choice button. To remove a choice, click the red X button for the choice.
Help Text - Edit the field shown in this option group if you’d like to include further information about the input field.
Design - Within the design option group, you can use the default color or set a custom color for the Label Color, Help Text Color, and Shape of the dropdown menu.
Spacing - The Margin option controls the space around the input, and can be set separately for different screen sizes.
Hover - Click on Hover to customize the Label Color and Help Text Color when hovering over the input with a mouse.

Address Input

With the Address Field input component, you can quickly add two text fields for visitors to enter the street address portion of a physical address. Note that if you want to capture a full address, you can use other fields for postal code, state or province, etc. The component has the following options:

Label - The text displayed above the two text fields in the component.
Line 2 Placeholder - This is the default text shown in the second text field. By default this is set to “Apt/Unit #”
Required - By default, this is toggled on to make the field required.
Help Text - With this option, you can display optional text underneath the two text input fields.
Design - Within this option group are style options for both input fields, such as Label Color, Help Text Color, and Shape.
Spacing - The Margin option here controls the space around the input field and label, and can be set separately for different screen sizes by clicking the desktop/mobile icon.
Hover - Click on Hover at the top of the options panel to customize the Label Color and Help Text Color when hovering over the fields with a mouse.

Text Area Input

The Text Area input is useful when you want to allow visitors to enter larger amounts of text into the form. The component has the following options:

Label - This is the text shown before the text area field.
Required - Use this toggle to make the field required; this is toggled on by default.
Help Text - Edit this field if you’d like to include further information about the text area; this is shown underneath the field.
Design - Within this option group, you can use the default color or set a custom color for the Label Color, Help Text Color, and Shape of the dropdown menu. The shape can be set separately for different screen sizes by clicking the desktop/mobile icon.
Spacing - To control the spacing around the text area and label text, edit the Margin option found here. This can be set separately for different screen sizes.
Hover - The Label Color and Help Text Color can be customized when hovering over the field with a mouse. To do this, click on Hover at the top of the options panel.