Build Custom Web Forms

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.

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.

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.

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.