Style

Style allows you to customize your form's overall layout and visual presentation. Here, you can tailor the appearance of your form's container and header.

1. Default: This style has a defined container and provides clear visual boundaries for the form.
2. Transparent: This style creates a transparent container for your form elements, allowing the form to blend seamlessly with the surrounding background. This design choice ensures that the form integrates smoothly into the overall page layout, maintaining a cohesive and aesthetically pleasing look. The transparency helps to focus attention on the form fields themselves without distracting from the surrounding content.
3. Deck: With this style, each field within your form will have its own dedicated container. This means that each field will have its own designated space, making it easier for your audience to navigate and fill out the form. No more confusion or frustration with overlapping fields.

1. Scrollable: This style allows the header to move along with the form as the user scrolls through it. This is ideal for shorter forms where the header may take up too much space and obstruct the user's view.
2. Fixed: This style will keep the header in a fixed position at the top of the container, even when the user scrolls down the form. This is useful for longer forms where users may need to refer back to the header for information.

Font

Wallpaper

1. Solid Color Background
   To apply a solid color background, you can choose colors from pre-defined color palette or color picker to select colors that precisely match your existing brand color.
   
2. Gradient Color Background
   Gradient color allows you to create a background with smooth color transition. Here, you can choose two distinct colors for the starting and ending points of the gradient.
   
1. Angle: It has a slider that allows you to adjust the angle of the color transition within the gradient. This lets you control the direction of the color blend.
   
   
   

This allows you to add an image to your form's background to grab the attention of your audience and to relate to your brand. Here, you can choose to upload images from your device or use pre-designed backgrounds or add an image from Pixabay. After adding the background image you can align it, fit it, or adjust its opacity.

Banner

Image

1. Style 1: Here the banner stays attached to the top of the form container.
   
2. Style 2: Here the banner is positioned independent of the form container. 

Header

The header section at the top of the form contains your form title, description and logo. You can customize these elements by tailoring the below aspects:

Form Title

This allows you to choose a color for the form's title. Set a distinct color for your title, making it the central focus of the header. This grabs user attention and clearly communicates the form's purpose.

Form Description

If you have an additional description, select a color that complements the title and ensures readability. Briefly explain the forms purpose or provide any necessary instructions.

Background

This allows you to set the background color of your header. You can select a solid color or gradient for the header background.

Font Family

This setting allows you to choose the type of font used for your form's header text. Choose a clear and easy-to-read font that compliments your brand identity.

Logo

Logo's are symbol that represent your brand or company. Upload your logo from your device or choose one from Pixabay.

Image Size

This allows you to control the size of the logo image. You can resize the logo using the slider based on the need.

Image Alignment

This controls how the logo, for title and description are aligned within the form header. Choose an image alignment based on the styles provided to create an organized layout. 

To explore additional header customization options, click More.

1. Border: This allows you to choose a color for the border line surrounding the form header.
2. Border Width: This allows you to control the thickness of the form header border. 
3. Edges: The edges slider allows you to control the corners of your form's header. 
4. Outer Spacing: This allows you to adjust the spacing of your header from the top, left and right edges of the form.
5. Inner Horizontal Spacing: This allows you to adjust the spacing of header content from the left and right edges of the form header.
6. Inner Vertical Spacing: This allows you to adjust the top to bottom spacing of the form header.
   

Page

When your form has more than one page, designing a clear navigation bar helps in guiding the users smoothly through the completion process. 

Navigation Bar

Navigation Bar provides users with a clear understanding of their progress within the form.

1. Type: You can choose from different visual styles like bar, steps, square to indicate form progress. Choose the style that best suits your form's design and provides clear progress cues.
   
2. Position: This allows you to choose the position of the navigation bar in the form. 

1. Inside Form Container: The navigation bar appears directly within the form container at the top.
   
2. Outside Form Container: The navigation bar is placed outside the form container.
   

Visited/Unvisited - Navigation Bar 

Customize the background and text colors of both "Visited" and "Unvisited" pages within the navigation bar. 

Page Header

Show Page Title in:

1. Navigation Bar: Displays the title of the current page within the navigation bar itself.
   
2. Page: Shows the page title directly on the page itself. You can customize the page title background, text color, and text alignment.
3. None: Hides the page title completely.

To explore additional customization options, click More.

Container

1. Custom: This allows you to set the width for your container in pixel value within the allowed range. It offers a precise control over form size.
2. Fit to Screen: This allows the container to expand and adjust itself according to the width of the user's screen.
   

Here are the additional container customization options:

1. Border: This allows you to choose a color for the border line surrounding the form container.
2. Border Width: This allows you to control the thickness of the border line surrounding the form container. 
   
3. Edges: The edges slider allows you to control the corners of your form's container. 
   
4. Horizontal Spacing:  Horizontal spacing allows you to adjust the distance between the left and right edges of the form container.
5. Vertical Spacing: Vertical spacing allows you to adjust the distance between the top and bottom edges of the form container.
6. Shadow: This creates a shadow effect for the form container.
   
7. Shadow Spread: Drag the slider to adjust the intensity of the shadow effect.
   
8. Form Responsiveness
   Responsive View: Responsive view allows the form layout to adjust automatically to ensure optimal viewing and usability on devices of different screen size, including those smaller than 480 pixels.

Fields

Fields section allows you to tailor the visual appearance of each field within your form. 

1. Label: This lets you choose the color for the field label.
   
2. Instruction: This property allows you to control the color of any instruction text associated with a field. 
3. Focus: You can choose the color to highlight a field, whenever a user clicks or navigate to the field. This helps users identify the currently active field, improving user experience.
   
4. Mandatory Asterisk: This allows you to choose the color of the symbol (*) that indicates a mandatory field.
   

1. Value: This defines the color of the text a user enters into the field.
2. Background: This controls the color of the background area in the field.
3. Border: This allows you to customize the color of the field's border.
4. Border Shape: Here, you can choose the style of the field's border that suits your form.

1. Background: This allows you to control the background color of the picker fields like Multiple Choice field, Slider field, dropdowns, date pickers, and hover text.

Here, you can customize the following:

1. Border Width: This allows you to control the thickness of the input field's border. 
   
2. Horizontal Spacing: This allows you to adjust the spacing of fields from the left and right borders of the form container.
   
3. Vertical Spacing - Between Fields: This allows you to adjust the space between fields.

1. Text: Here, you can choose the color of the text of the error messages.
   
2. Icon: This allows you to control the visibility of icon within each field. You can choose to show or hide them.
   

Special Fields

Special Fields go beyond the basic text boxes and dropdowns of online forms. They offer a unique way to capture user input and enhance user experience. Here is the breakdown of some common special fields and how to customize them,  

Subform - Inline

These subforms appear directly within your main form. You can define a background color specifically for the inline subform to visually distinguish it from the rest of the form using the Background option. If your subform is a popup type subform, you can customize its background color under Container > Popup Background.
This is applicable to inline Subform and Add Entry card.

Choice Fields

For the choice fields like Radio and Checkbox, you can customize

1. Text: Text allows you to choose the color of the text associated with choice field options, to ensure readability against the background.
   
2. Selection: This defines the color that highlights the chosen option when a user selects them, providing a visual confirmation to the user.
   

This is applicable to Radio, Checkbox, and Matrix Choice fields.

Slider 

Selection: Here, you can choose the color that fills the slider bar as the user moves it, indicating their selection.

Rating

Depending on the chosen rating shape (stars, hearts, etc.)., you can customize the color that fills the shape as the user selects a rating level. This provides a visual representation of the chosen rating.

Matrix Choice

You can customize the overall appearance of the matrix choice by choosing the appropriate table style and the background color for the table.

Buttons

1. Standard: Here, the button has pre-defined dimensions. If you choose standard button size, it allows you to choose the position of your button placement within the container. You can choose to keep default alignment of the buttons or make it left aligned, centered or right aligned under the Button Alignment option.
   
2. Fit to Screen: This allows the button to expand and adjust itself according to the width of the user's screen.