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 customising it to match your brand's look and tone will make it more effective. Here's how.

Customising The Button

The button element is added automatically when you create a Form. To start customising it, simply click the element to open its settings.

Themes

Use the Select Themes option to apply premade templates and recolour your submission button.

Content

Enter the button text first, 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 enabled, 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 customise your button's size, disable the Full Width option, then enter your desired width.

Aligment

Select how you want the button to be aligned in the form in this section.

Colors & Background

  1. Background Color: Change the background colour of your button with this option.
  2. Text Color: You can adjust the text colour in the button here. For example, the "Click to Sign Up" text.
  3. Sub Text Color: When you add a sub-text to your button, you can only adjust the colour here.

Border

  1. Width: Increasing the border width makes the border thicker.
  2. Radius: Adjusting the radius curves the edges of the border; the higher the number, the more curved it becomes.
  3. Color: To change the colour of the border, click on this colour icon.
  4. Style: There are three different styles for your border: solid, dashed, or dotted.

Padding

Adjust the space around your button in relation to other elements.

  • Padding: These four toggle bars move the content left, right, up, or down, depending on which toggle bar you click.
  • 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 stand out by setting these details:

  1. Color: This defines the colour of your element's shadow.
  2. Horizontal: This defines how far to the right the shadow will spread.
  3. Vertical: This defines how far down the shadow will spread.
  4. Blur: Use this option to soften the shadow.
  5. Spread: Use this option to expand your shadow across all edges.

Save your form to apply the changes and you're done. With these steps, you can customise a button that looks great and encourages action.