Form Submission, Unique Subject

5 hours ago, joshbespoke said:

Would this in turn essentially negate the need for the code injection discussed above do you think?

Yes. Zapier can create a subject line of your choice.

On 7/3/2022 at 7:22 AM, justinbkerr said:

@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

I had this same issue, it wasn't a hidden field. @justinbkerr can you recall if you solved this issue in any way? 

Would really like to do this, but its not quite working for me. Instead of hiding the subject box, it's hiding the first name box ?

Would appreciate any guidance - Here the link, I'm going to have to put it back by the end of the day as I need it to work correctly

@paul2009

https://www.focusedlasersystems.com/contact

7 hours ago, FocusedLS said:

Would really like to do this, but its not quite working for me. Instead of hiding the subject box, it's hiding the first name box ?

When you set the order of the form fields, did you place the subject box first?

1 hour ago, paul2009 said:

When you set the order of the form fields, did you place the subject box first?

I did yes, created text box and labelled it Subject, then placed this at the top

39 minutes ago, FocusedLS said:

I did yes, created text box and labelled it Subject, then placed this at the top

It must be a Text field, not a Text Box field 🙂

On 2/19/2023 at 9:09 PM, paul2009 said:

It must be a Text field, not a Text Box field 🙂

Wow, rookie error ! Thank you, works perfectly now 🙂 

When different customers submit information trough a form on the site, they all come in one thread. 
This makes it hard to keep an overview on who we have answered and not. 
Is it possible to do something about this?

On 8/16/2021 at 1: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>

How would I get this to work if I have multiple forms on my website? Would there be a way for each form to have a unique subject line? 

Thank you so much for the help!

On 1/22/2023 at 2:49 AM, joshbespoke said:

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>

Hello ! Firstly, thank you for this @joshbespoke, its been an absolute lifesaver. I do have a question though if that's ok. Is there a way to also implement this for lightbox forms too ?

6 hours ago, FocusedLS said:

Is there a way to also implement this for lightbox forms too ?

I don't have a solution but you'd probably need a MutationObserver to get the job done. MO's aren't easy to write.

On 3/17/2023 at 11:16 PM, Peeper said:

How would I get this to work if I have multiple forms on my website? Would there be a way for each form to have a unique subject line? 

Thank you so much for the help!

This will only work on 1 form per page. 

If your forms are all on different pages, then you should be able to apply it to each page individually and just change this line to give each one a unique subject line: 

var subjecttxt = "#" + timecode;

Replace # with whatever you want the subject to be prior to the timecode/date.

Hi guys, I am trying all of the tips I read in this thread. I am working with 7.1 on www.familieshoot.nl

I have my corm in the footer. 

After adding a Text-Field and renaming it to Subject, putting it on top (with or without require), it is always visable.

When I enter in the descrition some text, the text field is hidden, but the name of this field still stays there.

It would be great if in the subject line the First/Last Name of the form was being copied so I can receive a unique email every time.

Love to hear what I am doing wrong

On 5/3/2023 at 12:03 PM, stefansegers said:

Hi guys, I am trying all of the tips I read in this thread.

Quote

Love to hear what I am doing wrong

SS has changed the way forms work recently so pretty much any code previously in this thread will be broken.

Folks. If you do write scripts to manipulate the new forms you need to be aware of the following. SS is currently loading the old forms and then on the fly rebuilding or reloading the new forms. I assume this is a temporary move to perhaps support the old and new forms at the same time or give SS time to work on other forms related backend issues. If you write code that is unaware of this situation you will probably find yourself with code that doesn't work the way you think it should.

I have no solution to the issue of this thread.

On 5/3/2023 at 11:14 PM, creedon said:

x

SS has changed the way forms work recently so pretty much any code previously in this thread will be broken.

Folks. If you do write scripts to manipulate the new forms you need to be aware of the following. SS is currently loading the old forms and then on the fly rebuilding or reloading the new forms. I assume this is a temporary move to perhaps support the old and new forms at the same time or give SS time to work on other forms related backend issues. If you write code that is unaware of this situation you will probably find yourself with code that doesn't work the way you think it should.

I have no solution to the issue of this thread.

Thanks for the update. Let's hope SS will create a solution themselves so we don't need to program it 😉

I followed @Ian_A approach with the new localized form block update in mind, the below script can work with multiple forms on the page and use the localized date format string as the unique value for the subject. The subject form field will be hidden after the form has been loaded

nit: remember to set the label and placeholder of field to Subject

cc: @stefansegers and @creedon for further discussion

Put this into website's Footer injection

<script>
/*
* @beyondspace: Unique submission subject 
* Squarespace Forum: 14-June-2023
*/
window.addEventListener("load", (event) => {
  const formBlocks = document.querySelectorAll('.sqs-block-form');

  const triggerInputChange = (inputElement, value) => {
      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype,
        "value"
      ).set;
      nativeInputValueSetter.call(inputElement, value);

      const inputEvent = new Event("input", { bubbles: true });
      inputElement.dispatchEvent(inputEvent);
  }

  formBlocks.forEach((block) => {
      const timestamp = new Date().toLocaleString(Static.SQUARESPACE_CONTEXT.website.language);
      const subjectInput = block.querySelector(`[placeholder="Subject"]`);
      if (subjectInput) {
          const subjectField = subjectInput.closest(`.form-item`);

          subjectField.hidden = true;
          triggerInputChange(subjectInput, timestamp)
      }
  })
});
</script>

The emails will be sent as

Thanks Beyondspace!

For anyone else encountering the issue this not working and needing to refresh the page (ie: The Subject text is not hidden and Unique value not set the first time the page is loaded, but works when the page is refreshed).

I had to disable Ajax Loading for it to work (Design > Site Styles > Site Loading). 

Hope there's a better way to do this. Me using a 4 year old site template may be part of the issue too (Nueva). 

On 6/14/2023 at 5:49 PM, Beyondspace said:

I followed @Ian_A approach with the new localized form block update in mind, the below script can work with multiple forms on the page and use the localized date format string as the unique value for the subject. The subject form field will be hidden after the form has been loaded

nit: remember to set the label and placeholder of field to Subject

cc: @stefansegers and @creedon for further discussion

Put this into website's Footer injection

<script>
/*
* @beyondspace: Unique submission subject 
* Squarespace Forum: 14-June-2023
*/
window.addEventListener("load", (event) => {
  const formBlocks = document.querySelectorAll('.sqs-block-form');

  const triggerInputChange = (inputElement, value) => {
      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype,
        "value"
      ).set;
      nativeInputValueSetter.call(inputElement, value);

      const inputEvent = new Event("input", { bubbles: true });
      inputElement.dispatchEvent(inputEvent);
  }

  formBlocks.forEach((block) => {
      const timestamp = new Date().toLocaleString(Static.SQUARESPACE_CONTEXT.website.language);
      const subjectInput = block.querySelector(`[placeholder="Subject"]`);
      if (subjectInput) {
          const subjectField = subjectInput.closest(`.form-item`);

          subjectField.hidden = true;
          triggerInputChange(subjectInput, timestamp)
      }
  })
});
</script>

The emails will be sent as

9 hours ago, BogMats said:

Thanks Beyondspace!

 

For anyone else encountering the issue this not working and needing to refresh the page (ie: The Subject text is not hidden and Unique value not set the first time the page is loaded, but works when the page is refreshed).

I had to disable Ajax Loading for it to work (Design > Site Styles > Site Loading). 

Hope there's a better way to do this. Me using a 4 year old site template may be part of the issue too (Nueva). 

 

 

Let me know your site URL, I may update the script to make it run on AJAX powered sites

On 4/22/2021 at 1:39 AM, Mochi said:

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.

Just in case anyone does what I did and is losing their mind trying to figure it out. It really does have to be "Subject" only, not "Subject:". At some point I added a colon after all of the field titles and unwittingly broke the function. Removed the colon just now and it works again.

On 2/19/2023 at 10:53 PM, FocusedLS said:

Would really like to do this, but its not quite working for me. Instead of hiding the subject box, it's hiding the first name box ?

Would appreciate any guidance - Here the link, I'm going to have to put it back by the end of the day as I need it to work correctly

@paul2009

https://www.focusedlasersystems.com/contact

I am not sure if you have found the solution yet but I was having the same issue and that's when this code written by @Beyondspace below worked a treat for me. Thanks @Beyondspace

On 6/14/2023 at 2:49 PM, Beyondspace said:

I followed @Ian_A approach with the new localized form block update in mind, the below script can work with multiple forms on the page and use the localized date format string as the unique value for the subject. The subject form field will be hidden after the form has been loaded

nit: remember to set the label and placeholder of field to Subject

cc: @stefansegers and @creedon for further discussion

Put this into website's Footer injection

<script>
/*
* @beyondspace: Unique submission subject 
* Squarespace Forum: 14-June-2023
*/
window.addEventListener("load", (event) => {
  const formBlocks = document.querySelectorAll('.sqs-block-form');

  const triggerInputChange = (inputElement, value) => {
      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype,
        "value"
      ).set;
      nativeInputValueSetter.call(inputElement, value);

      const inputEvent = new Event("input", { bubbles: true });
      inputElement.dispatchEvent(inputEvent);
  }

  formBlocks.forEach((block) => {
      const timestamp = new Date().toLocaleString(Static.SQUARESPACE_CONTEXT.website.language);
      const subjectInput = block.querySelector(`[placeholder="Subject"]`);
      if (subjectInput) {
          const subjectField = subjectInput.closest(`.form-item`);

          subjectField.hidden = true;
          triggerInputChange(subjectInput, timestamp)
      }
  })
});
</script>

The emails will be sent as

Thank you! This code worked on my site.

Do you have code if users enable Form Block Lightbox button?

12 minutes ago, tuanphan said:

Thank you! This code worked on my site.

Do you have code if users enable Form Block Lightbox button?

 

I'll look into it!

@Beyondspace this is incredibly clever, thanks for sharing. On my site, the form is not hiding the subject field at the top.

If anyone else is experiencing this, [after following all of the steps outlined by @Beyondspace] I was able to use Chrome Inspect to get the ID of the Subject form field and simply add it to my css to display:none.

The code that @Beyondspace created still adds a timestamp to the field and passes that through in the subject line of the submission; the css display:none helps hide it from the user.

You'll need to change the ID, of course, but it should be formatted similarly to this one:

 #text-yui_3_17_2_1_1704470272513_21535 {display:none}