Form Customization with Advisor's Growth: Enhance Visual Appeal and Functionality

Customizing your forms can greatly improve both their visual appeal and overall user experience. With Advisor's Growth, you can easily tailor your forms to match your branding, making them more engaging and functional. This guide provides an overview of how to effectively use these form customization features.

How to Use Form Customization Features

Accessing the Form Builder

Select an existing form or create a new one.
Note: To enable the new form builder UI, go to Sub-Account Settings > Labs, then toggle on the "UI Revamp of Form Builder" option.

Adding Form Elements

Standard and Custom Fields: Choose fields from the left panel, which includes standard options like text boxes and drop-down menus, as well as customizable fields.

Spread to Columns Feature: This feature allows you to organize radio buttons, radio images, and checkboxes into multiple columns, improving the layout and presentation of your forms. To apply this, navigate to the form editor, select the relevant element, and adjust the column settings in the right-hand menu. This feature is only applicable to new forms.

Styling, Themes, and Design Tools

All design options, including themes and styling tools, are located on the right panel. Here, you can fine-tune the appearance and behavior of each form element.

Field Spacing Feature

Adjusting the spacing between fields offers more control over how your form looks and functions.

How to Access:

Open the form or survey you want to edit in the builder.

Go to Styles in the top right corner and find the field spacing option. Adjust the spacing according to your needs.

Key Benefits:

Improved Layout Control: Organize your fields precisely for a cleaner look.

Enhanced User Experience: Better readability and form flow.

Greater Flexibility: Easily align your design with your brand’s style.

You can also integrate your forms with various tools and services for added functionality and efficiency.

Header and Background Image Support

Header Images: Upload a header image in the Styles section. The image spans the form’s width, offering a strong visual presence at the top.

Background Images: Upload a background image that covers the entire form page, creating a more visually engaging experience. Use the preview option to check how the form looks before publishing.

Using Products in the Payment Element

Adding Products to Forms: Integrate products into your forms using the payment element. This allows you to manage product listings and streamline purchasing directly within the form.

Configuration:

Go to the payment settings in the form builder.

Select the products you want to include and customize display options.

Payment Elements Overview:

Sell Products: Easily sell physical or digital products through your forms.

Collect Amount: Ideal for collecting donations, service fees, or custom payments.

How to Use:

Access the Form Builder from your dashboard.
Select either the Sell Products or Collect Amount element from the Payment section.
Configure the settings and publish your form to start accepting payments.

Single Line Forms and Field Width Customization

Advisor's Growth offers flexible layout options, allowing for more creativity in form design.

Key Features:

Single Column Layout: Vertically arranged fields.
Two Column Layout: Side-by-side fields for a compact look.
Single Line Layout: Arrange up to five fields in a horizontal line for a streamlined appearance.
Field Width Setting: Adjust field widths as a percentage of the form width for a customized design.

Notes:

Existing forms will default to either One Column or Two Column layouts based on previous inline form settings.
Old forms in preview mode will retain their original settings.
Single line forms can include up to five fields.

How to Use: Go to the form builder section in your dashboard, select your preferred layout, and use the Field Width setting to adjust the size of each field.

Pro Tips

Consistency: Use consistent fonts, colors, and sizes across your form for a professional look.
Accessibility: Ensure your forms are accessible by following web accessibility guidelines.
Testing: Regularly test your forms on different devices and browsers to ensure compatibility.

FAQs and Use Cases

Q: Can I add custom fonts to my forms?
A: Yes, you can add custom fonts via the styling options in the form builder.

Q: How do I make my form mobile-friendly?
A: Use the preview feature to check how your form looks on mobile devices and make adjustments in the styling section.

Q: Can I apply different background images to different sections?
A: The background image applies to the entire form page. Use header images or section dividers to add visual variety.

Use Case 1: Enhance survey forms by adding background and header images to create visually appealing surveys that encourage higher participation.

Use Case 2: Ensure brand consistency by customizing your forms with your company’s colors, fonts, and logos.

Use Case 3: Integrate products into your forms to simplify purchasing processes for users without needing them to leave the form.

Note: Changes to form settings may take a few minutes to reflect. Be patient and use the preview option to verify updates.