Add a Subject Field to a Jetpack Contact Form

For simple contact forms, I've been using the contact form in Jetpack rather than Contact Form 7, which is my go-to contact form plugin. One thing I missed was having a subject field in the form. I wanted a visitor to be able to type the subject of their message, and have that be the subject line of the resulting email. Here's how to do that:

Note: This page contains affiliate links. Please see Affiliate Disclosure.

  1. Edit your Jetpack contact form.
  2. Add a new field with Label "Subject" and Field type of Text.
  3. Choose whether the field is required or not.
  4. Save the field and insert the form.
  5. Within the contact-form shortcode, find the field you created. Change the type='text' to type='subject'.

It should look like [contact-field label='Subject' type='subject' /].

It seems the field must have placeholder/default text. By default, Jetpack will use the name of your page. You can manually set the placeholder/default text by adding default='Subject' to the subject field in the contact form shortcode, where "Subject" is the placeholder/default text. I use an empty string so that the subject field starts blank and the user must fill it:

[contact-field label='Subject' type='subject' default=''/]

Here's my complete contact form shortcode:

[[contact-form subject='Subject'][contact-field label='Name' type='name' required='1'/][contact-field label='Email' type='email' required='1'/][contact-field label='Website' type='url'/][contact-field label='Subject' type='subject' default='' required='1'/][contact-field label='Message' type='textarea' required='1'/][/contact-form]]

Thanks to Tim Moore for showing me how to do this in the WordPress.org forums.

Jetpack contact form subject field

Does Your WordPress Site Need Maintenance?

It's good that you want your web forms to work well. But are you staying on top of WordPress updates, backups, and security? We can help your website run smoothly—and safely. Sign up for your WordPress Maintenance Plan today.

Filed Under: 
Tagged With: ,

Want tips to rocket-boost your website?

Simply sign up.

18 comments on “Add a Subject Field to a Jetpack Contact Form”

  1. Nice! I'd be curious to see how much you can extend it. A common request is to have a drop-down of contacts or subjects that send the form to different email addresses based on what is selected.

  2. I've been frustrated by this limitation of the Jetpack Contact Form UI for a while now. This solution works wonderfully.

    Thanks for summarizing all of this. You rock!

  3. Hey Chad, the default no longer works, apparently. Here's my form: http://reikirays.com/contact/ and here's my shortcode:

    [contact-form][contact-field label='Your Name' type='name' required='1'/][contact-field label='Your Email' type='email' required='1'/][contact-field label='Subject' type='subject' default='subj' required='1'/][contact-field label='Your Website(s) (if applicable)' type='url'/][contact-field label='Comment' type='textarea' required='1'/][/contact-form]

    Per my understanding, the subject should be pre-populated with 'subj', but as you can see, it's not. Do you have any idea what I'm doing wrong? Thanks!

    1. Try making the first part of the form [contact-form subject='Subject']. I just tested on my site, and the code in this post still works. Let me know how it goes.

    1. Ann Marie, the Jetpack contact form automatically sets the reply-to address to the email address entered by the submitter. The from address is usually the default wordpress@domain address, but the reply-to should be the submitter's address.

  4. Great solution Chad. I don't suppose you might know how to concatenate the subject, so that the emails are prefixed with, e.g. Contact form: ? I know, some people are never satisfied 😉 just curious if this is possible. Thanks!

  5. Great tip. Did you know you can publish the code in WordPress posts and Pages using HTML character entities for square brackets, or use a Plugin to display code with a syntax highlighter. I'd like to use this tutorial for my students, but the changing of the curly brackets to square is a pain and confusing.

    @Pavel: To change the prefix of the emails in Jetpack Contact Forms, look for the tab that says Email notification right next to Form Builder on the Form screen and under Enter your email addrdess for forwarding email to an address other than the default site address, you should see What should the subject line be? This changes the email prefix. The shortcode is:

    [contact-form subject='Hey This is a contact message from the site']

    Hope that helps.

    1. @Lorelle - thanks! That works great - e.g.

      [contact-form to='[email protected]' subject='Pavel's site: {Name} wants to {I%26#039;d like to}'][contact-field label='I%26#039;d like to' type='radio' options='Book an appointment,Ask a question'/][contact-field label='Name' type='name' required='1'/][contact-field label='Email' type='email' required='1'/][contact-field label='Telephone' type='text'/][contact-field label='Comment' type='textarea' required='1'/][/contact-form]

    2. Lorelle, thanks for helping Pavel. Per your request, I have converted this post to square brackets. HTML character entities didn't work, but using double brackets to open and close the shortcode did.

      P.S., you were one of the first WordPress experts I found when I started dabbling in WordPress in 2009. It's great to get a comment from you!

Ready to Blast Off?

Let's talk.

Contact OptimWise
crossmenuarrow-right