Forms and frontend interfaces

How forms work

Forms validate in the browser, display an error summary, show loading and success states, prevent repeated clicks during the demonstration, and include a honeypot on longer sales forms. By default, forms.js cancels submission and sends nothing.

Netlify Forms

1. Remove or adapt the demonstration submit handler for the chosen form.
2. Add data-netlify="true" and a unique name to the form.
3. Ensure every submitted input has a name.
4. Add a hidden form-name field if required by the current Netlify workflow.
5. Deploy and test using non-sensitive sample data.

<form name="demo-request" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="demo-request">
  ...
</form>

Formspree

Create your own endpoint, add it as the form’s action, set method="POST", and modify the demonstration JavaScript so it allows or performs the submission. Never ship another buyer’s endpoint.

<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">

Custom backend endpoint

Set your endpoint in config.js or on each form. Implement server-side validation, rate limiting, spam protection, consent logging, secure transport and a privacy policy that reflects actual handling. Client-side validation is only a usability layer.

CRM webhook placeholder

Do not put private CRM webhooks in public JavaScript. Send the browser request to your own protected backend or serverless function, validate it there, then forward only approved fields to the CRM.

Authentication interfaces

Login, registration, recovery, reset, verification and invitation pages demonstrate visual states only. They intentionally store no password and create no account. Connect them only to a reviewed authentication service or custom backend that handles sessions, password hashing, verification, abuse prevention and secure recovery.

Request-demo and contact-sales fields

The detailed forms contain name, work email, company, company size, role, region, product interest, meeting period, message and consent. Keep accessible labels and update the consent text to match actual processing.

Testing form states

1. Submit an empty form and confirm the summary receives focus.
2. Enter an invalid email and confirm the field is marked invalid.
3. Complete required fields and confirm the loading button is temporarily disabled.
4. Confirm the success message explicitly says no data was sent while in demo mode.
5. Test keyboard-only input and browser autofill.