Skip to main content

Using Contact Forms in Flex Block

Updated

You can create flexible, customizable Contact Forms in flex block sections to collect information from visitors.

Adding Contact Forms to flex block sections

To add a Contact Form to a flex block section, you will first need to add a flex block to a Custom Page. If you aren't sure how to do this, please see our Flex Block overview article.

Once you have added a flex block to your Custom Page, you can select Contact Form from the element selector:

  1. Add Element +: Click Add Element to display a list of flex block elements
  2. Contact Form: Select Contact Form to add a Contact Form element to your flex block

This will add a contact form to your flex block section:

Contact Form design options

There are a range of customization options for Contact Forms, including the number of text fields, placeholder text, form background color, form width, and more.

  1. Edit Form Fields: Additional editing and design options for form fields
  2. Background: Set a background color for your Contact Form
  3. Labels: Set a text color for form labels
  4. Button Options: Adjust the font size and corner radius for your button
  5. Button Colors: Adjust the colours for your button and button text
  6. Spacing: Adjust the padding for your Contact Form
  7. Layer Positioning: Adjust your Contact Form's positioning, relative to other elements
  8. Duplicate: Duplicate your Contact Form
  9. Delete: Delete your Contact Form

If you click on Edit Form Fields (Step 1 in the previous screenshot), you'll be presented with additional options to edit your contact form:

  1. Fields: Manage your Contact Form fields, including adding new fields, editing or deleting existing fields, and clicking and dragging fields to rearrange their position in the Contact Form
  2. Settings: Adjust your button label, and set a custom submission confirmation message
  3. Style: Adjust the label and description font sizes, as well as the form border color

If you click Edit when hovering over a field name (Step 1 in the previous screenshot), you'll be able to edit that field more precisely:

  1. Field Type: Choose from Text Field, Text Area, Email Field, Dropdown, Radio Buttons, and Checkboxes
  2. Required: Specify whether or not filling out a field is required
  3. Field Title: Set a title for the field
  4. Description: Set a description to display directly below the Field Title
  5. Placeholder Text: Set placeholder text for the field

Once you've finished editing your Contact Form, be sure to save your changes, then view the form on your live site:

Contact Form content limits

There are some limits set in place for Contact Forms, to ensure they function as well as they can, and to ensure they cannot be abused for spam purposes. These limits are as follows:

  • Field label limit: 255 characters
  • Field description limit: 500 characters
  • Dropdowns, radio buttons, and checkboxes: 10 options per field
  • Number of fields: 15 custom fields
  • Submission confirmation message limit: 1500 characters

Mobile editing

Mobile view editing for Contact Forms works in the same way as any other flex block element. For a comprehensive guide, please see our Flex Block overview article.

  1. View Selector: Switch between desktop and mobile editors. Some design options may be limited in mobile view due to feedback limitations of mobile devices

Still have questions? Reach us on our live chat or email us at info@format.com. We’re here to help!

Related to