Add template text to the start or end of the contact form's subject

If you want to create rules or filters in the email account or help desk where your contact form submissions are sent, you might want to automatically add some standardized text to the subject line. This article provides instructions on adding some custom code to do just this.

The code will add boilerplate text of your choice to either the beginning or the end of the subject line. This text is added after a reader submits the notification, so there's no chance they can delete or change it. They never know it's there. This way, you can set up email or help desk queue rules and filters to help process or prioritize these submissions.

There are two steps in this setup:

1. Create a snippet for the code to make the change.
2. Add that snippet to Customize > Style (Custom HTML & CSS).

Refer to the sections below for step-by-step instructions.

Create your code snippet

We like to use a code snippet added to the the Custom HTML to solve this problem. To set 

1. In the left navigation, select Snippets. The Snippets library opens.
2. Select + Create New Snippet. If you're new to creating snippets, refer to Create a snippet.
3. Enter a Snippet Name. This is how the snippet will appear in the Snippets library and in snippet look-ups. For example: Contact Form Subject. The Merge Code Name will auto-generate from the Snippet Name, but you can edit it if you'd like to. 
4. Enter a Snippet Description. This will help describe what your snippet does to other authors (and may help remind you if you forget!). For example: Add "Knowledge Base Request: " to the start of all contact form submissions. Only use in Body Custom HTML template.

5.  Select the Snippet Content dropdown and select Code Editor.
   
   Sample gif showing the switch to Code Editor. Hover to play.
6. To add the text to the beginning of the subject line, copy the code below and paste it into the Code Editor:

   <script>
     //add "Knowledge Base Request: " to start of subject line
     $('.hg-contact-form-container  button[type=submit]').click(function(e){
       e.preventDefault();
       var subject = $('.hg-contact-form-container input[name=subject]').val();
       $('.hg-contact-form-container input[name=subject]').val("Knowledge Base Request: " + subject);
       $('.hg-contact-us-form form').submit();
     });
   </script>

7. To add the text to the end of the subject line, copy the code below and paste it into the Code Editor:

   <script>
     //add "Knowledge Base Request: " to end of subject line
     $('.hg-contact-form-container  button[type=submit]').click(function(e){
       e.preventDefault();
       var subject = $('.hg-contact-form-container input[name=subject]').val();
       $('.hg-contact-form-container input[name=subject]').val(subject + " - Knowledge Base Request");
       $('.hg-contact-us-form form').submit();
     });
   </script>

8. If you'd like to use text that isn't "Knowledge Base Request: ", edit the text in row 6 to match what you want. For example, here we've changed it to "Help Center question: ":

   <script>
     //add "Help Center question: " to start of subject line
     $('.hg-contact-form-container  button[type=submit]').click(function(e){
       e.preventDefault();
       var subject = $('.hg-contact-form-container input[name=subject]').val();
       $('.hg-contact-form-container input[name=subject]').val("Help Center question: " + subject);
       $('.hg-contact-us-form form').submit();
     });
   </script>

9. Select Create.
10. Copy the snippet's Merge Code Value and begin the instructions in the next section.

Add the snippet to Customize > Style

Now that you've created the code snippet, add it to your Style:

1. Go to Customize > Style (Custom HTML & CSS). The Style Settings page opens.
2. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. In the Select HTML section to edit dropdown, select Body.
4. Paste your merge code anywhere into the Body. At the bottom works well.
5. Save your changes.