Digital Success. One and Done.TM
Experience the best of everything Caspio has to offer.
Start Your Free Trial in 30 Seconds
Learn to Build Caspio Apps for FREE
Caspio Powers Over 1 Million Applications
We're ranked the strongest of all vendors based on product strengths.
SiteRocket Labs Transforms Healthcare Delivery
Builds HIPAA-compliant apps and slashes development time by over 60%.
Low-Code Fuels National Energy Company
J-W Power meets demand for custom apps despite limited IT resources.
Build Your Own CRM Without Coding or IT Skills
Learn how to create a custom CRM application in a matter of hours.
Low-code pioneer continues to democratize application development.
Build custom applications fast, without any coding or IT skills.
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. We are ranked a Leader in Low-Code Platforms by Forrester Research.
© 2021 Caspio, Inc. Sunnyvale, California. All rights reserved.