In this document, we'll show you how to:
- Modify different visual elements of your form's submit button
- Change the submit button label
- Use the CSS box to add custom styling to your form's button
Modify your submit button elements
You can modify the following elements for your form's submit button:
- Background color
- Text color
- Border size
- Corner radius
To modify any of the above elements click on the “Style” tab of your form located on the right of your screen.
You will then see a section called “Button.”
To change the button color, enter your Hex color code or click on the color picker to select your color in the Background field:
Button text color:
To change the color of your text, enter your Hex color code or click on the color picker to select your color in the Text field:
To increase or decrease the border of the button, click either the up or down arrow next to border. You can also change the color of your border by clicking the color picker.
If you want to give your button a more rounded shape, you can adjust the corner radius by clicking on the up or down arrows.
For example, I increased my corner radius to 22 px so that my button now looks like this:
To adjust the padding of your button, click on either the up or down arrow next to padding.
When you increase the padding, you are adding space in between your button text and the border of your button.
Change the submit button label
To change the text, or label, that appears in your button, click on the button in your form. When you do, the button label field will appear on the right side of your screen. To change the label, type your new text into the label field. You will see your button update in real time as you add your new text.
Add your custom CSS
To add your own custom styling to your button, such as increasing the font size or using a different font type, you'll need to use the Custom CSS Box and Inspector located on the Style tab of your form.
Click on the Inspector button and target the Submit button by clicking it. Then add your custom css to the css box.
For example, if I wanted to change the font size to 17 and the font type to Georgia, I would do something like this:
In order to use this section, you will need to be familiar with CSS or work with someone who does. If you're not familiar with CSS and would like to learn, there are several websites available to you such as this one.