The Caspio Low-Code Platform
All the Tools and Support You Need
Unlimited Users With Every Plan
Part 2 will teach you how to build a multi-step form where you can divvy up information into multiple steps, preventing the end-user from being overwhelmed.
After logging into your Caspio account, click the New App link on top and choose how you want to set up a new application:
Click the second option to build your application from scratch.
You’ll now be prompted to name your app. While you can have your own naming conventions, type in MultiStep Form for this tutorial and click Finish. You’ll then see your application listed on your Home page.
Click the app’s Open link to access its App Overview, which contains all the different objects you’ll need to construct your multi-step form.
The most important thing you should build first is your database table.
Tables are the foundation or backbone of any app that you develop. Begin by clicking the Tables object on the left-hand panel.
TABLE 1: uvg_patient_info
Click the New Table link on top to start building a database for your patient intake form, then list the following fields with their corresponding DataType:
Take note of the following with regards to the data types used:
Once you’re done inputting all your fields and modifying all your data types: click Save on top, name your table uvg_patient_info, then click Finish. Your very first table should now be listed.
Opening it at this point will show you that it’s empty since it was made from scratch.
In order to populate your table with information, you’ll need to create a submission form for your end-users. Go to DataPages on the left-hand panel and click the New DataPage link on top. This will launch Caspio’s point-and-click DataPage wizard.
From here, Caspio’s simple and intuitive process will guide you through creating your app interfaces.
DATAPAGE 1: Patient Intake Form Part 1
Wizard Step 1 – DataPage Type
Click Next to continue.
Wizard Step 2 – DataPage Data Source
Under DataPage Properties, configure the following fields:
Wizard Step 3 – Select Fields
Since this is going to be page one of your multi-step form, include only the following Available Fields to your Selected Fields by clicking “>”:
Wizard Step 4 – Configure Fields
When you’re done, make the following changes under DataPage Elements to create multiple columns, dropdowns and placeholders:
Then go to the Advanced tab:
Click Preview to see how the fields are aligned.
Click Preview to check your BMI calculation. Input values for Height and Weight, then observe how the calculated result exceeds two decimal points. Do the following to resolve this:
Lastly, you’ll need to add a simple heading. Follow the steps below:
Wizard Step 4 – Destination and Messaging
Instead of seeing a confirmation message after submitting the first page of your form, you’ll want to redirect your user to the second page. Follow the steps below:
Click Finish to save your work.
DATAPAGE 2: Patient Intake Form Part 2
You’ll now be building the second page of your sample form.
Wizard Step 3 – Record Identification
For your Parameter name, input [@InsertRecordPatient_ID]. This will allow the form to receive the parameter submitted from DATAPAGE 1.
Wizard Step 4 – Select Fields
Include the following Available Fields to your Selected Fields:
Wizard Step 5 – Configure Fields
Make the following changes under DataPage Elements:
All you need to do now is deploy both your forms to your HTML pages.
DEPLOYMENT 1: form_2.html
Caspio has different methods of deploying your database form to your end-users. Follow these steps to deploy using the Embed method:
DEPLOYMENT 2: form_2_p_2.html
Follow the same procedure of your first deployment, but paste the generated embed code to your second html page (form_2_p_2.html). When you’re done, test a sample submission with both forms. The first and second pages should both update the same row within your database.
Wait for your default confirmation message to appear upon clicking Update, then verify if the information was stored correctly in your uvg_patient_info table.
In the next video, we’ll talk about relational forms and how you can establish one-to-many relationships as you fill them out.
Share this post:
Caspio is the world’s leading cloud platform for building online database applications without coding. Start a free trial today and experience the power of no-code.
© 2023 Caspio, Inc. Sunnyvale, California. All rights reserved.