Widget Customization
This page will outline the various options for customizing your widget to align with your branding, style, and personal preferences. It will also explain how to configure the fields your users will fill out during the submission process.
Widget Styling
This section explains the options for customizing the main layout of your widget, including the following:
Background Color: Use the color picker to select the color that will fill the widget within its borders.
Border Radius: Adjust the borders of the widget to be either straight or rounded, depending on your preference.
Border Color: Pick the color of the border surrounding the fields inside of you widget.
Input Styling
This section details the available options for customizing the appearance of your input fields, including the following:
Input Font: Customize the font and size of the text within your widget's input fields. You can also apply styles such as bold, italic, or underline for added emphasis.
Input Background Color: Change the background color of your input fields to match your widget’s design and branding.
Input Border Color: Choose the color of the border surrounding your input fields, helping to define the appearance and style of the form.
Input Active Border Color: Set the color of the border when an input field is selected or active, giving visual feedback to the user.
Input Border Radius: Adjust the roundness of the input field borders, allowing you to create sharp corners or softer, rounded edges.
Input Text Color: Customize the color of the text entered into the input fields to align with your design preferences.
Input Placeholder Color: Change the color of the placeholder text inside the input fields, ensuring it remains subtle yet visible.
Inputs
The "Inputs" section allows you to define the fields that will appear in the form. Each field can be set as either required or optional, depending on your needs.
Adding an input
To add a new input to your widget form, simply press the "Add Field" button, as demonstrated in the screenshot below.
This will add a new input to your form and provide two configuration options:
Set the label or placeholder text for the input.
Determine whether the field should be mandatory or optional.
Once you're satisfied with your settings, click the blue checkmark icon to save your changes. If you decide to cancel the addition of the new field, click the red "X" icon.
Editing an input
To edit an input, simply click the blue pencil icon next to the field, as shown in the image below.
This will present the same setup as when adding a new input, allowing you to modify the input's label and adjust the mandatory requirement as needed. To save your changes, click the blue checkmark icon. If you want to discard your changes, click the red "X" icon.
Deleting an input
To delete an input, click the red trash can icon, as shown in the image below. A confirmation dialog will appear, and you'll need to confirm the deletion of the input to proceed.
Button Styling
This section explains how you can customize the submit button at the bottom of the widget form, allowing you to adjust its appearance and functionality to better match your design and user experience:
Button Font: Choose the font style and size for the text displayed on the button to ensure it matches your overall design and branding.
Button Background Color: Set the background color of the button, helping it stand out or blend in with the rest of your widget’s design.
Button Border Color: Define the color of the button’s border to create a more distinct or subtle look based on your preferences.
Button Border Radius: Adjust the roundness of the button’s corners by modifying the border radius, allowing for sharp or rounded edges.
Button Text Color: Customize the color of the text displayed on the button, ensuring it is easily readable and visually appealing.
Button Text: Edit the text that appears on the button to clearly communicate the action it will perform (e.g., "Submit," "Join," or "Sign Up").
Last updated