Comprehensive Guide to Customizing Form Styles

To customize the appearance of your form, access the Styles Tab in the form builder. This section lets you adjust design elements like colors, borders, and other visual aspects. By customizing these features, you can ensure your form aligns with your brand’s look and feel.

Layout Customization

In the Layout section, you can modify the structure of your form. You can enable inline forms, which place form fields side by side instead of stacked, and choose whether or not to display field labels.

Styling the Form

In the Form Style area, personalize the design of your form by adjusting the background color and adding borders. You can choose a color from the picker or enter a custom code for the background.

You can select the border style—dotted, dashed, solid, or none—and modify its width by adjusting the values.

To round the corners of your form, enter a number in the Corner Radius field, with higher numbers resulting in more rounded corners.

Adjusting Form Size and Spacing

Control the width of your form by inputting a value in the Width field. The larger the number, the wider the form.

You can also adjust the form's padding, controlling the spacing around the form by applying padding to the left, right, top, or bottom.

Shadow Effects

The Shadow section allows you to add depth to your form's borders. You can customize aspects such as the color, width (both horizontally and vertically), and blur level of the shadow.

Customizing Field Styles

In the Field Style section, you can adjust the visual presentation of form fields by changing the background and font colors.

You can further enhance the fields by adding borders, choosing a border style, and adjusting the width, color, and corner radius of the field borders.

Padding options allow you to control the spacing inside the form fields, ensuring the layout meets your design preferences.

The Shadow option allows for further customization, giving form fields a unique, polished appearance by adjusting shadow color, size, width, and radius.

Label and Placeholder Customization

In the Label and Short Label sections, you can control the font color, size, and weight for the text labels associated with each form field.

Similarly, in the Placeholder section, you can adjust the font style, size, and color for the placeholder text inside form fields.

Custom CSS and Visual Enhancements

For more advanced customization, you can add your own CSS code in the Custom CSS section, allowing you to tailor the form’s design more specifically. If you are unfamiliar with CSS, consider seeking advice from a developer.

Additionally, you can upload a Background Image or Header Image to enhance the overall look of your form.

Additional Options

In the Miscellaneous section, you can choose whether or not to display agency branding on your form by toggling the option on or off.