How do I customize my form's submit button?

In this document, we'll show you how to:

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
  • Padding


To modify any of the above elements click on the “Style” tab of your form located on the right of your screen.

form_style_tab.png

You will then see a section called “Button.”

Button_section.png

Button color:

To change the button color, enter your Hex color code or click on the color picker to select your color in the Background field:

background_color_2.png

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:

Text_color.png

Button border:

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.

button_border.png

Button shape:

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.

corner_radius.png

For example, I increased my corner radius to 22 px so that my button now looks like this:
Rounded_button.png

Padding:

To adjust the padding of your button, click on either the up or down arrow next to padding

padding.png

When you increase the padding, you are adding space in between your button text and the border of your button.

padding_gif_2.gif

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.

button_label.gif

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.

CSS_box.png

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:

Custom_css_gif.gif

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.

Have more questions? Submit a request