Form Submission, Unique Subject

Hey everyone,

I ran into a quick issue today that I am looking for a solution to, looking for any input.

I have a form, which sends an email to my gmail. By default forms have a subject line. However when two customers put in the same subject gmail treats them as a conversation. I can turn off conversations, but they're awesome.

What I would like is any way to control the subject line. It could be Contacts Us 03/11/2020 1:43:22 for all I care, it just needs to be unique.

Has anyone come across this before?

Thanks for looking!

Can you link to where your form is embedded?

https://www.transformationcounselling.com/your-first-visit

This is exactly what I'm searching for today - gmail treats all the same subject lines as one conversation and I want to create unique subject lines.

Hi, Has anyone come up with a solution to this? I can't find any element we can change in the code with for instance javascript.... this is causing a real issue!

Yes! It's kinda janky but it works and I tested it. 

In your form create a new Text Form Field (the one with the abc rectangle icon or the T icon) and title the field "Subject." Then put in a Placeholder Text of what you want the user to put in this field. Next check the box to make it a Required Field then hit Apply followed by Done. Test it. Please see my attached image for reference.

If you change the name of the Text Form Field to anything else but "Subject" it will just be another Text Form Field and nothing will happen. Adding a Description will not affect it either. However if you receive multiple forms with the same Placeholder Text filled in to the "Subject" Text Form Field, it will still be interpreted in conversation view in Gmail. Try to come up with something in either the Description/Instructions for this field or Placeholder Text to keep the "Subject" unique from other forms.

Your Gmail Subject line will then come in as "Form Submission - [form name] - [placeholder text of Subject text field]

Hope this helps. It was a headache for me too. My site was previously on the 7.0 template and my husband used some CSS/Javascript (forgive me I'm not a web dev) to generate random numbers in the Subject line to make the forms unique. However in 7.1 that feature seems to not be available anymore, or at least not that he could find/figure out.

I use a similar method as Mochi, but I use Javascript to autofill the Subject field with a Unix Timestamp giving me a unique number at the end of each subject, then I set the CSS value of the form  Subject field and it's Label to none, making it invisible to the user. The Subject field has to be the first field of the form for this to work, as it has no defining attributes, so this simply modifies the 1st field. Seems to be working so far.

PAGE HEADER CODE INJECTION

<script>
$(document).ready(function(){ 
    var timecode = Date.now();
    var subjecttxt = "#" + timecode;
  
  $('form').find("input[type=text], text").each(function()
  {
      if(!$(this).val()) { 
     $(this).attr("value", subjecttxt);
     $(this).attr("readonly", true);
     $(this).css("display","none");
        var val = subjecttxt;
        return ( val !== subjecttxt );
  }
  });
});

  $(document).ready(function(){ 
$('form').find("label[class=title]").each(function()
  {
      if(!$(this).val()) { 
     $(this).css("display","none");
        var val2 = "none";
        return ( val2 !== "none" );
  }
  });
});  
 </script>

@Ian_A Where do you set the CSS value of the subject and label fields? In the Custom CSS editor, or is that supposed to be accomplished with this script? 

I'm not able to get this to work. 

1. Added new text field and moved to the top field of the form. Set label to "Subject" (also tried leaving blank, text, etc). There is no other/duplicate field in the form labelled Subject. 
2. Copied script text into the Page Header Code Injunction under Page Settings > Advanced.

I would love to be able to use this for our form. I'm not familiar with javascript or CSS, so this is unknown territory for me. Any help is appreciated. :)

@Jenny_M The subject field is automatically created when you add a new form. You need to use that original subject field. You can't delete it and try to create your own later. 

15 hours ago, Ian_A said:

The subject field is automatically created when you add a new form. You need to use that original subject field. You can't delete it and try to create your own later. 

Actually that's not true. You can add a Text field with the label 'Subject' to a Form Block at any time and, assuming it is the only field with this label, the contents will be included in the email subject line.

@paul2009 Is correct. I thought the original subject field was different than the one you can add for some reason, but I went and tested mine and it worked just find with a new text field with a label of 'Subject'.

On 8/16/2021 at 8:49 PM, Ian_A said:

I use a similar method as Mochi, but I use Javascript to autofill the Subject field with a Unix Timestamp giving me a unique number at the end of each subject, then I set the CSS value of the form  Subject field and it's Label to none, making it invisible to the user. The Subject field has to be the first field of the form for this to work, as it has no defining attributes, so this simply modifies the 1st field. Seems to be working so far.

PAGE HEADER CODE INJECTION

<script>
$(document).ready(function(){ 
    var timecode = Date.now();
    var subjecttxt = "#" + timecode;
  
  $('form').find("input[type=text], text").each(function()
  {
      if(!$(this).val()) { 
     $(this).attr("value", subjecttxt);
     $(this).attr("readonly", true);
     $(this).css("display","none");
        var val = subjecttxt;
        return ( val !== subjecttxt );
  }
  });
});

  $(document).ready(function(){ 
$('form').find("label[class=title]").each(function()
  {
      if(!$(this).val()) { 
     $(this).css("display","none");
        var val2 = "none";
        return ( val2 !== "none" );
  }
  });
});  
 </script>

I don't suppose you have time to write a dummies guide to this? I'm basic level computer literate. Your suggestion sounds EXACTLY what I need but I have no idea how to achieve it! For now I've used Mochi's solution but if possible I'd like to use your solution so that its less reliant on the customer filling in the form correctly. Thank you!

On 8/16/2021 at 2:49 PM, Ian_A said:

I use a similar method as Mochi, but I use Javascript to autofill the Subject field with a Unix Timestamp giving me a unique number at the end of each subject, then I set the CSS value of the form  Subject field and it's Label to none, making it invisible to the user. The Subject field has to be the first field of the form for this to work, as it has no defining attributes, so this simply modifies the 1st field. Seems to be working so far.

PAGE HEADER CODE INJECTION

<script>
$(document).ready(function(){ 
    var timecode = Date.now();
    var subjecttxt = "#" + timecode;
  
  $('form').find("input[type=text], text").each(function()
  {
      if(!$(this).val()) { 
     $(this).attr("value", subjecttxt);
     $(this).attr("readonly", true);
     $(this).css("display","none");
        var val = subjecttxt;
        return ( val !== subjecttxt );
  }
  });
});

  $(document).ready(function(){ 
$('form').find("label[class=title]").each(function()
  {
      if(!$(this).val()) { 
     $(this).css("display","none");
        var val2 = "none";
        return ( val2 !== "none" );
  }
  });
});  
 </script>

Hi Ian_A,

Would you be able to help walk me through how to input this correctly? I am having the same troubles as Jenny_M and would love to get this to work!

1 hour ago, TheMissingPastry said:

Hi Ian_A,

Would you be able to help walk me through how to input this correctly? I am having the same troubles as Jenny_M and would love to get this to work!

@TheMissingPastry 

1. Put a form on the page.

2. Edit the order of the form fields to put the subject field at the very top.

3. Save your changes. 

4. Go to Page Settings > Advanced for the page with the form on it and paste all of the code from <script> to </script> into the page header code injection area. 
 

That’s it. You should see the subject field when editing the page, but not when viewing it as a user. Submit a test of your form and it should have a unique # at the end now. 

@Ian_A — thanks for this solution! I've tried implementing it, but it's not working properly. When I check the console it says "Can't find variable: $".

Here's the code in full I used:

<script>
  $(document).ready(function(){ 
    var timecode = Date.now();
    var subjecttxt = "#" + timecode;
  
  $('form').find("input[type=text], text").each(function()
  {
      if(!$(this).val()) { 
     $(this).attr("value", subjecttxt);
     $(this).attr("readonly", true);
     $(this).css("display","none");
        var val = subjecttxt;
        return ( val !== subjecttxt );
  }
  });
});

  $(document).ready(function(){ 
$('form').find("label[class=title]").each(function()
  {
      if(!$(this).val()) { 
     $(this).css("display","none");
        var val2 = "none";
        return ( val2 !== "none" );
  }
  });
});  
 </script>

Is this still working on your end? Any thoughts would be much appreciated, thank you.

On 2/12/2022 at 12:44 PM, wpj said:

it's not working properly. When I check the console it says "Can't find variable: $".

The $ not defined usually means jQuery is not installed.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

Let us know how it goes.

That worked, thank you!

This worked for me today and was a big help. Thank you Ian_A and Paul2009. I had submitted a ticket with SqSp, but they basically told me, no promises. 

On 2/12/2022 at 9:44 PM, wpj said:

@Ian_A — thanks for this solution! I've tried implementing it, but it's not working properly. When I check the console it says "Can't find variable: $".

 

Here's the code in full I used:

<script>
  $(document).ready(function(){ 
    var timecode = Date.now();
    var subjecttxt = "#" + timecode;
  
  $('form').find("input[type=text], text").each(function()
  {
      if(!$(this).val()) { 
     $(this).attr("value", subjecttxt);
     $(this).attr("readonly", true);
     $(this).css("display","none");
        var val = subjecttxt;
        return ( val !== subjecttxt );
  }
  });
});

  $(document).ready(function(){ 
$('form').find("label[class=title]").each(function()
  {
      if(!$(this).val()) { 
     $(this).css("display","none");
        var val2 = "none";
        return ( val2 !== "none" );
  }
  });
});  
 </script>

Is this still working on your end? Any thoughts would be much appreciated, thank you.

set this line line first

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

On 1/22/2022 at 7:20 PM, Ian_A said:

@TheMissingPastry 

1. Put a form on the page.

2. Edit the order of the form fields to put the subject field at the very top.

3. Save your changes. 

4. Go to Page Settings > Advanced for the page with the form on it and paste all of the code from <script> to </script> into the page header code injection area. 
 

That’s it. You should see the subject field when editing the page, but not when viewing it as a user. Submit a test of your form and it should have a unique # at the end now. 

For me it is coming in the body but not on the subject

@Ian_A, I've inserted your script and created a new form with the "Subject" as the first form element. However, the Subject line is not hidden and when I tested the form there was no unique timestamp in the email. 

Here's a short Loom to explain what I'm looking at:

https://www.loom.com/share/9178563a13f142f5b7dd9012504291f3

Hello! Has anyone gotten this to work? My gmail keeps lumping together the conversation threads together because my submission for on my website has the same subject line. I tried using the code provided above, but it's not working. I see the last person to ask this question was in July with no answer. Is there anybody out there who can help us? Much appreciated!!

Alexis

This was so helpful and I have been able to get this to work. Thanks @Ian_A. I do have a further quiry for you. As I typically reply to the client via the form generated email, I wonder if there may be an alternative code that produces the literal time stamp down to the second essentially. e.g 21 Jan 2023-14:02:39... Or possibly code that automatically copies the 'Name' input entertered by the client and populates the hidden subject with this information. This would result I feel in a cleaner subject line to reply to the client with and retain the 'conversation grouping' Gmail produces. (I have noticed that if I simply edit the subject line during reply to remove the unique number, it drops from the grouping. Hopefully this all makes sense.

Ultimately it would be I feel a very popular inclusion if @Squarespace developed and option where it simply adds the Form submission number. i.e your first form submission subject would include Contact Us Form Submission - #0001, your 301st would be Cuntact Us Form Submission - #0301 etc etc

7 hours ago, joshbespoke said:

It would be I feel a very popular inclusion if Squarespace developed an option where it simply adds the Form submission number.

Although this isn't a built-in feature, you can achieve this by setting your form to use Zapier in Storage Options. You can then use Zapier to add a value that increments with each submission, and email it to you.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks @paul2009. I will look into this and give it a try. 

Would this in turn essentially negate the need for the code injection discussed above do you think? I havent used Zapier as yet so unsure as to its functionality.

___

FYI, and future thread readers. Overnight, I did find the alternate code to change the 'timecode' portion from the random generated number to now display the literal date and time to the second of the form submission. (if it was to be a preference of anyone). (Please note I am in Australia so the code is written to display DD/MM/YYYY, a simple change of the ('en-AU' to display ('en-US' should alter this for you if required).

This is the new code including the input noted by @creedon as I required this for the function to begin working.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ 
    var timecode = new Date().toLocaleString('en-AU', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' });
    var subjecttxt = "#" + timecode;
  
  $('form').find("input[type=text], text").each(function()
  {
      if(!$(this).val()) { 
     $(this).attr("value", subjecttxt);
     $(this).attr("readonly", true);
     $(this).css("display","none");
        var val = subjecttxt;
        return ( val !== subjecttxt );
  }
  });
});

  $(document).ready(function(){ 
$('form').find("label[class=title]").each(function()
  {
      if(!$(this).val()) { 
     $(this).css("display","none");
        var val2 = "none";
        return ( val2 !== "none" );
  }
  });
});  
 </script>