A contact form without a backend

Receiving messages from a form on a static site takes a handler: it stores the message, sends email and filters spam. You either run one yourself or use a third-party service.

The fix is the built-in form receiver: the form posts to a service address on your own domain, the message is kept in the panel and emailed, and a script next to the form filters out bots.

What you get: a form in your site’s style; messages arrive by email and are kept in Messages; spam is filtered without a captcha for people. You need: a published static site with us. Time: 15 minutes.

1. Add the form to your HTML

Point action at /webshieldpro/forms/<name>, where you pick the name, and include the script next to it:

<form action="/webshieldpro/forms/contact" method="post">
  <p><label>Name<br><input name="name" required></label></p>
  <p><label>Phone or email<br><input name="contact" required></label></p>
  <p><label>What do you need<br><textarea name="message" rows="5"></textarea></label></p>
  <p><button type="submit">Send request</button></p>
</form>
<script src="/webshieldpro/forms.js" defer></script>

Fields, labels and classes are yours — we do not look at them. Three things matter: action, method="post" and the script.

The script is required. Without forms.js messages are not accepted: it is what proves the form was filled in a browser, and it shows the reply in place of the form. Include it on every page that has a form.

A form name is lowercase Latin letters, digits, - and _. If you have several forms — a request, a newsletter, a review — give them different names: messages are kept apart, and each form gets its own list of recipients.

2. Publish the site

Upload the changed files and click Publish as usual. On publishing we find the form in the HTML ourselves and add it to the site card under Forms — with the status active and the field list taken from the markup.

Don’t see the form in the list? Then JavaScript builds it (React, Vue and other single-page apps), and it is not in the published HTML. Click Add form and enter the same name as in the address.

3. Choose who gets the emails

Expand the form under Forms, section Email recipients. Your account address is already there. Add a manager’s mailbox or a shared sales@ — it receives an email with a confirmation link. Until the address is confirmed, messages are not sent to it: that way the form cannot be turned into a mailing to other people’s inboxes.

There is no mail to set up: we send the emails from our own address, and your domain’s SPF and DKIM are not involved.

4. Decide what the visitor sees

By default the form turns into “Thank you! Your message has been sent.” styled by your site. You can replace the text or the page with your own:

<!-- your own text -->
<form action="/webshieldpro/forms/contact" method="post"
      data-success="Got it! We'll call you back within a business day.">

Your own thank-you page — say, for an analytics goal — is set in the panel: publish /thanks/ on the site and enter that path in the form’s Page after sending field. Other options, including your own block instead of the form, are in the reference Forms on a static site.

5. If you need files

A CV, photos, a brief — add a file field and enctype:

<form action="/webshieldpro/forms/contact" method="post" enctype="multipart/form-data">
  <!-- … fields … -->
  <p><label>Files<br><input name="attachment" type="file" multiple></label></p>
  <p><button type="submit">Send</button></p>
</form>

Up to 5 files and 25 MB per message. Executables and documents with macros are not accepted. Attachments can be downloaded only from the panel.

Check

1. Open the published page and submit the form. A success message should replace it.
2. In the panel open Messages — the message is there, with the site and form name.
3. The email reaches the confirmed addresses. The panel shows next to each message whether it was emailed.

When something is off

Symptom	Cause and fix
After sending, the page asks to enable JavaScript	forms.js is missing from the page or failed to load. Check <script src="/webshieldpro/forms.js" defer>.
The message is in the panel, the email is not	The recipient has not confirmed the address yet — status waiting for confirmation. Or the form is an unknown form: click Accept form.
A test message landed in Spam	Mark it Not spam. In that case the visitor sees a refusal rather than “Thank you”, so a real person learns about the problem instead of waiting for a reply.
A form with a file is rejected	The file exceeds the limit or is an executable. Check its size and format.
A field arrived in a separate Fields outside the list block	It is not in the form’s Allowed fields — typical for forms added by hand. Add the field to the list.

What next

• Forms on a static site — sending with fetch, your own reply blocks, limits and retention.
• The site updates itself after git push — so form changes roll out on their own.
• The form lives on your own server? It has Form protection.