Form Customization

Customizing forms can significantly enhance their visual appeal and functionality. With Referins, you can easily personalize your forms to align with your branding and improve user engagement. This article provides a comprehensive guide on how to use the form customization features effectively.

How to Use Form Customization Features

1. Access the Form Builder
   • Navigate to Sites > Forms > From the dropdown select Builder.
   • Select the form you want to customize or create a new form.

1. Adding Form Elements
   • Standard and Custom Fields: Add fields from the left panel. You can choose from standard fields like text boxes and drop-down menus, or add custom fields as needed.

• The Spread to Columns feature for forms allows the configuration of multiple columns for radio buttons, radio images, and checkboxes, enhancing the visual styling and layout.
• To utilize this feature, navigate to the form or survey editor, select the radio buttons or checkboxes, and adjust the column settings in the right-hand menu. This feature applies to new forms and does not affect existing ones.

• Styling, Themes, and Design Tools: All styling, design through various themes, and option tools are located on the right panel. Here, you can adjust the appearance and behavior of each form element.

Field Spacing Feature

You can adjust the spacing between fields in your forms and surveys. This addition gives you more flexibility in how you organize and design your content.

1. Navigate to the form or survey you want to edit and open it in the builder.
2. Go to Styles in the top right corner and you will find field spacing,you can adjust your spacing from there

• Take advantage of multiple integration options to seamlessly connect your forms with various tools and services, enhancing their functionality and efficiency.

1. Header Image Support
   • Upload Header Images: Go to the Styles section and upload your desired header image. This image will span the width of the form, positioned at the top for better visual presentation.

1. Background Image Support
   • Add Background Images: In the Styles section, upload a custom background image to cover the entire page of your form. This feature enhances the visual engagement of your forms.

• Preview: Use the preview option to see how your form looks with the background image.

1. Using Products in Payment Element

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

• Configuration: Go to the payment settings in the form builder, select the products you wish to include and customize the display options as needed.

Payment Elements: Sell Products and Collect Amount

• Sell Products: The Sell Products element allows you to sell physical or digital products directly through your forms. It simplifies managing your product catalog and streamlines the sales process.
• Collect Amount: The Collect Amount element is perfect for collecting specific amounts of money, such as donations, service fees, or custom payments.
• Enhanced UI/UX: The interface has been redesigned for easier navigation and better usability.

How to Use These Elements:

1. Open the Form Builder: Access the Form Builder from your dashboard.
2. Select the Element: Choose either the Sell Products or Collect Amount element from the new Payment section.

1. Configure Settings: Adjust the settings to meet your specific needs.

1. Publish Your Form: Save and publish your form to start collecting payments.

Single Line Forms and Field Width Customization

Single-line forms and layout options in the form builder, provide users with greater flexibility and control over their form designs ensuring responsive design and enhancing creativity in form building.

Key Features:

• Single Column Layout: Fields arranged vertically, one below the other.

• Two-Column Layout: Fields are placed side-by-side in two columns for a balanced and compact structure.

• Single Line Layout: Up to 5 fields in a single horizontal line for a streamlined design.

• Field Width Setting: Adjust field widths as a percentage of the form width for tailored and aesthetically pleasing designs.

Notes:

• Existing forms will automatically select the One Column or Two Column layout based on whether the inline form option was previously enabled or disabled.
• Old forms in preview mode will continue to function as before, respecting the old inline form settings.
• Currently, single-line forms can include up to 5 fields.

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

Use Case 1: Enhancing Survey Forms

Add background images and header images to your survey forms to make them visually engaging and encourage higher response rates.

Use Case 2: Branding Consistency

Customize your forms with your company’s colors, fonts, and logos to ensure brand consistency across all user interactions.

Use Case 3: Integrating Products in Forms

Use the payment element to list products directly in your forms, making it easier for users to purchase without leaving the form.

Note: Changes to form settings may take a few minutes to reflect. Be patient and check the preview to confirm updates.

Pro Tips

• Consistency: Maintain consistency in your form design by using uniform fonts, colors, and element sizes.
• Accessibility: Ensure your forms are accessible to all users by following web accessibility guidelines.
• Testing: Regularly test your forms to ensure they work correctly across different devices and browsers.

FAQs and Use Cases

Q: Can I add custom fonts to my forms?

A: Yes, custom fonts can be added through the styling options in the form builder.

Q: How do I ensure my form is mobile-friendly?

A: Use the preview feature to test how your form looks on mobile devices and make necessary adjustments in the styling section.

Q: Can I use different background images for different sections of my form?

A: Currently, the background image feature applies to the entire form page. Consider using header images or section dividers to add variety.