The Caspio Low-Code Platform
All the Tools and Support You Need
Unlimited Users With Every Plan
Part 5 will teach you how to create a custom form that contains some inline HTML and CSS to make your app more visually appealing.
In this last video, you’ll be creating a wire transfer authorization form.
The topics we’ll cover include: how to create and center a logo, how to add div containers for titles, subtitles, subheadings and other HTML elements, and how to align fields together in multiple columns.
If you’ve seen all the other videos in this ultimate video guide, you should know how to begin building an application in Caspio — Click the New App link on top and choose how you want to start:
Click the second option to build your application from scratch.
You’ll then be prompted to name your app — input Custom Form and click Finish to see your app listed on your home screen.
Next, Open your new app container to access the App Overview.You’ll find all the different objects to build apps on the left-hand panel.
Tables are the foundation or backbone of any app you develop inside Caspio. Click the Tables object on the left-hand panel to begin.
TABLE 1: Wire_transfers
Click the New Table link on top and list the following fields with their corresponding DataType and Label (when indicated):
Take note of the following with regards to the data types and labels used:
Click Save on top and name your table Wire_transfers, then click Finish.
Note that in your table container, you can always click on Design to modify your fields or click Open to see all your data inside.
Go to DataPages and click the New DataPage link on top. This will launch Caspio’s point-and-click DataPage wizard to help you build your app interfaces.
DATAPAGE 1: Wire Transfer Form
Wizard Step 1 – DataPage Type
Click Next to continue.
Wizard Step 2 – DataPage Data Source
Under DataPage Properties, configure the following fields:
Click Next to continue.
Wizard Step 3 – Select Fields
Wizard Step 4 – Configure Fields
Click Finish to save your changes before making any modifications.
DEPLOYMENT 1: form_5.html
Follow these steps to deploy using the Embed method:
The main goal of this video is to turn your current form into something like the app overview screenshot at the beginning of this guide.
Go back to Caspio and click the Edit link on Wire Transfer Form’s DataPage container, then skip all the way to Wizard Step 4 – Configure Fields.
Follow the steps below to add a heading:
Note the following elements in the HTML line, which you can edit anytime:
Note the following elements from the simple styling:
<div style=”text-align: center; font-weight: 600;”>PLEASE NOTE: Signed form may be returned via fax (866) 914-1578 or email (to email@example.com) prior to 1:30 p.m. Eastern Time (10:30 a.m. Pacific Time) to be initiated the same day (excluding federal holidays).</div>
<h3 style=”margin: 25px 0px 0px 0px;”>
Now you’ve created a two-by-two effect where you have two columns.
You’ve now added a new section and a container for a new heading.
Click Finish to save your changes and refresh your deployed form.
Click Edit on your Wire Transfer Form DataPage and skip to Wizard Step 4 – Configure Fields:
This also applies to the logo. Once again, click Edit on your Wire Transfer Form DataPage and skip to Wizard Step 4 – Configure Fields:
<img src=http://d23b32zmhbr2ct.cloudfront.net/images/press/logos/caspio_72.jpg width=”200px” style=”display:block; margin-left: auto; margin-right: auto;”>
With this method, you accomplished the same thing without writing the image source tag.
This is only the tip of the iceberg.
You can accomplish more if you’re adept with HTML and CSS.
Be sure to check out our Resource Center for more tips and tricks on how to use Caspio. Thank you so much for your time and we hope to see you again!
Share this post:
Caspio is the world’s leading cloud platform for building online database applications without coding. Start a free trial today and experience the power of no-code.
© 2023 Caspio, Inc. Sunnyvale, California. All rights reserved.