Your forms allow you to collect information from your customers, and the last step of getting that information into your system is the submission button. The button element encourages your audience to take action, so customizing it to match your brand’s look and tone will increase its efficiency. Let’s learn how to do it!
Customizing The Button #
The button element is added automatically upon creating a Form. To start customizing it, simply click the element to open its settings.
Themes #
Use the Select Themes option to use premade templates to recolor your submission button.
Content #
Enter the button text to start. Then adjust the font to your liking by selecting the typography and font size. Toggle Enable Icon to add a small image to your button; once you do, you can select the icon and its placement. To add more text to the button, enable the Sub Text option, then type it in. To customize your button’s size, disable the Full Width option, then enter your desired width.
Alignment #
Select how you want the button to be aligned in the form in this section.
Colors & Background #
- Background Color: Change the background color of your button with this option.
- Text Color: You can adjust the text color in the button here, for example, the “Click to Sign Up” text.
- Sub Text Color: When you add a sub-text to your button, you can adjust its color in the button here.
Border #
- Width: When you increase the border width, it increases the thickness of the border.
- Radius: Adjusting the radius of your border curves the edges; the higher the number you select, the curvier it becomes.
- Color: To change the color of the border, click on this color icon.
- Style: There are three different styles for your border. It could be a solid, dashed, or dotted border.
Padding #
Adjust the space around your button in relation to other elements.
- Padding: These four toggle bars move the content to either the left, right, top, or bottom, depending on the toggle bar you click on.
- Margin Top and Bottom: You can adjust the top or bottom margin of your content by toggling its bars.
Shadow #
Add a shadow effect to your button to make it pop by setting these details:
- Color: This defines the color of your element’s shadow.
- Horizontal: This defines how far to the right the shadow will spread.
- Vertical: This defines how far down the shadow will spread.
- Blur: Use this option to soften the shadow.
- Spread: Use this option to expand your shadow across all edges.
And that’s it! Simply save your form to set the changes, and you’re done. With these steps, you can easily add and customize a button that not only looks great but also drives action.
Frequently Asked Questions #
Do I have to add the submit button manually? #
No. The button element is added automatically when you create a form. Click it to open its settings and begin customizing.
How do I change the button text and font? #
In the Content section, enter your button text, then adjust the typography and font size. You can also enable Sub Text to add a second line of text.
Can I add an icon to my button? #
Yes. Toggle Enable Icon in the Content section, then choose the icon and set its placement.
How do I control the button’s width? #
Disable the Full Width option in the Content section, then enter your desired width to size the button manually.
What border styles are available? #
You can choose a solid, dashed, or dotted border, and adjust its width, radius, and color to match your brand.
How do I make my button stand out on the page? #
Use the Shadow settings to add depth by adjusting color, horizontal and vertical offset, blur, and spread, then save the form to apply your changes.
