Forms
The two forms the site ships, what they check, the optional captcha, and how to connect each one to your own service.
The forms
| Form | Where | What visitors fill in | What it checks |
|---|---|---|---|
| Contact | /contact | Name, email, phone (optional), subject and message | A name of 2 to 100 characters, a valid email, a phone number made of digits and the usual signs if one is given, a subject of 5 to 200 characters and a message of 20 to 2,000 |
| Message form | The last section of the home page, over the world map | Name, email and message | A name of at least 2 characters, a valid email and a message of at least 5 |
Both show their messages in the page's language when the visitor presses the button, and the contact form then updates them as each field is corrected. The contact form marks its required fields with a red asterisk.
What happens when a visitor sends one
Nothing leaves the browser. The template has no back end, so each form is ready for yours:
- The contact form waits a moment, shows "Message Sent Successfully!" on its button for a few seconds and clears its fields.
- The message form waits a moment and shows a thank-you panel with a Send Another Message button.
Before you launch, connect each form you keep to your own service: your API, a form service or your email platform. Remove the one you do not need.
Keep secret keys on a server. Anything in the browser code, including a NEXT_PUBLIC_ value, can be read by every visitor.
The captcha
The message form on the home page can ask for a Google reCAPTCHA v2 "I'm not a robot" checkbox before it sends. It does so only when NEXT_PUBLIC_RECAPTCHA_SITE_KEY is set when the site is built: its button then reads Continue, the next step shows the checkbox, and Confirm & Send finishes. Without the key, the button reads Send Message and sends at once.
A captcha only protects a form whose server checks the answer with Google, using the secret key that comes with the site key. Set the site key once your endpoint does that. The checkbox follows the site's light or dark theme and the page's language.
Where each form is sent
Included with your purchase. Sign in to read, or open it in your download.
The file and function behind each form's submit button.
Connect a form to your endpoint
Included with your purchase. Sign in to read, or open it in your download.
A worked example that sends each form to your own endpoint, and a server route that checks the captcha.
The checks and their messages
Included with your purchase. Sign in to read, or open it in your download.
Where each form's rules and error messages are defined, and how to change them.