Theme settings in your form builder allow you to customize the form's design and select default settings for the layout, colors, buttons, fields, and close buttons.
Form Layout
Adjusting the display type, width, and background image placement allows you to create a form that seamlessly integrates with your website design.
Display Type: You can choose from four display types for your form: Popup, Landing Page, Embedded, and Flyout. This feature is particularly beneficial when you want to maintain the same design across different form types. Simply duplicate your initial form and select the desired display type.
Form Width: You can adjust the width of your form to accommodate any screen size, with a range of 300 to 1000 pixels.
Background Image: Customize the placement of your background image next to your form. You have several options to choose from:
Image Left
Image Right
Image Top
Background Image
No Image
Form Position: This setting will allow you to change the position of your form on the website page.
When using a background image, you will select the image file and specify whether its width fills the space or fits the form's size.
These settings will help you create a visually appealing form that fits your design needs.
Forms Styles
These settings allow you to customize the appearance of your form by adjusting corner shapes, border styles, and colors.
Choose the shape of the form's corners:
Square: Forms will have sharp, right-angled corners.
Slightly rounded: Corners will have a subtle curve.
More rounded: Corners will be more curved.
More options: Specify how rounded the corners should be manually.
Border Width: Adjust the thickness of the form’s border using the slider or input field. The value set to "0 px" means there is no visible border.
Border Style. Defines how the border appears:
Solid: A continuous, unbroken line.
Dashed: A series of short dashes.
Dotted: A series of small dots.
Border Color: Sets the border color using a hex code or color picker.
Overlay Color: Controls the color overlay applied to the form background.
Buttons Settings
Customize the appearance of buttons in the form. Changes made to each button type will be applied consistently throughout the form.
Button Types
Primary Button. The main call-to-action button (e.g., "Submit").
Secondary Button. A less prominent button, often used for alternative actions.
Tertiary Button. The least prominent button, typically for optional actions.
Button Customization Options
Corners. Adjust the corner shape of the button to match the form’s style.
Square: Buttons will have sharp, right-angled corners.
Slightly rounded: Buttons will have a subtle curve.
More rounded: Buttons will be more curved.
More options: Specify how rounded the button corners should be manually.
Background Color. Set the button’s background color.
Font. Select the font for the button text and adjust the font size for the button text.
Decoration. Modify the button text appearance. Options include bold, italic, or underlined styles.
Text Color. Sets the color of the button text.
Alignment. Adjusts how the text is positioned within the button.
Border Width: Use the slider or input field to adjust the thickness of the button's border. A value of "0 px" means there is no visible border.
Border Style. Defines how the border appears:
Solid: A continuous, unbroken line.
Dashed: A series of short dashes.
Dotted: A series of small dots.
Border Color. Sets the color of the button’s border.
Padding. Adjusts the internal spacing of the button to control its size.
Field Settings
Customize the appearance of input fields in the signup form.
Field Style. Define how the fields are visually presented.
Boxed Style. Fields are enclosed within a visible border.
Underlined Style. Fields have a minimal underline instead of a full border.
Corners. Adjust the shape of field corners to match the form’s design.
Square: Fields will have sharp, right-angled corners.
Slightly rounded: Fields will have a subtle curve.
More rounded: Fields will be more curved.
More options: Specify how rounded the fileds corners should be manually.
Background Color. Set the background color of the input fields.
Error Color. Define the color used for error messages or invalid field highlights.
Font. Select the font style for text entered in the fields. Also, adjust the font size for text inside the fields.
Decoration. Apply text styling options for field text.
Bold (B). Makes text appear thicker.
Italic (i). Slants the text.
Underline (U). Adds a line beneath the text.
Text Color. Set the color of the text entered into the fields.
Placeholder Color. Define the color of placeholder text inside the fields.
Label Color. Set the color of field labels.
Alignment. Control how text is aligned inside the fields (left-aligned, centered, or right-aligned).
Border Width. Define the thickness of the field border.
Border Style. Determine the appearance of the field border.
Solid: A continuous, unbroken line.
Dashed: A series of short dashes.
Dotted: A series of small dots.
Border Color. Set the color of the field border.
Padding. Adjust the internal spacing within the field to control size and spacing.
Close Settings
Use the Close Settings to customize the appearance and functionality of the close button. You can:
Adjust the Close Button Color: Change the color of the close button to match your theme.
Set Background for the Close Button: Select a background color that complements your design.
Enable Click Outside to Close: For a more intuitive experience, users can close the form by clicking anywhere outside of it.
Now that you're familiar with the customization options start experimenting with different settings to create the perfect form for your audience. A well-designed form can improve engagement and lead to better conversions.
Need help? Check out our additional resources or contact support for guidance! We are here 24/7 for you! 💛