Style

Suggest Edits

Within the Form editor's Style tab, you can refine and apply your brand's specific styles to the form, giving it a polished appearance before publishing.

The design section has the following configurations:

Form Type

This section contains different types of forms for your brand style. Each form type is described below:

  • Popup: A popup form appears at the center of the page while browsing based on user actions or timing (e.g., after a set duration or scrolling). Using this form, you can provide offers, and discounts, and gather customer information like email for subscriptions, and contact details.
  • Flyout: A flyout form appears from the edge of the screen and draws more attention than other form types because they include movement. These forms "fly out" when triggered by a user action, such as clicking a button or icon. They are commonly used to capture user input, display additional information, or provide access to specific features without fully obstructing the main content.
  • Embedded: These simple contact forms can be placed anywhere on your site with customizable fields, texts, colors, and images. Embedded forms are integrated directly into a webpage or application, allowing users to interact with the form without being redirected to a separate page.

Form Size

This section allows customization of the form's dimensions with specific parameters: Width and Minimum Height.

Form Layout

Form layout enables you to customize the placement of elements within a form. The options are:

  • No image: Removes the default image component from the form.
  • Left image: Aligns the default image component to the left side of the form.
  • Right Image: Aligns the default image component to the right side of the form.
  • Display on mobile: When enabled, the form appears on the mobile.

Form Styles

Form styles have the option for customizing the form border.

  • Corner Radius: Applies rounded corners to the outer edge of form. you can specify the degree of curvature by setting the radius in pixels (px).
  • Border Width: Sets the width of the form's border.
  • Border Style: Sets the style of the form border. Select a style from the given dropdown.
  • Border Color: Sets the color of the form border.
  • Padding (in pixels): Sets the padding around the form.
  • Shadow Color: Sets the color of the hue or shade of the shadow cast by the form, enhancing its visual depth.
  • Shadow Blur: Sets the extent of blurring applied to the shadow, creating a softer or more diffuse appearance.
  • Shadow Spread: Sets the expansion or contraction of the shadow, influencing its size relative to the form.

Form Background

This contains the properties that enable you to customize the form background.

  • Background Color: Sets the background color of the form.
  • Background Image: Enables you to add a background image for the form.
  • Image Overlay Color: Sets the color applied as an overlay to an image.
  • Overlay Color: Sets the color used as an overlay for the image.

Input Field Text Styles

  • Text Color: Sets the color of the text within an input field.
  • Text Font Family: Sets the typeface or font family to the text within an input field.
  • Text Font Size: Sets the size of the text within an input field.
  • Text Font Weight: Sets the thickness or boldness of the font for the text within an input field.

Input Field Label Styles

This section contains the properties for customizing the component's labels in the form.

  • Label Color: Sets the color of element labels.
  • Label Font Family: Sets the font of the labels.
  • Label Font Size: Sets the font size of the labels.
  • Label Font Weight: Sets the thickness or boldness of the font for text labels

Placeholder & Error Styles

This section contains the properties for customizing the component's placeholder texts in the form.

  • Placeholder Color: Sets the color of placeholder texts of the form elements.
  • Error Message Text Color: Sets the color of the error messages in the form.
  • Letter Spacing: Sets the spacing between text letters in the form.
  • Required Fields Error Message: Sets the error message displayed for required fields.
  • Preview Required Text: When enabled, a preview is shown for the Required Fields Error Message.

Input Field Styles

This section contains the properties for customizing the input fields in the form.

  • Border Width: Sets the thickness or width of the border surrounding an input field.
  • Border Style: Sets the visual style or pattern of the border surrounding an input field.
  • Border Color: Sets the color of the border surrounding an input field.
  • Corner Radius: Sets the degree of curvature at the corners of an input field.
  • Field Height: Sets the vertical height of an input field.

Updated 4 months ago