Lead Gen & CRM

How can we help you?

You've got this. You've got us. Search our Knowledge Base to quickly find answers to your questions.

Lead Gen & CRM

> Forms

> Constant Contact Forms

Configuring Form Designs Using the Visual Styler

Article: 000050586

Updated: July 26, 2024

Use the Visual Form Styler to customize the look and feel of your form

Inserting fields into forms is only part of the form creation process. You can design and customize the look and feel of every part of your form using the Visual Form Styler. If you like the way your form looks, you can save it as a preset for future use.

Users:

Administrators	✓
Company Managers	✓
Marketing Managers	✓
Sales Managers
Salespersons
Jr. Salespersons

Visual Form Styler Categories

When creating a form, the Visual Form Styler, located within the Styles tab, offers a way to see your design changes in real time. The Visual Form Styler is broken into different categories, each covering a specific portion of the form. Within these categories, you can configure the various design aspects of the form.

The available categories are as follows:

	Category		Description
	General Styles		This category deals solely with the form's background color and padding.
	Checkbox		This category offers ways to modify text and appearance of checkbox fields.
	Drop-down		This category provides settings that modify the text and appearance of drop-down fields, as well as the color of the drop-down menus.
	Header		This category modifies the appearance of all header elements.
	Label		This category provides settings that determine whether labels will appear over their respective text entry fields, as well as ways to modify their overall appearance.
	Paragraph		This category modifies the appearance of all paragraph elements.
	Presets		This category deals solely with saving and loading form styles.
	Radio		This category provides settings that modify the text and appearance of radio fields.
	Text		This category provides settings that modify the text and appearance of text entry fields.

Visual Form Styler Settings

The Visual Form Styler offers different ways to customize your form. These settings impact the look and feel of your form in different ways. Some settings modify the color of the form or its text, and others modify the overall spacing between individual parts of the form.

The following are settings that are available within the various Visual Styler categories:

Setting	Categories	Description
Background Color	General Styles Drop-down Text	Changes the background color of specified content to a specific color. Color can be entered in hexadecimal format. It can also be selected from the color picker.
Border Color	Checkbox Drop-down Text	Changes the border color for specified content. Color can be entered in hexadecimal format. It can also be selected from the color picker.
Border Size	Checkbox Drop-down Text	Changes the border size for specified content. A border's size can be entered as a number ranging from 0 to 64. It can also be selected from the associated scale.
Border Style	Checkbox Drop-down Text	Changes the appearance of border edges for specified content. Border styles are selected from the associated drop-down menu.
Border Radius	Checkbox Drop-down Text	Changes the sharpness of border edges for specified content. A border's radius can be entered as a number ranging from 0 to 20. It can also be selected from the associated scale.
Display	Label	Enables or disables text over form fields. Display status is selected from the associated drop-down menu.
Font Color	Checkbox Drop-down Header Label Paragraph Radio Text	Changes text in specified content to a specific color. Color can be entered in hexadecimal format. It can also be selected from the color picker.
Font Family	Checkbox Drop-down Header Label Paragraph Radio Text	Changes text in specified content to a specific universal font. Font families are selected from the associated drop-down menu.
Font Size	Checkbox Drop-down Header Label Paragraph Radio	Changes text in specified content to a specific size. A font's size can be entered as a number ranging from 4 to 64. It can also be selected from the associated scale.
Font Weight	Checkbox Drop-down Header Label Paragraph Radio Text	Sets text in specified content as either normal or bold. Font weights are selected from the associated drop-down menu.
Letter Spacing	Checkbox Drop-down Header Label Paragraph Radio Text	Changes the spacing between letters for text in specified content. Letter spacing can be entered as a number ranging from 0.0 to 2.0. It can also be selected from the associated scale.
Line Height	Checkbox Drop-down Header Label Paragraph Radio Text	Changes the distance between lines of text around the specified content. Line height can be entered as a number ranging from 0.0 to 2.0. It can also be selected from the associated scale.
Text Alignment	Text	Sets the alignment of text in text fields. Alignments are selected from the associated drop-down menu.
X Padding	General Styles Checkbox Header Label Paragraph Radio Text	Changes the amount of horizontal padding in specified content. Padding can be entered as a number ranging from 0 to 100. It can also be selected from the associated scale.
Y Padding	General Styles Header Label Paragraph Text	Changes the amount of vertical padding in specified content. Padding can be entered as a number ranging from 0 to 100. It can also be selected from the associated scale.

Canvas Viewing Options

When customizing form content, your changes will be displayed in the Visual Form Styler canvas on the right side of the screen.

The canvas also houses a select few options that help with the creation process.

The available options are as follows:

	Option		Description
	Expand Canvas/ Default Canvas		Expands the form's width in the canvas. Also returns the form's width to its default size.
	Revert Changes		Reverts all changes made to form content. Changes will revert to the default state of the form preset.
	Test This Form		Opens the form in a new browser tab. The form's different components can be interacted with. Test information will be sent if submitted, but tracking will not be established.