When your visitors submit a form on Squarespace, their submissions usually group under the same conversation thread in Gmail. While you can turn off conversation view in Gmail, this might not always be the best solution. We've got an alternative for you! Together with Chris Schwartz-Edmisten, we've developed a solution that assigns unique identifiers to each Squarespace form submission, ensuring they appear as separate conversations in your inbox, making them easier to follow.

Let's begin with an explanation on how to effectively use the custom code. You can locate the script at the end of this post.

Invidual Squarespace form submission on same conversation — Invidual submissions on same conversation

How to create Squarespace form submission Subject

Squarespace form blocks have a special reserved label for the text field called "Subject." When you name a text field "Subject," it will be included in the email subject line.

Here's how to set it up:

Open your page editor and create a new form block.
Click "Edit Form Fields."
Click "Add Field" and select a Text field.
Edit the Text field and set the label to "Subject."

That's it! You now have a subject field for your email submissions.

How to create unique identifier for the Subject

Using timestamp

As explained above, the subject will be included in the email subject. If different users submit the same subject or your forms don’t have the Subject field at all, Gmail may group these emails together, which might not be desirable

To fix this, you can insert some JavaScript code to keep the Subject line hidden and modify its value dynamically. Ideally, you can insert a timestamp. There’s a more flexible approach using merge tags, we will discuss below

Step 1

First, create the Subject text field following the steps above.

Step 2

In the Subject text field, add a placeholder attribute and name it "Subject." This helps the code identify the subject line and effectively insert the timestamp and hide the subject.

Add Subject placeholder on form blocks — Add *Subject* placeholder on form blocks

Once the form is set up correctly, user submissions will be separated into individual conversations: this screenshot below is captured from my inbox, where Form Submission is generated by Squarespace, Contact Us is the form name, and you can see the submissions are seperated by the timestamp

Using merge tags

Merge tags are special identifiers set dynamically at runtime. They allow you to tweak the subject line more flexibly. Supported merge tags include:

{timestamp}: Replaces this with a timestamp.
{pageTitle}: The title of the page where the submission is made, useful for distinguishing submissions from form submissions on footer
{pagePath}: The URL of the page where the submission is made.

In order to use these merge tags, add them behind the word Subject in your Subject text field placeholder, you can use one of them or combine them together.

When the code runs, it will remove the word "Subject" from the value, replace all the merge tags with their respective dynamic values, and keep any other text as-is. If there are no merge tags available, the code will automatically insert the timestamp instead.

For example, when you put this into the Subject field Subject from {pagetitle} on {timestamp} the submission will be display in your inbox like below, with seperated conversation of course

Working in Lightbox Form

Special thanks to Chris.SE from schwartz-edmisten.com for implementing the functionality that enables the form to operate in lightbox mode! Additionally, it's crucial to note that hidden attributes are overridden, necessitating the explicit use of inline style attributes to hide the subject field.

As Chris explained:

“I incorporated a mutation observer to trigger the function whenever a lightbox form is opened. I also added a line to set the form field to display: none; This adjustment ensures that the new form styling, which defaults hidden fields to display as grid, does not interfere.”

— Chris Schwartz-Edmisten

Takeaway

This solution requires your form blocks to include a Subject field. The field will be hidden as it modifies the subject line, preventing visitors from adding their own subjects.
Consider creating a separate field named like "Topic" to allow visitors to provide a brief description of their intention.
This solution is compatible with the latest Squarespace localized form blocks and forms in lightbox mode.

The code

To let the solution to work, follow these steps

Copy the code snippet below
Paste them in your Footer code injection
Save the change and follow the Subject line instructions above to make your form submission unique

<!-- sqs:unique-form-submission -->
<script>
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:!0});inputElement.dispatchEvent(inputEvent)}
const updateFormSubjects=(blocks)=>{blocks.forEach((block)=>{const timestamp=new Date().toLocaleString(Static.SQUARESPACE_CONTEXT.website.language);const pageTitle=document.title||"";const pagePath=window.location.pathname||"";const subjectInput=block.querySelector(`[placeholder^="Subject"]`);if(subjectInput){const subjectField=subjectInput.closest(`.form-item`);subjectField.hidden=!0;subjectField.style.display='none';let subjectTemplate=subjectInput.placeholder.replace('Subject','').trim()||"";let subjectValue=subjectTemplate;if(subjectTemplate.includes("{timestamp}")){subjectValue=subjectValue.replace("{timestamp}",timestamp)}
if(subjectTemplate.includes("{pagetitle}")){subjectValue=subjectValue.replace("{pagetitle}",pageTitle)}
if(subjectTemplate.includes("{pagepath}")){subjectValue=subjectValue.replace("{pagepath}",pagePath)}
if(!subjectTemplate.includes("{timestamp}")&&!subjectTemplate.includes("{pagetitle}")&&!subjectTemplate.includes("{pagepath}")){subjectValue=timestamp}
triggerInputChange(subjectInput,subjectValue)}})};updateFormSubjects(formBlocks);const lightboxObserver=new MutationObserver((mutationsList)=>{for(const mutation of mutationsList){if(mutation.type==='attributes'&&mutation.attributeName==='hidden'){const lightbox=mutation.target;if(!lightbox.hasAttribute('hidden')){const lightboxForms=lightbox.querySelectorAll('.sqs-block-form');updateFormSubjects(lightboxForms)}}}});const lightboxElements=document.querySelectorAll('.sqs-modal-lightbox');lightboxElements.forEach((lightbox)=>{lightboxObserver.observe(lightbox,{attributes:!0})})})
</script>
<!-- /sqs:unique-form-submission -->

Conclusion

This approach ensures that your email submissions are well-organized, easily identifiable, and maintain separate conversations, thereby enhancing your email management experience.

Bonus

Are you interested in creating a datepicker for your form blocks and custom product forms? We've got you covered with our Squarespace plugin: Squarespace Datepicker.

How to create unique subject for Squarespace form submission

How to create Squarespace form submission Subject