If you’d like to guide users through a series of questions—one after the other—in a quiz or survey format, you can do so using a simple JavaScript snippet. This approach allows each question to appear on the same landing page, automatically scrolling to the next question after an answer is given.
Here is how to set it up:
1. Set Up the Landing Page
Create a new landing page in CamBuildr.
Add multiple survey blocks vertically, one per question, to create the structure of your multi-step survey. Select Quiz/Survey as the survey type.
We recomand to enable "Auto-Submit for Known People"
This ensures that users who are already known to your system (through signing up at one of the questions) won’t have to enter their contact information multiple times.
2. Insert the Auto-Scroll Script
Add a custom HTML block above your first survey block.
Paste the following JavaScript into the HTML block:
<script>
document.addEventListener("DOMContentLoaded", () => {
// Find all survey containers (these fire the 'survey-answer' event)
document.querySelectorAll('[id^="container_"]').forEach(container => {
container.addEventListener('survey-answer', () => {
setTimeout(() => {
// Scroll to the next visible survey block
const allSurveys = Array.from(document.querySelectorAll('[id^="container_"]'));
const currentIndex = allSurveys.indexOf(container);
const nextSurvey = allSurveys[currentIndex + 1];
if (nextSurvey) {
nextSurvey.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}, 1000); // delay after answering im milliseconds
});
});
});
</script>
This script listens for the survey-answer event and triggers a smooth scroll to the next survey block after a one-second delay.
3. Save and Test
Before publishing, make sure to:
Preview the page and test every survey block.
Verify that each question scrolls to the next after answering.