The Submit element displays the button used to submit the form. In a multi-page form, it also displays the Next and Back buttons for moving between pages.
Adding a Submit button
Add a Submit element where you want the button to appear.
For a multi-page form, add a Submit element to each page. On pages before the final page, it displays a Next button. On the final page, it displays the Submit button. A Back button is also displayed on pages after the first page.
By default, the buttons inherit their settings from Edit Form → Settings → Style → Buttons. Open the Submit element’s settings to override them for that element.
Settings
Basic
Label
Sets the label used to identify the element in the form builder. To change the text displayed on the button, use the button text settings.
Submit button type
Choose how the Submit button is displayed:
- Inherit uses the form’s Submit button settings.
- Default displays a button with text and an optional icon.
- Image displays an image inside the button.
- HTML displays custom HTML inside the button.
This setting is available for single-page forms and Submit elements on the final page of a multi-page form.
Submit button text
If Submit button type is set to Default, enter the text displayed on the button, such as Send inquiry.
Submit button icon
If Submit button type is set to Default, choose an icon to display beside the text.
Submit button icon position
Choose where to display the icon relative to the button text, or choose Inherit to use the form setting.
Submit button image URL
If Submit button type is set to Image, enter the image URL or click Browse to select an image.
Submit button HTML
If Submit button type is set to HTML, enter the HTML displayed inside the button. Enter only the button’s content; Quform creates the button itself.
Next button type
For Submit elements before the final page of a multi-page form, choose Inherit, Default, Image, or HTML for the Next button.
Next button text
If Next button type is set to Default, enter the text displayed on the button.
Next button icon
If Next button type is set to Default, choose an icon to display beside the text.
Next button icon position
Choose where to display the icon relative to the button text, or choose Inherit to use the form setting.
Next button image URL
If Next button type is set to Image, enter the image URL or click Browse to select an image.
Next button HTML
If Next button type is set to HTML, enter the HTML displayed inside the button.
Back button type
For Submit elements after the first page of a multi-page form, choose Inherit, Default, Image, or HTML for the Back button.
Back button text
If Back button type is set to Default, enter the text displayed on the button.
Back button icon
If Back button type is set to Default, choose an icon to display beside the text.
Back button icon position
Choose where to display the icon relative to the button text, or choose Inherit to use the form setting.
Back button image URL
If Back button type is set to Image, enter the image URL or click Browse to select an image.
Back button HTML
If Back button type is set to HTML, enter the HTML displayed inside the button.
Styles
Button style
Choose the appearance of the buttons, or Inherit to use the form setting.
Button size
Sets the padding and font size of the buttons. Choose Inherit to use the form setting.
Button width
Choose a button width, Custom, or Inherit to use the form setting.
Button custom width
If Button width is set to Custom, enter a custom width using any valid CSS width.
Custom CSS class
Add a custom CSS class to the element wrapper, or multiple classes separated by a space.
CSS styles
Add custom CSS styles to parts of the element by clicking Add a style, choosing the selector, and entering the CSS into the box.
Logic
Enable conditional logic
Enable or disable conditional logic for the element.
Logic rules
Choose whether to show or hide the element when all or any of the rules match. Click Add logic rule, then choose the element, operator, and value for each rule.
Advanced
Unique ID
The unique element identifier is displayed here. You may need this for advanced usage.
Visibility
Sets the element to be visible to Everyone, Logged in users only, or Logged out users only. Choose Admin only to exclude it from the form displayed on the website.