DEV Community

Cover image for Email Form: Setting a Predefined Subject
ExpressionEngine for ExpressionEngine

Posted on • Originally published at u.expressionengine.com

Email Form: Setting a Predefined Subject

Sometimes you want to have control over the email “subject” text when it arrives in your inbox. Here’s one method I use.

The problem

Using a free text field for the subject text means the customer has to think of suitable wording to describe their inquiry. Apart from the extra effort required to do that (and increased cognitive load), you can often end up with some pretty obscure words and phrases.

So what if we want to make things easy for the customer and give us uniform and useful subject text at the same time?

A solution

Let’s say you have a contact form so customers can enquire about a specific product. Your product entries are stored in a channel so all the product data is available, it’s just a case of inserting them into your form.

To do this create a select field for the customer to choose the product they’re interested in. Using a channel entries tag inside the form tag you can populate the option fields with your product names/titles or other references.

Example code

Here I’m adding:

  • a custom select field for the Subject
  • standard input fields for name and email address
  • a couple of custom fields to collect information with hidden fields to enhance the email body text
{exp:email:contact_form user_recipients="no" recipients="admin@example.com" charset="utf-8"}
    {!-- subject field --}
    <p>
        <label for=“subject”>Subject</label><br>
        <select id=“subject” name=“subject”> 
        {!-- set a default value in case no option is selected --}
        <option value=“General enquiry”>Select a product</option>
        {!— channel entries tag to pull in product names to populate the options —}
        {ex:channel:entries channel=“my_product_channel” dynamic=“no”}
        <option value=“{title} enquiry”>{title}</option>
        {/exp:channel:entries}
        </select>
    </p>
    {!— set standards form fields for name and email —}
    <p>
        <label for=“name”>Name</label><br>
        <input type=“name” id=“name” name=“name” value="">
    </p>
    <p>
        <label for="from">Email address</label><br>
        <input type=“email” id="from" name="from" value="" required>
    </p>
    {!— add some custom form fields to collect information —}
    <p>
        <label for=“tel”>Telephone</label><br>
        <input type=“hidden” name=“message[]” value=“—-telephone—-“>
        <input type=“tel” id=“tel” name=“message[]” value="">
    </p>
    <p>
        <label for="message">Message</label><br>
        <input type=“hidden” name=“message[]” value=“—-message—-“>
        <textarea id="message" name="message[]” required></textarea>
    </p>
    <p>
        <button name="submit”>Submit</button>
    </p>
{/exp:email:contact_form}

Enter fullscreen mode Exit fullscreen mode

The outcome

The submitted email content might look something like this:

From: John Doe

Email: johndoe@example.com

Subject: Blue ACME widget inquiry

—telephone—

01234 567 890

—message—

Hello can you tell me if widgets are easy to clean?

Radio buttons are easier to use than a select field?

No problem, it’s just a case of tweaking the subject field to suit, here’s an example:

<label for=“s1”>Subject</label>
<ul> 
    {!— set a default value in case no option is selected —}
    <li>
        <label for=“s1”><input type=“radio” id=“s1” name=“subject” value=“General enquiry” checked> Select a product</label>
    </li>
    {!— channel entries tag to pull in product names to populate the options —}
    {ex:channel:entries channel=“my_product_channel” dynamic=“no”}
    <li>
        <label for=“s{entry_id}”><input type=“radio” id=“s{entry_id}” name=“subject” value=“{title} enquiry”>{title}</label>
    </li>
    {/exp:channel:entries}
</ul>

Enter fullscreen mode Exit fullscreen mode

--
Originally published by Rob Allen at u.expressionengine.com

Top comments (0)