Contact form
A form on any page of your site that people use to write to you. Their messages land in Messages in the admin, and admins get an alert.
What it is
A plain HTML form marked data-arc-contact-form, on any published page. The site's script, arc-site.js, sends it to the submitContactMessage function, which checks it for spam and stores it. Admins read the messages under Messages and reply from their own email client. Arc CMS sends nothing to the person who wrote, and does not add them to your audience.
The standard Contact page (/info/contact, see Standard pages) already has the form: its Show contact form switch shows it. You only write a form yourself to put one somewhere else, such as the home page or your own template.
Turn it on or off
The contact form is a switchable feature, id contact. It is on by default and needs no other feature. To turn it off, list it in src/custom/features.ts:
export const CUSTOM_FEATURES: FeatureChoice = {
off: ['contact'],
};
When it is off, the Messages menu item and page are gone, contact forms are removed from published pages, and its two functions are not deployed. Messages already received stay in Firestore. See Feature ids.
Set it up
- Deploy the functions, the Firestore rules and the indexes.
- Publish the Contact page, or add a form to any page of your site (the home page, a template or a static page):
<form data-arc-contact-form> <input name="name" placeholder="Your name"> <input name="email" type="email" required placeholder="Your email"> <textarea name="message" required placeholder="How can we help?"></textarea> <button type="submit">Send</button> </form> - Deploy the website.
Use it
The form
| Input name | Required | Longest |
|---|---|---|
name | No | 100 characters |
email | Yes, a valid address | 254 characters |
phone | No | 40 characters |
subject | No | 200 characters |
message | Yes | 5,000 characters |
Other inputs are ignored. Publishing adds a line above the submit button ("We use your details only to reply.") with a link to your privacy page: the published /info/privacy-policy, else your own static page at /p/privacy-policy, else no link. A form that already holds an element with data-contact-notice keeps its own line. After sending, the form is replaced by a thank-you; a problem shows a message in the form.
Spam checks
- A hidden input that people never see catches bots that fill every field, and so does a form sent less than three seconds after the page opened. Both are answered as if sent, and nothing is stored.
- Five messages an hour from one network address, and five from one email address. The sixth gets "You have sent several messages already".
- A message with more than three links is kept under Possible spam and raises no alert.
Read and answer messages
Under Messages, messages are in three tabs: New, Done and Possible spam. Each shows who wrote, when, and the page they sent it from. Reply opens your email client with the message quoted. Mark done, Move to new, Not spam and Delete do what they say.
Every admin gets a bell alert and an email (the admin_contact_message notification, see Notifications), at most ten an hour: beyond that, messages are still saved, without an alert.
Extend it
Style the form with your site's CSS; the thank-you is .arc-contact-sent, an error .arc-contact-error and the privacy line .arc-contact-notice. Its text can be translated through strings/{lang}.json with the contact_* keys.
What it stores
| Cloud Function | Kind | Does |
|---|---|---|
submitContactMessage | Callable, open to anyone | Checks a message and stores it |
onContactMessageCreated | Firestore trigger on ContactMessages | Alerts the admins about a new message |
One document per message in ContactMessages: name, email, phone, subject, message, page, lang, status (new, done or spam) and createdAt. Messages are kept until an admin deletes them. The hourly limits are counted in _rate_limits, as sign-in's are. See Data model.
Who can do what
Anyone can send a message through the function; nobody can write ContactMessages from a browser. Admins read messages, change their status and delete them.
Troubleshooting
| Symptom | Cause and fix |
|---|---|
| The form does nothing | The page has no arc-site.js (deploy the website and publish the page again), or submitContactMessage is not deployed. |
| The form is not on the published page | The contact feature is off, so publishing removed it. On the Contact page, check Show contact form. |
| No email about a new message | Check the notification settings for admins, and the email setup (see Email). More than ten messages in an hour send no more alerts that hour. |
| "You have sent several messages already" | Five messages an hour from one address or one email. It resets within the hour. |
| A message is not under New | Look under Possible spam: a message with more than three links goes there and raises no alert. |