Jump to content

Form Submission, Unique Subject

Recommended Posts

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!

Link to comment
  • 10 months later...
  • 2 months later...

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.

Screen Shot 2021-04-21 at 10.17.08 PM.png

Edited by Mochi
Link to comment
  • 3 months later...

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>

Edited by Ian_A
Missed 1 line
Link to comment
  • 2 weeks later...

@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. :)

Link to comment
  • 3 months 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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 4 weeks later...
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!

Link to comment
  • 3 weeks later...
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!

Link to comment
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. 

Link to comment
  • 3 weeks later...

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

Link to comment
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.6.1/jquery.min.js"></script>

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 4 weeks later...
  • 5 weeks later...
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>

 

Link to comment
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

Link to comment
  • 2 months later...
  • 3 months later...

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

Link to comment
  • 2 months later...

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

Link to comment
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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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>

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.