Jetpack contact form subject fieldFor 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:

  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.

Comments

  1. says

    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. says

    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. says

    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!

    • says

      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. says

    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. says

    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.

    • says

      @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]

    • says

      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!

Leave a Reply