Sign up for updates

Get a weekly update every Sunday with our announcements, company updates and a behind-the-scenes of what our community are building.
Over 11,000 people get our updates, join us!
You're in 😍- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.
⭠ all tutorials

Simple multiple-step form with Boundless

This tutorial is available for pro members only

Request access

Setting up the styles and first page

  • Create an app starting from scratch
  • Go to the style editor by clicking Styles
  • Select the Style Guide from the Page menu, top left, to see the general appearance of your site
  • Select the Standard (Zero Margins) Theme
  • Update Body font color to #616971
  • Update Body text font size to 15px
  • Update the Page matte color to #CFE7FF
  • Change the field border to 0 0 1px 0 (creates a 1px bottom bottom border)
  • Save the style changes
  • Hide the page header and footer
  • Create a form for Questions
  • Remove the placeholder field
  • Update the Button Label, set it as the Autofocus element and add a Go To… action creating a new Record Page called “Step 1”
  • Update the column’s appearance to center the content vertically and horizontally, add a fade-in animation on load

Setting up form questions

  • Select the Step 1 Record Page from the pages dropdown
  • Add an Edit Form for Questions
  • Add text letting the user know they can press enter to continue
  • Vertically center the column and give it a fade-in animation
  • Update the placeholder field to point at a new Single Line Text Field, titled “Name”
  • Mark the Name field as Required and set to Autofocus
  • Point the Next button at a new Record Page called “Step 2”
  • With the column selected, copy it to page elements so we can easily re-use it
  • Select the Step 2 Record Page from the pages dropdown
  • Drag the copied column into the page
  • Update the field to a new Email field
  • Point the Next button at a new Record Page called “Step 3”
  • Select the Step 3 Record Page from the pages dropdown
  • Drag the copied column into the page
  • Add a new Select input to the form, setup the options, update the label and change the select style to a Vertical Radio, set Required and Autofocus
  • Point the Next button at a new Record Page called “Step 4”
  • Select the Step 4 Record Page from the pages dropdown
  • Drag the copied column into the page
  • Add a text node to the page, add the message for an incorrect answer
  • In the overlay click the “Text” label to see the variant dropdown - select “Setup Display Rules”
  • Add a rule that when the Author selection is the correct answer to display as a new “Correct Answer” variant and save the Display Rule changes
  • In the overlay click the “Text” label and select the “Correct Answer” variant and set the correct answer message
  • Remove the unused input element
  • Update the Next button to goto a new Record Page called “Step 5”
  • Select the Step 5 Record Page from the pages dropdown
  • Add a personalized thank you message for the user

We publish our app and see the site in action. We go through the flow once with a correct answer, and once with an incorrect answer. As you can see, all data the users submit will appear in the Tables view.

Thanks for checking out this demo! You can view the site made in the demo here.

The full tutorial is available for pro members only

Request access

Setting up the styles and first page

  • Create an app starting from scratch
  • Go to the style editor by clicking Styles
  • Select the Style Guide from the Page menu, top left, to see the general appearance of your site
  • Select the Standard (Zero Margins) Theme
  • Update Body font color to #616971
  • Update Body text font size to 15px
  • Update the Page matte color to #CFE7FF
  • Change the field border to 0 0 1px 0 (creates a 1px bottom bottom border)
  • Save the style changes
  • Hide the page header and footer
  • Create a form for Questions
  • Remove the placeholder field
  • Update the Button Label, set it as the Autofocus element and add a Go To… action creating a new Record Page called “Step 1”
  • Update the column’s appearance to center the content vertically and horizontally, add a fade-in animation on load

Setting up form questions

  • Select the Step 1 Record Page from the pages dropdown
  • Add an Edit Form for Questions
  • Add text letting the user know they can press enter to continue
  • Vertically center the column and give it a fade-in animation
  • Update the placeholder field to point at a new Single Line Text Field, titled “Name”
  • Mark the Name field as Required and set to Autofocus
  • Point the Next button at a new Record Page called “Step 2”
  • With the column selected, copy it to page elements so we can easily re-use it
  • Select the Step 2 Record Page from the pages dropdown
  • Drag the copied column into the page
  • Update the field to a new Email field
  • Point the Next button at a new Record Page called “Step 3”
  • Select the Step 3 Record Page from the pages dropdown
  • Drag the copied column into the page
  • Add a new Select input to the form, setup the options, update the label and change the select style to a Vertical Radio, set Required and Autofocus
  • Point the Next button at a new Record Page called “Step 4”
  • Select the Step 4 Record Page from the pages dropdown
  • Drag the copied column into the page
  • Add a text node to the page, add the message for an incorrect answer
  • In the overlay click the “Text” label to see the variant dropdown - select “Setup Display Rules”
  • Add a rule that when the Author selection is the correct answer to display as a new “Correct Answer” variant and save the Display Rule changes
  • In the overlay click the “Text” label and select the “Correct Answer” variant and set the correct answer message
  • Remove the unused input element
  • Update the Next button to goto a new Record Page called “Step 5”
  • Select the Step 5 Record Page from the pages dropdown
  • Add a personalized thank you message for the user

We publish our app and see the site in action. We go through the flow once with a correct answer, and once with an incorrect answer. As you can see, all data the users submit will appear in the Tables view.

Thanks for checking out this demo! You can view the site made in the demo here.

Added to your list!
Oops! Something went wrong while submitting the form.
Marked as complete!
Oops! Something went wrong while submitting the form.
Mark as completeSave to watch later
Take the quiz
Lesson details

Setting up the styles and first page

  • Create an app starting from scratch
  • Go to the style editor by clicking Styles
  • Select the Style Guide from the Page menu, top left, to see the general appearance of your site
  • Select the Standard (Zero Margins) Theme
  • Update Body font color to #616971
  • Update Body text font size to 15px
  • Update the Page matte color to #CFE7FF
  • Change the field border to 0 0 1px 0 (creates a 1px bottom bottom border)
  • Save the style changes
  • Hide the page header and footer
  • Create a form for Questions
  • Remove the placeholder field
  • Update the Button Label, set it as the Autofocus element and add a Go To… action creating a new Record Page called “Step 1”
  • Update the column’s appearance to center the content vertically and horizontally, add a fade-in animation on load

Setting up form questions

  • Select the Step 1 Record Page from the pages dropdown
  • Add an Edit Form for Questions
  • Add text letting the user know they can press enter to continue
  • Vertically center the column and give it a fade-in animation
  • Update the placeholder field to point at a new Single Line Text Field, titled “Name”
  • Mark the Name field as Required and set to Autofocus
  • Point the Next button at a new Record Page called “Step 2”
  • With the column selected, copy it to page elements so we can easily re-use it
  • Select the Step 2 Record Page from the pages dropdown
  • Drag the copied column into the page
  • Update the field to a new Email field
  • Point the Next button at a new Record Page called “Step 3”
  • Select the Step 3 Record Page from the pages dropdown
  • Drag the copied column into the page
  • Add a new Select input to the form, setup the options, update the label and change the select style to a Vertical Radio, set Required and Autofocus
  • Point the Next button at a new Record Page called “Step 4”
  • Select the Step 4 Record Page from the pages dropdown
  • Drag the copied column into the page
  • Add a text node to the page, add the message for an incorrect answer
  • In the overlay click the “Text” label to see the variant dropdown - select “Setup Display Rules”
  • Add a rule that when the Author selection is the correct answer to display as a new “Correct Answer” variant and save the Display Rule changes
  • In the overlay click the “Text” label and select the “Correct Answer” variant and set the correct answer message
  • Remove the unused input element
  • Update the Next button to goto a new Record Page called “Step 5”
  • Select the Step 5 Record Page from the pages dropdown
  • Add a personalized thank you message for the user

We publish our app and see the site in action. We go through the flow once with a correct answer, and once with an incorrect answer. As you can see, all data the users submit will appear in the Tables view.

Thanks for checking out this demo! You can view the site made in the demo here.

You must be a member to view the full lesson

Get started with
Makerpad today

The #1 platform for no-code education. Join over 10k others and discover what's possible.

Business

Multiple seat access, hire talent and custom training.

Learn more
Individuals

Unlimited all-access to our online bootcamps and community.

Get started
Email updates
You're in 😍- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.
Previous submissions
No items found.
Supporting details

You must be a member to view the full lesson

Get started with
Makerpad today

The #1 platform for no-code education. Join over 10k others and discover what's possible.

Business

Multiple seat access, hire talent and custom training.

Learn more
Individuals

Unlimited all-access to our online bootcamps and community.

Get started
Email updates
You're in 😍- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.
More lessons
How Cal Newport manages his inbox with Trello and Zapier
Create Interactive Content with Outgrow
Target specific pages with a chatbox using Olark
Send emails from Airtable
Monitor content distribution on Twitter
Create a Welcome Bot in Slack
Dynamically Create Webinar Pages in Webflow
Create a social content scheduling workflow
Automating Newsletter Content in Mailchimp
Build a Birthday Bot for Slack
Find and upload Instagram videos from by hashtag
Extract data from PDF: How to convert PDF files into structured data
Convert PDF bank and credit card statements to Excel
How to batch convert PDF to Excel
Convert pdf to Excel spreadsheet or Google Docs sheet
Custom Slack + Airtable Task Management Application
Create Images Automatically with Bannerbear & Zapier
🎂 Send Automated Birthday Messages to a Channel in Slack
Zapier - the basics
Approval Workflow in Coda
Send a personalized download link with YAMM
Typeform - the basics
Build a writing habit with Glide
Build a Reading Tracker in Glide
Job application tracker with Airtable
Rank blog posts in Webflow by pageviews
Logic-based lead forms in Typeform
Document automation and workflows with Documate
Automated task management in Trello
Dynamically generate Google Docs
Dynamically generate Google Slides
Weekly email digest of interesting links with Zapier
Automate + qualify your lead generation with Standard Library
Sentiment analysis of Instagram comments with Parabola
Subscription powered community like Patreon with Adalo
Referral marketing program
Save Gmail attachments to Google Drive + Airtable
Daily stand-ups or check-in bot in Slack and FlowXO
Send SMS Surveys with Twilio + Airtable on Standard Library
📖 Visit your favourite blogs & save posts for later with Shortcuts
Automatically post content to Hacker News
Monitor and save posts from Reddit
5 minute journal for everyday using Notion
To-Do template for everyday using Notion
Build a Mail Merge with Airtable, Gmail, and Standard Library.
How Superhuman Built an Engine to Find Product/Market Fit
Build a Slack / Airtable / Stripe CRM
How to create a SaaS website, CMS landing page & blog
How to automatically feed data to google sheets
Export data from MySQL into a CSV in Google Sheets
Automatically get data from Mailchimp to your CRM
Group Scheduling App
Creating an event check-in app
Enroll new users when they purchase
Fundraising CRM - Startups seeking to raise funding
👨‍👩‍👧‍👦Personal CRM - keep track of people in your life
Scheduled summary of Stripe charges in Slack
Automated digest of Pocket activity
Automated weekly/hourly email digest
Automated transcription from a Dropbox file

If you'd like this template, message @bentossell on Slack with your email for the account to send this template.

Ready to get started?

Join the community and start turning your ideas into solutions