Summarized Video Transcript

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:

  1. By importing your existing data
  2. With a blank app

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.

Creating Your Database Tables

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:

  1. Patient_ID – Select Random_ID as the DataType.
  2. Patient_Name – Select Text (255) as the DataType.
  3. Phone – Select Text (255) as the DataType.
  4. Age – Select Text (255) as the DataType.
  5. Gender – Select Text (255) as the DataType.
  6. Height_feet – Select Number as the DataType.
  7. Height_inches – Select Number as the DataType.
  8. Weight – Select Number as the DataType.
  9. BMI – Select Number as the DataType.
  10. DOB – Select Date/Time as the DataType.
  11. Place_of_birth – Select Text (255) as the DataType.
  12. SSN – Select Text (255) as the DataType.
  13. Occupation – Select Text (255) as the DataType.
  14. Emergency_notify – Select Text (255) as the DataType.
  15. Referred_by – Select Text (255) as the DataType.
  16. Family_physician – Select Text (255) as the DataType.
  17. Insurance_carrier – Select Text (255) as the DataType.
  18. Policy_number – Select Text (255) as the DataType.
  19. Family_medical_history – Select List – String as the DataType, then input the following Options on the right-hand panel:
    • Cancer
    • Anxiety
    • Seizures
    • Stroke
    • Heart Attack
    • Palpitations
    • Kidney Stones
  20. Exercise – Select Text (64000) as the DataType.
  21. Dietary_considerations – Select Text (64000) as the DataType.
  22. Habitual_consumptions – Select List – String as the DataType, then input the following Options on the right-hand panel:
    • Alcohol
    • Cigarettes
    • Coffee, Tea or Cola
    • Other
  23. Occupational_stress_factors – Select Text (64000) as the DataType.
  24. Medications_taken – Select Text (64000) as the DataType.
  25. Date_submitted – Select Timestamp as the DataType.

Take note of the following with regards to the data types used:

  • Use Random_ID, or other ID data types, to uniquely identify each record inside the table.
  • Use Text (255) when storing short textual data in a field.
  • Use Text (64000) when you need your users to input more information.
  • Use Number when you need to store numerical data for possible calculation.
  • Use List – String to incorporate checkboxes for users to tick as they fill out the form.
  • Use Timestamp to automatically stamp the date and time of form submission.

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.

Building Your Submission Form

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

    Select Forms then click Submission Form.

    Click Next to continue.

  • Wizard Step 2 – DataPage Data Source

    Under DataPage Properties, configure the following fields:

    1. Select data source – Make sure that uvg_patient_info is selected.
    2. Enter DataPage name – Input Patient Intake Form Part 1 for this tutorial.
    3. Select Style – Use any of the pre-loaded styles that comes with your account.
    4. Select Localization – Use English (default) for now.

    Click Next to continue.

  • 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 “>”:

    1. Patient_Name
    2. Phone
    3. Age
    4. Gender
    5. Height_feet
    6. Height_inches
    7. Weight
    8. BMI
    9. DOB
    10. Place_of_birth
    11. SSN
    12. Occupation
    13. Emergency_notify
    14. Referred_by
    15. Family_physician
    16. Insurance_carrier
    17. Policy_number
    When you’re done, enable the box on the lower left that says On exit, pass ID and formula fields as parameters. This means you’ll be passing a unique ID from page one to page two of your multi-step form, associating both pages to a single patient.

    Click Next to continue.

  • Wizard Step 4 – Configure Fields

    Click the Preview button now to see what your current form looks like.

    When you’re done, make the following changes under DataPage Elements to create multiple columns, dropdowns and placeholders:

    1. Section 1 – In the dropdown for Number of columns, select 2.
    2. Phone – Under the Advanced tab, in the Placeholder field, input “____-____-______”.
    3. Gender – Go to the Standard tab and apply the following changes:
      • Under General Options, in the Form Element dropdown, select Dropdown.
      • Under Field Options, in the Source dropdown, select Custom Values.
      • Under the Custom Values tab, in the Display field, input Select Gender.
      • Delete the mirrored input in the Value field.
      • Click the New button to the right.
      • Input Male in the Display and Value fields.
      • Click the New button to the right.
      • Input Female in the Display and Value fields.
    4. Height_feet Go to the Standard tab and apply the following changes:
      • Edit Label to say Height.
      • In the Field width dropdown, select Pixels.
      • In the text box to the right, input 90 pixels.

      Then go to the Advanced tab:

      • In the Placeholder field, type in Feet.
      • Enable the box that says Continue next element on the same line.
    5. Height_inches Go to the Standard tab and apply the following changes:
      • In the Field width dropdown, select Pixels.
      • In the text box to the right, input 90 pixels.

      Then go to the Advanced tab:

      • In the Placeholder field, type in Inches.
      • In the Label position dropdown, select No Label.

      Click Preview to see how the fields are aligned.

    6. BMI – Under the Standard tab, in the Form element dropdown, select Calculated Value. Then in the formula window, input the line below to calculate BMI:
      • IsNull(703*[@field:Weight]/Power([@field:Height_feet]*12+[@field:Height_inches],2),0)
      Note that IsNull(your formula, 0) inputs zero to your field if it’s blank. Other functions and database fields can also be inserted into your formula. Remember to Verify for errors.

      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:

      • Go back to the wizard screen and click Formatting.
      • In the Format type dropdown, click Number.
      • Make sure that the Digits after decimal field has 2 selected.
      • Click OK.

    Lastly, you’ll need to add a simple heading. Follow the steps below:

    1. Click the insert button at the bottom of the DataPage Elements panel.
    2. Select Header & Footer.
    3. Click Header on the panel.
    4. Type in Patient Intake Form (Part 1 of 2) on the window to the right.
    5. Highlight the text and select Heading 3 in the Format dropdown above.

    Click Next to continue.

  • 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:

    1. In the dropdown for Destination after record submit, select Go to a new page.
    2. Input the HTML page of your second form, which in this tutorial is form_2_p_2.html.
    3. Check the box to the right that says Relative. This will maintain the entire URL name.

    Click Finish to save your work.

Building Your Update Form

DATAPAGE 2: Patient Intake Form Part 2

You’ll now be building the second page of your sample form.

  • Wizard Step 1 – DataPage Type

    Go to Forms and select Single Record Update to edit the same row inserted from DATAPAGE 1.
  • Wizard Step 2 – DataPage Data Source

    Input Patient Intake Form Part 2 when you Enter DataPage name and leave the rest as is.
  • Wizard Step 3 – Record Identification

    Make sure that Patient_ID is selected as the Unique ID field.

    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:

    1. Family_medical_history
    2. Exercise
    3. Dietary_considerations
    4. Habitual_consumptions
    5. Occupational_stress_factors
    6. Medications_taken
  • Wizard Step 5 – Configure Fields

    Make the following changes under DataPage Elements:

    1. Section 1 – In the Number of columns dropdown, select 2. In the Label position default dropdown, select Top.
    2. Family_medical_history – In the Form Element dropdown, select Multi-Select Listbox.
    3. Habitual_consumption – Bring this field up just below Family_medical_history by clicking the up-arrow button. Then in the Form Element dropdown, select Multi-Select Listbox.
    4. Exercise – In the Form Element dropdown, select Text Area.
    5. Dietary_considerations – In the Form Element dropdown, select Text Area.
    6. Occupational_stress_factors – In the Form Element dropdown, select Text Area.
    7. Medications_taken – In the Form Element dropdown, select Text Area.

    Click Finish to save your work.

Deploying Your Multi-Page Form

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:

  1. Click the Deploy link on Patient Intake Form Part 1’s DataPage container.
  2. On the resulting pop-up window, click Enabled to change Deployment Status.
  3. Make sure that the deployment method selected is Embed.
  4. Copy the Caspio generated deploy code.
  5. Paste the code on your designated HTML file (form_2.html).
  6. Save your HTML file.
  7. Refresh the page on your website.

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.

See You in the Next Video!

In the next video, we’ll talk about relational forms and how you can establish one-to-many relationships as you fill them out.

Next Steps

NEW FORRESTER WAVE REPORT
See why Forrester ranks Caspio a 'Leader' in low-code platforms in this 2019 report.
TALK TO AN EXPERT
Have a vision for an application? Talk to a Caspio product expert and we’ll help you achieve it.
SEE CASPIO IN ACTION
Want to see if Caspio is a good fit for your needs? Choose a date and time for a personalized demo.