Welcome to our ultimate video guide on developing web forms. This series will teach you how to build five different use cases from online surveys to custom forms you can design with HTML.
Part 1 will cover how to build and deploy an online survey form.
Start by logging into your Caspio account. Once inside, 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’re free to have your own naming conventions, type in Survey 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 survey form.
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):
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:
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:
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
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:
Click Next to continue.
Wizard Step 3 – Select Fields
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:
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.
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:
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:
In the next set of steps, you’ll be inserting section headings to separate parts of the form:
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):
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:
Note that you can also publish your survey form even without a website. Simply use the URL deployment method and share the direct link.
In the next video, we’ll show you how to build a multi-page form.