Jump to content

Contact form in footer, how to identify which page the form entry was completed on?

Recommended Posts

Hi team,

I have a contact form in the footer of my website, so it appears on every page.

Each home I am selling has its own page, and the footer appears on each page. 

When a user makes an enquiry I dont have an identifier to say what page the user was on when they submitted the form. The forms are coming through fine, but I'd love to have the URL it originated from.

Any help would be awesome. Thanks.

Link to comment
1 hour ago, pkram3r said:

Hi team,

I have a contact form in the footer of my website, so it appears on every page.

Each home I am selling has its own page, and the footer appears on each page. 

When a user makes an enquiry I dont have an identifier to say what page the user was on when they submitted the form. The forms are coming through fine, but I'd love to have the URL it originated from.

Any help would be awesome. Thanks.

You can add a hidden field on the form and use javascript to collect the page's path then assign to the hidden field value, when submit the url with come along

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

⚠️ The script has been updated, kindly check the below reply for new Squarespace form blocks update on May 2023 ℹ️

1. You assign the name of the hidden field and choose edit to get its generated name for the form, in this case it is 'footer-pagepath' -> 'SQF_FOOTER_PAGEPATH' (make sure it is unique name)

2. Add this snippet into settings->advanced->code injection->footer

<script>
document.addEventListener('DOMContentLoaded', function() {
  	if (document.querySelector('[name="SQF_FOOTER_PAGEPATH"]')) {
		document.querySelector('[name="SQF_FOOTER_PAGEPATH"]').value = location.pathname;
	}
});
</script>

 

image.png

image.png

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 weeks later...
  • 1 year later...
On 4/5/2021 at 9:56 AM, tuanphan said:

@bangank36 Just want to say thank you. I helped a member with your code.

Thank you. Just used this for another friend site.

One question, how can I get Product Name?

@bangank36 Thank you again.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Hi @bangank36 Newbie coder here. I've been using this since Sept 2021 and it's worked perfectly. But in the last week or so, I noticed it stopped providing the page path. Can you help me troubleshoot why that might be? 
Is anyone else having this problem?
Thanks so much!!

Link to comment
8 hours ago, Hil said:

Hi @bangank36 Newbie coder here. I've been using this since Sept 2021 and it's worked perfectly. But in the last week or so, I noticed it stopped providing the page path. Can you help me troubleshoot why that might be? 
Is anyone else having this problem?
Thanks so much!!

There are some breaking changes in Squarespace Form block that may prevent this from working, do you mind to share your current site URL to we can check it easier

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Cross-post this comment while identifying work around for this

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...

@Hil @pkram3r

cc: @tuanphan in case you need to update your answer somewhere

I updated the code for the latest update of Squarespace form blocks, kindly replace the current code on the footer injection.

Please make sure the consistent of the hidden field name in the form block and in the custom code injection

nit: you can change the field name if you want, just remember to update the variable

 

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

    formBlocks.forEach((block) => {
        const contextElement = block.querySelector("[id*=form-context-]");
        const context = JSON.parse(contextElement.innerHTML);
        
        const hiddenField = context.formFields.filter((field) => {
            return field.key === hiddenFieldKey
        })[0];
        if (hiddenField) {
            
            const hiddenFieldIndex = context.formFields.indexOf(hiddenField);
          	const latestContext = JSON.parse(contextElement.innerHTML);
            latestContext.formFields[hiddenFieldIndex].value = location.pathname;
            contextElement.innerHTML = JSON.stringify(latestContext);
        
            Squarespace.initializeFormBlocks(Y, Y)
        }
    })
});
</script>

 

image.png

nit: I updated the snippet a little bit to make it compatible with the IP hidden field here 

 

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.