Skip to main content

🖱️ Submit Button Design

What is Form Submit Button Settings?​

The "Form Submit Button Settings" in FormNX enable you to personalize/change the appearance and behavior of the submit button on your forms.

By customizing the submit button, you can create a visually appealing and user-friendly form that aligns with your brand and design preferences.

Submit Button Settings​

To personalize submit button for a form in FormNX, follow these steps:

Submit Button Settings

  1. Access Settings: Click the "Settings" tab at the top of the form builder, then click "Submit button" in the list on the left. A Preview at the top shows your button and updates as you make changes.

Text​

  1. Button text: Enter the text you want on the submit button. It usually reads "Submit", but you can change it to match your form's purpose.

  2. Text while sending: If you want to show different text while the form is being submitted, enter it here. This tells people their submission is on its way.

  3. Icon & Icon position: Optionally, choose an icon for the button and whether it sits to the left or right of the button text.

Look​

  1. Style: Choose "Filled" or "Outline". Switching style keeps the color you picked.

  2. Color: Click one of the color swatches: Dark, Light, Grey, Blue, Cyan, Green, Orange or Red. To use your own brand color, click the Custom swatch (the rainbow circle) and pick any color, or type its color code. FormNX picks dark or white text for you so the button stays easy to read.

  3. Size: Select "Large", "Medium" or "Small".

  4. Width: Choose how wide the button is. There are three options:

Fit to text:

  • The button is only as wide as its text.
  • Specify the alignment of the submit button, which can be "Left," "Right," or "Center."
  • If you enable the Save Your Progress Button, then both the Save Your Progress and Submit buttons fit their text, and alignment applies to both.

Half width:

  • The button covers 50% of the width of the form.
  • Specify the alignment of the submit button, which can be "Left," "Right," or "Center."
  • If you enable the Save Your Progress Button, then both the Save Your Progress and Submit buttons occupy 50% width each in the form, and alignment options will not work in this case.

Full width:

  • The button takes up 100% of the form width, and alignment options will not work in this case.
  • If you enable the Save Your Progress Button, then both the Save Your Progress and Submit buttons share the form width equally (50% each).
  1. Alignment: Specify the alignment of the submit button, which can be "Left," "Right," or "Center."
Matching buttons on multi-page forms

On a multi-page form, the Next button uses the same color as the submit button, and the Save Your Progress button uses an outline version of it. You don't need custom CSS to make them match.

note

Save Your Settings: Be sure to save your form.

Once configured, your form's submit button will reflect the selected style, size, color, alignment, and text. If you provided a loading text, it will be displayed during form submission.

Example Use Cases​

Professional Contact Form​

For a professional contact form on your business website, you can use the submit button settings to create a sleek and elegant button with your brand's color and logo. Ensure the button text is "Submit Inquiry" to encourage users to reach out.

Explore Contact Form Templates

Registration Form​

If you have a registration form for an event, use the submit button settings to align the button to the right, make it large and eye-catching, and add an icon representing an event calendar. You can set the button text as "Register Now."

Explore Registration Forms Templates

Feedback Survey​

When collecting feedback through a survey, maintain a clean and straightforward design by using an outlined button with a subtle color. Add a "Send Feedback" text to the button to make its purpose clear.

Explore Feedback Form Templates