Disable form submit by pressing enter

Ask the community
1

Hello Softr Community,

I’m working on a project, and I’ve created a contact form. Everything is working smoothly, but there’s one thing I’d like to change: I want to disable the form submission when users press the “Enter” key.

Ideally, I’d like to require users to click a dedicated submit button rather than allowing them to submit the form by simply hitting “Enter” on their keyboard. This can help prevent accidental submissions and improve the user experience on my website.

Does anyone know how I can achieve this on Softr? Are there any specific settings or custom code I need to implement? Any guidance or advice would be greatly appreciated.

Thank you in advance for your help!

3

I strongly feel that this should be the default behavior. Submission of a form whenever someone presses Enter is strange and leads to unwanted entries.

4

+1

5

Hey @Timo, Softr doesn’t currently have a built-in setting to disable form submit on the Enter key.

The usual workaround is adding a small custom JS snippet to intercept the Enter key and prevent the default submit action. You can do this by embedding custom code (via the Custom Code block or page-level custom code) and listening for keydown on the form inputs.

If you’re not using custom code, then unfortunately this isn’t possible yet with native Softr settings alone.

Hope that helps :+1:

6

Thx for your response. Which JS snippet would you suggest?

7

You can use a small JS snippet like this, it’s simple and works well.

Add it in a Custom Code block or page custom code:

<script>
document.addEventListener("keydown", function (e) {
  if (e.key === "Enter" && e.target.tagName !== "TEXTAREA") {
    e.preventDefault();
  }
});
</script>

This stops the Enter key from submitting the form, but still lets users press Enter inside textareas.

If you only want this for one specific form, you can target that form instead of the whole page.

8

Great, thx. Will give it a try soon.

1 Like