Submit button

Overview

The Submit button block is a form-specific button used to submit form data.
Unlike the regular Button block, this block renders a native HTML <button type="submit">, making it suitable for contact forms, newsletter forms, and other input-based interactions.

This block is ideal for:

• Contact forms

• Newsletter signup forms

• Custom forms built with theme blocks

• Any layout that requires a real submit action

---

Where to use this block

You should use the Submit button block inside form-related sections or blocks, such as:

• Contact form sections

• Newsletter or email signup forms

• Custom form layouts that require submission

⚠️ Important
This block should only be used where a <form> element exists.
Using it outside a form will not trigger any submission.

---

How to add this block

1. Open the Theme Editor

2. Navigate to a section or block that contains a form

3. Click Add block

4. Select Submit button

5. Customize the label, size, and style

---

How it works

The Submit button block outputs a native submit button:

• Uses <button type="submit">

• Triggers the parent form’s submit action

• Inherits theme button styles for visual consistency

This ensures proper accessibility, keyboard support, and browser-native form behavior.

---

Button label

Label

Controls the text displayed inside the button.

Examples:

• Submit

• Send message

• Subscribe

• Join now

---

Button style

Style

Choose the visual appearance of the submit button:

• Primary
  Emphasized style for main actions

• Secondary
  Outlined or less prominent style

Use Primary for the main form action.

---

Font size scale

Controls the text size inside the button relative to the theme’s base size.

• 100% = default size

• Increase for emphasis

• Decrease for compact layouts

---

Button size

Controls the overall padding and height of the button:

• Small

• Medium

• Normal

• Large

Larger sizes are recommended for mobile and important actions.

---

Text wrapping

Wrap text in button

• Disabled: button text stays on one line

• Enabled: long labels can wrap to multiple lines

Enable this if you use longer button labels.

---

Accessibility & behavior

• Uses native submit behavior

• Works with keyboard (Enter key)

• Screen-reader friendly

• Inherits focus and hover styles from the theme

---

Tips for best results

• Use concise, action-oriented labels

• Keep only one primary submit button per form

• Use larger button sizes on mobile forms

• Place the submit button at the end of the form

• Avoid using regular Button blocks for form submission

---

Common mistakes

Button does nothing when clicked
→ Make sure it’s placed inside a form

Form submits but styling looks off
→ Check size and font scale settings

Multiple submit buttons in one form
→ Can confuse users; keep one main action

---

Differences vs Button block

Feature	Submit button	Button
Submits form	✅ Yes	❌ No
Uses <button type="submit">	✅	❌
Links to URL	❌	✅
For CTAs	❌	✅
For forms	✅	❌

---

Common use cases

• Contact form submit

• Newsletter signup

• Custom inquiry forms

• Feedback forms

---

Limitations

• Cannot link to URLs

• Must be used inside a form

• Styling options are intentionally limited for consistency

---

Need help?

If the Submit button isn’t working:

• Confirm it’s placed inside a form

• Check that the form itself is configured correctly

• Preview and test submission behavior on desktop and mobile