SilentForms

Email subject

Set the subject line of the email you receive for each form submission with a hidden subject field, fixed or built from the form.

Every submission arrives as an email, and the subject line is the first thing you see of it. By default it is generic. Add a subject field to the form and you choose what it says, which makes submissions easier to sort, search and filter.

The default subject#

Without a subject field, the email is titled "New form submission from" followed by the site the form was posted from, for example "New form submission from www.example.com". The site comes from the browser's Referer header. When there is none (some privacy settings strip it, and curl or server code never sends one), the subject is just "New form submission".

That is fine for one form on one site. Once you have a contact form, a quote request and a newsletter sign-up, a custom subject saves you opening each email to find out what it is.

A default subject in the dashboard#

To set a subject without touching your HTML, sign in, open the form and fill in Default subject under Email. It is used for every submission that does not send a subject field of its own; a subject sent by the form always wins.

A fixed subject#

Add a hidden input named subject:

<form action="https://silentforms.com/api/submit" method="POST">
  <input type="hidden" name="accessKey" value="YOUR_ACCESS_KEY_HERE">
  <input type="hidden" name="subject" value="New quote request">

  <label for="name">Name</label>
  <input id="name" type="text" name="name" required>

  <label for="email">Email</label>
  <input id="email" type="email" name="email" required>

  <label for="message">What do you need?</label>
  <textarea id="message" name="message" required></textarea>

  <input type="checkbox" name="botcheck" style="display: none;" tabindex="-1" autocomplete="off">
  <button type="submit">Request a quote</button>
</form>

_subject works too, so forms written for Formspree or Web3Forms keep their subjects unchanged. The field is used for the subject only: it does not appear again in the body of the email, in webhooks or in the dashboard.

One subject per page#

If the same form markup is reused across pages (a footer include, a component, a shortcode), set the subject from the page rather than hard-coding it. In a template language that is just a variable:

<input type="hidden" name="subject" value="Enquiry from {{ page.url }}">

Without a template, a line of script can fill it in from the page title when the page loads:

<input type="hidden" name="subject" id="form-subject" value="Website enquiry">
<script>
  document.getElementById('form-subject').value = 'Enquiry: ' + document.title;
</script>

The value in the markup stays as a fallback for visitors without JavaScript.

A subject built from what the visitor typed#

To see the visitor's name or chosen topic in your inbox list, build the subject when the form is submitted. For a plain HTML form, update the hidden field in a submit listener and let the browser carry on with the normal post:

<form id="contact" action="https://silentforms.com/api/submit" method="POST">
  <input type="hidden" name="accessKey" value="YOUR_ACCESS_KEY_HERE">
  <input type="hidden" name="subject" value="New message from the website">

  <label for="name">Name</label>
  <input id="name" type="text" name="name" required>

  <label for="topic">Topic</label>
  <select id="topic" name="topic">
    <option>General question</option>
    <option>Support</option>
    <option>Partnership</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <input type="checkbox" name="botcheck" style="display: none;" tabindex="-1" autocomplete="off">
  <button type="submit">Send</button>
</form>

<script>
  document.getElementById('contact').addEventListener('submit', function () {
    var form = this;
    form.elements.subject.value = form.elements.topic.value + ' from ' + form.elements.name.value;
  });
</script>

This produces subjects such as "Support from Jane Doe". The listener does not call preventDefault, so the form still posts normally.

If you submit with fetch, set the subject on the data object instead:

const data = Object.fromEntries(new FormData(form));
data.subject = `${data.topic} from ${data.name}`;

A visible subject field#

You can also let visitors write the subject themselves with a visible <input name="subject">. Keep in mind that it is then used only as the email subject. If you also want it listed in the body, name it something else (for example topic) and build the subject from it as shown above.

Limits#

  • Line breaks are replaced with spaces, so a subject cannot inject extra email headers.
  • The subject is cut at 200 characters.
  • An empty subject falls back to the default subject.

Subjects that start the same way (for example "[Quotes] ...") are the easiest to filter into a folder or label in any mail app.

Next steps#