Build Custom Web Forms

The most important thing you should build first is your database tables. They will contain every field you wish to capture on the survey form.

Click Tables on the left-hand panel to begin, then click the New Table link on top.

TABLE 1: uvg_survey_form

List the following fields with their corresponding DataType and Label (when indicated):

1. Survey_ID – Select Random_ID as the DataType to have it become the primary key. This ID will uniquely identify each row inside your database table.
2. Name – Select Text (255) as the DataType.
3. Email – Select Text (255) as the DataType.
4. Department – Select Text (255) as the DataType.
5. Work_Length – Select Text (255) as the DataType. Input “How long have you worked here?” as its Label.
6. Confident_I_have_Skills – Select Number as the DataType. Input “I am confident I have the skills to do my current tasks.” as its Label.
7. Time_current_tasks – Select Number as the DataType. Input “I have plenty of time to do my current tasks.” as its Label.
8. Work_past_normal_hours – Select Number as the DataType. Input “I don’t have to work past normal working hours.” as its Label.
9. Equipment_to_do_my_work – Select Number as the DataType. Input “I have all the equipment I need to do my work.” as its Label.
10. Respected_by_coworkers – Select Number as the DataType. Input “I feel respected by my coworkers.” as its Label.
11. Safe_at_workplace – Select Number as the DataType. Input “I feel safe at my workplace.” as its Label.
12. Confident_in_managers – Select Number as the DataType. Input “I feel confident in my managers.” as its Label.
13. Manager_explains_goals – Select Number as the DataType. Input “My managers explain goals and company strategy on a regular basis.” as its Label.
14. Motivated_to_meet_deadlines – Select Number as the DataType. Input “Employees are motivated by managers to meet deadlines.” as its Label.
15. Overall_how_satisfied – Select Number as the DataType. Input “Overall, how satisfied are you with your job?” as its Label.
16. Comments – Select Text (64000) as the DataType.
17. Date_submitted – Select Timestamp as the DataType to track when the evaluation form was submitted.

Note that radio buttons will be used for fields with the data type of Number. So when a user submits “Excellent”, it is stored as “5”. This will make it easier to create metrics and calculations later on.

When it comes to reaching the maximum character limit on field names, simply abbreviate and write a longer label. You can also modify them anytime while building the form.

When you’re done, name this table uvg_survey_form and click Finish. You now have a table that will store the information submitted by your end-users.

TABLE 2: uvg_survey_answers_lookup

This will serve as your lookup table for survey answers. Again, click the New Table link on top and list the following fields with their corresponding DataType:

1. Answer – Select Text (255) as the DataType.
2. Score – Select Number as the DataType.

When you’re done, name this table uvg_survey_answers_lookup and click Finish.

Next, Open this table and manually add the following values for the Answer and Score fields respectively:

1. Excellent – 5
2. Above Average – 4
3. Average – 3
4. Below Average – 2
5. Poor – 1

Whenever users select any option from Excellent to Poor, the app should reference this table to find the assigned number.

With your tables created, it’s time to build your database form.

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.

DATAPAGE 1: Survey Form

Only one DataPage, or app widget, will be built in this tutorial to serve as your survey form.

• Wizard Step 1 – DataPage Type

  

  The Submission Form should already be selected by default. Click Next to continue.

  Note that in Caspio, you can also build workflow type apps that include reports, calendars, charts for dashboards and more.

• Wizard Step 2 – DataPage Data Source

  

  Under DataPage Properties, configure the following fields:

  1. Select data source – This dropdown will show you a list of all your views and tables. Select uvg_survey_form to store all the user submissions or answers in the first table you’ve built.
  2. Enter DataPage name – While you’re free to use your own naming convention, input Survey Form for now.
  3. Select Style – You can apply different styles to change the aesthetics of your DataPage here. If you want to modify styles or create your own, go to Styles on the left-hand panel. Use your default selection for now.
  4. Select Localization – Use English (default) for now.

  Click Next to continue.

• Wizard Step 3 – Select Fields

  

  When selecting fields on your survey form, go to your list of Available Fields and transfer them to your Selected Fields one at a time with “>”, or all at once with “>>”.

  Transfer all the fields at once and click Next.

• Wizard Step 4 – Configure Fields

  

  Click the Preview button to check your survey form before you configure fields. When you’re done, implement the following changes on your DataPage Elements:

  1. 1. Confident_I_have_Skills – Make the following changes in the Standard tab:
        • Under General Options, in the Form Element dropdown, select Radio Buttons.
        • Under Field Options, in the Source dropdown, select Lookup table or view.
        • Under the Lookup Table tab underneath, in the Table or view dropdown, select uvg_survey_answers_lookup.
        • In the Field for display dropdown, make sure that the selected field is Answer.
        • In the Field for value dropdown, make sure that the selected field is Score.
     2. Time_current_tasks – Implement the same changes listed in 1.
     3. Work_past_normal_hours – Implement the same changes listed in 1.
     4. Equipment_to_do_my_work – Implement the same changes listed in 1.
     5. Respected_by_coworkers – Implement the same changes listed in 1.
     6. Safe_at_workplace – Implement the same changes listed in 1.
     7. Confident_in_managers – Implement the same changes listed in 1.
     8. Manager_explains_goals – Implement the same changes listed in 1.
     9. Motivated_to_meet_deadlines – Implement the same changes listed in 1.
     10. Overall_how_satisfied – Since you don’t have the right lookup table for this field, you’ll need to input new options. Implement the following steps:
         • Under General Options, in the Form Element dropdown, select Radio Buttons.
         • Under Field Options, in the Source dropdown, select Custom Values.
         • Under the Custom Values tab, input the following under the Display and Value fields respectively (use the New button to the right):
           • Very Satisfied – 5
           • Satisfied – 4
           • Neutral – 3
           • Dissatisfied – 2
           • Very Dissatisfied – 1

         Your users will now see these options listed on the form with corresponding number values stored inside your database. This will allow you to perform calculations and build charts to better understand patterns and metrics.

     11. Comments – Under General Options, in the Form Element dropdown, select Text Area. This will give users more space to see what they’re typing.

  Click Preview once more. Observe how the text area is displayed with the other radio buttons.

You can also implement rules to your survey form based on certain actions. One example is hiding the Comments text area while no selection is made on the Overall_how_satisfied field.

Apply this conditional logic through the following steps:

1. Click the Rules tab on top.
2. Click the “+” symbol at the bottom of your empty Rules List panel.
3. Select Rule 1.
4. In the Criteria section, click the New button.
5. In the Edit Criteria pop-up, in the first dropdown under Condition, select Field Name.
6. In the second dropdown under Condition, select the Overall_how_satisfied field.
7. In the Operator dropdown below, select Is Blank.
8. Click OK.
9. In the Action section back in the Rules screen, click the New button.
10. In the Add Action pop-up, make sure that the Action selected is Hide.
11. In the Field or section dropdown below, select the Comments field.
12. Click OK.

The rule you’ve just implemented will hide the Comments field by default, appearing only when the user selects an option in the last set of radio buttons (Overall, how satisfied are you with your job?).

Click Preview and test this function.

Wizard Step 4 also allows you to adjust the placement of your survey fields and add section headings in the final form.

In the steps below, you’ll be positioning the first four fields of your survey form to be on the same row:

1. Select Name from your DataPage Elements.
2. Click the Advanced tab.
3. Under Layout Options, enable Continue next element on the same line.
4. Under Layout Options, in the Label Position dropdown, select Top.
5. Repeat the process for the Email field.
6. Repeat the process for the Department field (except step 3).

In the next set of steps, you’ll be inserting section headings to separate parts of the form:

1. Under DataPage Elements, select Name.
2. At the bottom of the panel, click the insert symbol and select HTML Block.
3. Select the HTML Block 1 element.
4. Under the Standard tab, find the dropdown for Format and select Heading 1.
5. Input “Job Evaluation Form” in the allotted text area below.
6. Change the Format dropdown to Heading 5.
7. Input this text on the next line, “Please fill out this survey to provide feedback regarding your job.”

If you know how to code in HTML and you understand CSS, you can click on the Source button and add your own HTML and CSS for your heading. But for now, follow the same pattern when adding HTML blocks for the other subheadings below (use Heading 5 in the rich text editor):

• HTML Block 2 – Insert above Confident_I_have_Skills and input, “Workplace Environment: How much do you agree or disagree with the following statements?”
• HTML Block 3 – Insert above Equipment_to_do_my_work and input, “Workplace Environment: How much do you agree or disagree with the following statements?”
• HTML Block 4 – Insert above Confident_in_managers and input, “Management: How much do you agree or disagree with the following statements?”
• HTML Block 5 – Insert above Overall_how_satisfied and input, “Overall, how satisfied are you with your job?”

Click Finish when you’re done.

Now you’re ready to publish your survey form to the web.

Caspio has different methods of deploying your database form to your end-users. Follow these steps to launch using the Embed method:

1. Click the Deploy link on your survey form’s DataPage container.
2. In 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_1.html).
6. Save your HTML file.
7. Refresh the page on your website and check its functionality.

Note that you can also publish your survey form even without a website. Simply use the URL deployment method and share the direct link.