When using call-to-action (CTA) buttons in Squarespace, it’s often useful to scroll users directly to a form section instead of redirecting them to another page.
This guide shows how to implement a smooth scroll effect that takes users to your form when they click a CTA link.
Use Case
- CTA buttons like “Contact Us” or “Get a Quote”
- Scroll smoothly to a form section on the same page
- Improve user experience and conversions
Step 1: Set Your CTA Link
Update your button or link URL to:
#cform_scrollThis acts as a trigger for the script.
Step 2: Add the Script
Add the following script to your site:
- Go to Settings → Advanced → Code Injection
- Paste it inside the Footer section
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('[href="#cform_scroll"]').forEach(function(anchor) {
anchor.addEventListener('click', function(e) {
e.preventDefault();
var targetIdPrefix = 'form-submission-html-';
var elements = document.querySelectorAll('[id^="' + targetIdPrefix + '"]');
if (elements.length > 0) {
var targetElement = elements[0];
// Get the offset of the target element relative to the top of the viewport
var offsetTop = targetElement.getBoundingClientRect().top + window.pageYOffset;
// Subtract a buffer to ensure the top of the form section is visible
var buffer = 200; // Adjust this value as needed
window.scrollTo({
top: offsetTop - buffer,
behavior: 'smooth'
});
}
});
});
});
</script>How It Works
- Targets links with
#cform_scroll - Finds the form block using its dynamic ID prefix
- Scrolls smoothly to the form section
- Applies a top offset (buffer) for better visibility
Customization
- Adjust
buffer = 200based on your header height - Modify the ID prefix if your form structure differs
Conclusion
This simple script enhances user experience by guiding visitors directly to your form without page reloads. It’s especially useful for landing pages focused on conversions.
With smooth scrolling and proper positioning, users are more likely to complete your form.