Tutorials
/
📝 Simple multiple-step form with Boundless
Get updated on new tutorials
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

📝 Simple multiple-step form with Boundless

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

Access all tutorials & the community today and lock-in your price for life.
Get updated on new tutorials
Share Makerpad via Twitter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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