Tailoring your form’s design is key to creating a seamless user experience that aligns with your brand identity. The Styles Tab in the form builder provides a wide array of options to modify the visual aspects of your form, including layout, colors, and advanced design elements. With these tools, you can ensure your form is both functional and visually appealing.

To access the Styles tab, click the “control” icon at the top right corner of the form builder.

Layout #

Here you will find your form layout settings, meaning how the fields will be spread across the form.

Show Image #

Enabling this option allows you to add an image to your form. Once you’ve added your image, you can modify the image’s placement and dimensions.

Form Type #

The form type will be the orientation for the fields. The three types are:

• Single Column: A vertically streamlined version of the form; all fields will have a width of 100%.
• Two Column: Breaks your fields into two columns, with the split between fields at 50% by default.
• Single Line: Fits as many fields as possible in a single horizontal line. This version gives you the most control over how many fields appear and how wide they are.

Input Style #

Adjust the appearance of the input fields to enhance readability and aesthetics.

Width #

Control how wide the form appears by entering a numerical value. Larger numbers result in a broader form.

Field Spacing #

Set the distance between fields by specifying a value, ensuring they’re well-spaced for a clean look.

Label Width #

Specify the width of the field labels for consistent alignment.

Label Alignment #

Align field labels to the left, center, or right based on your design preference.

Padding #

Add spacing around the form’s edges to ensure elements aren’t too close to the margins. Enter values for top, bottom, left, or right padding to achieve a minimalist design.

Colors & Background #

Click the dropdown to configure the Colors & Background of the form.

Background #

Change the form’s background color by selecting from the palette or adding a custom hex code. This will affect the general form’s background.

Font Color #

This will modify the font color user responses have when data is entered. You can see it by previewing the form.

Input Background #

This will change the background color for the response fields.

Background Image #

The background image is intended to cover the entire page, providing a visually appealing backdrop for the form.

Header Image #

The header image is designed to cover the entire form’s width and remains at the top.

Miscellaneous #

Click the dropdown to configure the Agency branding within the form.

Agency Branding #

In the Miscellaneous section, toggle on or off the company Branding option to show or remove agency branding at the bottom of your form. Turning it off allows you to place your form on a different funnel from the agency’s.

The Styles Tab in the form builder empowers you to design forms that are as functional as they are visually appealing. By customizing layouts, colors, and advanced features, you can create forms that not only meet your needs but also align seamlessly with your brand’s identity.

Frequently Asked Questions #

How do I open the Styles Tab? #

Click the “control” icon at the top right corner of the form builder to access the Styles tab.

What form layout types can I choose from? #

You can choose Single Column (full-width fields), Two Column (a 50/50 split), or Single Line (as many fields as possible on one horizontal line).

Can I add images to my form? #

Yes. Enable Show Image to add an image, and use the Background Image and Header Image options to set a full-page backdrop or a header that spans the form’s width.

How do I change the form’s colors? #

Open the Colors & Background dropdown to set the background, font color, and input background using the palette or a custom hex code.

How do I control spacing and alignment? #

Use the layout settings for Width, Field Spacing, Label Width, Label Alignment, and Padding to fine-tune how the form and its labels are arranged.

How do I remove agency branding from my form? #

In the Miscellaneous section, toggle off the Branding option to remove agency branding from the bottom of your form.