Build Custom Web Forms

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:

1. By importing data
2. With a blank app

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

1. TransferID – Select Random_ID as the DataType.
2. Date_to_be_sent – Select Date/Time as the DataType. Input “Date wire to be sent:” as its Label.
3. Transfer_amount – Select Currency as the DataType. Input “Wire transfer amount in U.S. Dollars:” as its Label.
4. Bank_account_number – Select Text (255) as the DataType. Input “Bank Account Number:” as its Label.
5. Bank_account_name – Select Text (255) as the DataType. Input “Name(s) on your Bank Account (as it appears on your statement):” as its Label.
6. Receving_bank_name_phone – Select Text (255) as the DataType. Input “Receiving Bank Name and Phone Number:” as its Label.
7. Receving_routing_transit_number – Select Text (255) as the DataType. Input “Receiving Bank Wire Routing and Transit Number or ABA (should be 9 digits):” as its Label.
8. Beneficiary_name – Select Text (255) as the DataType. Input “Beneficiary Name or Intermediary Financial Institution Name and Phone Number:” as its Label.
9. Beneficiary_account_number – Select Text (255) as the DataType. Input “Beneficiary Account Number or Intermediary Account Number, ABA, or Routing Number:” as its Label.
10. Final_Beneficiary_name – Select Text (255) as the DataType. Input “Final Beneficiary Name, Final Credit To (F/C): For Benefit of (FBO), Further Credit To: Name or Special Instructions:” as its Label.
11. Final_Beneficiary_account_number – Select Text (255) as the DataType. Input “Final Beneficiary Account Number or Reference Number:” as its Label.
12. Cell_phone – Select Yes/No as the DataType.
13. Home_phone – Select Yes/No as the DataType.
14. Work_phone – Select Yes/No as the DataType.
15. Email – Select Yes/No as the DataType.
16. Account_holder_name – Select Text (255) as the DataType. Input “Account Holder’s Name:” as its Label.
17. Today_date – Select Date/Time as the DataType. Input “Today’s Date:” as its Label.
18. Additional_account_holder_name – Select Text (255) as the DataType. Input “Additional Account Holder’s Name:” as its Label.
19. Today_date_2 – Select Date/Time as the DataType. Input “Today’s Date:” as its Label.

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

• Use Random_ID to uniquely identify every transfer with a unique ID.
• Use Date/Time when dealing with date fields.
• Use Currency to store numerical data pertaining to money.
• Use Text (255) when storing textual data up to 255 characters long.
• Use Yes/No to have a Boolean checkbox.
• To compensate for the limited number of characters in the field name, input the full label name in the Label column for reference. You can still modify the label once you begin building your form.

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

  

  Make sure that Forms is selected, then choose Submission Form on the right-hand side.

  Click Next to continue.

• Wizard Step 2 – DataPage Data Source

  

  Under DataPage Properties, configure the following fields:

  1. Select data source – Make sure that Wire_transfers is selected.
  2. Enter DataPage name – Input Wire Transfer Form 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

  

  Transfer all Available Fields to your Selected Fields by clicking the “>>” button.

  Click Next to continue.

• Wizard Step 4 – Configure Fields

  

  When you click the Preview button, you’ll find a very basic form with a single column.

  Click Finish to save your changes before making any modifications.

DEPLOYMENT 1: form_5.html

Follow these steps to deploy using the Embed method:

1. Click the Deploy link on Wire Transfer Form’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_5.html).
6. Save your HTML file.
7. Refresh the page on your website.

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.

• Wizard Step 4 – Configure Fields

  

  Follow the steps below to add a heading:

  1. Click the insert button at the bottom of the DataPage Elements panel.
  2. Select Header & Footer.
  3. Click Header on the panel.
  4. Under the Standard tab, input the following on the text window:
     • Line 1 – O. Box 111, San Jose CA 99877-9999
     • Line 2 – Contact Center: 888-888-8888
     • Line 3 – Wire Transfer Authorization Form
     • Line 4 – PLEASE NOTE: Signed form may be returned via fax (866) 914-1578 or email (to bankingforms@test.com) prior to 1:30 p.m. Eastern Time (10:30 a.m. Pacific Time) to be initiated the same day (excluding federal holidays).
     • Line 5 – REQUIRED – Sender Account Information
  5. On the panel above the text window, click Source. You can insert some HTML and CSS here.
  6. Input the following HTML line above Line 1:
     <img src=http://d23b32zmhbr2ct.cloudfront.net/images/press/logos/caspio_72.jpg width=”200px” style=”display:block; margin-left: auto; margin-right: auto;”>

     Note the following elements in the HTML line, which you can edit anytime:

     • The image source tag.
     • The URL link where the logo is hosted.
     • The width of the logo.
     • How the logo is displayed.
     • How the left and right margins are set to auto, meaning the logo is centered with the widths equal on both sides.
  7. On the panel above the text window, click the Source button. The logo is now displayed.
  8. Click the Source button once again. You’ll need to enclose the P.O. Box section within a its own container under the HTML line of your logo. All you need to do is create a simple div with a bit of styling as seen below:
     <div style=”text-align: center; padding: 15px 0px 20px 0px;”>
     P.O. Box 111, San Jose CA 99877-9999<br />
     Contact Center: 888-888-8888
     </div>

     Note the following elements from the simple styling:

     • The text is aligned in the center.
     • Some padding is added around the text: 15 pixels on the top, 0 to the right, 20 on the bottom and 0 to the left.
     • A div will automatically push the next content underneath, so you don’t need another line break (<br />) after the closing div tag.
  9. Click the Source button above and observe how the P.O. Box section is aligned.
  10. Click the Source button and apply some styling to your main heading as seen below:
      <h3 style=”font-weight: 600; text-align: center;”Wire Transfer Authorization Form</h3>

      Note the following elements from the simple styling:

      • An h3 heading tag is used.
      • The font-weight is set to 600, meaning it’s going to make the text bold.
      • The text is aligned in the center.
      • The line break is removed before the h3 tag is closed.
  11. Introduce a new div for your subheading as seen below:

      <div style=”text-align: center; font-weight: 600;”>PLEASE NOTE: Signed form may be returned via fax (866) 914-1578 or email (to bankingforms@test.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>

  12. Introduce a new div for the label above your field as seen below:

      <h3 style=”margin: 25px 0px 0px 0px;”>

      1. REQUIRED – Sender Account Information

      </h3>

      

  13. Click the Source button above to review your changes.
      
  14. On the DataPage Elements panel, select Section 1 and make the following changes on the Standard tab:
      • Under General Options, in the Number of columns dropdown, select 2.
      • Under Layout Options, in the Label position default dropdown, select Top.

      Now you’ve created a two-by-two effect where you have two columns.

  15. On the DataPage Elements panel, make the following changes:
      • Select Receving_bank_name_phone.
      • Click the insert button at the bottom of the DataPage Elements panel.
      • Click New Section and insert Section 2.
      • Click the insert button once again.
      • Click HTML Block and insert HTML Block 1.

      You’ve now added a new section and a container for a new heading.

  16. On the DataPage Elements panel, select HTML Block 1 and add a new heading in Source as seen below:

      <h3 style=”margin: 25px 0px 0px 0px;”>

      2. REQUIRED – Receiving Bank Information

      </h3>

  17. On the DataPage Elements panel, select Section 2 and make the following changes on the Standard tab:
      • Under General Options, in the Number of columns dropdown, select 2.
      • Under Layout Options, in the Label position default dropdown, select Top.
  Now that you’ve seen how it’s done, you should be able to replicate the process for each section.

  Click Finish to save your changes and refresh your deployed form.
  

  You can also skip some code if you use the rich text editor.

  Click Edit on your Wire Transfer Form DataPage and skip to Wizard Step 4 – Configure Fields:

  • On the DataPage Elements panel, select HTML Block 1.
  • Click Source and delete the contents of the text window.
  • Click Source once again and input in the text window: REQUIRED – Receiving Bank Information. Make sure the entire text is highlighted.
  • In the panel above the text window, click Format.
  • Select Heading 3 to format your line of text with the h3 tag.
  • Add some spacing above the text with the enter key. This will compensate for the 25 pixels of top space you had before.
  You’ll see the exact same thing when you click Finish and refresh your form. Even though the platform capability to accept code exists for technical users, there is no need to use any HTML.

  This also applies to the logo. Once again, click Edit on your Wire Transfer Form DataPage and skip to Wizard Step 4 – Configure Fields:

  • On the DataPage Elements panel, select Header.
  • Click Source and delete the previously inserted code for the logo image:

    <img src=http://d23b32zmhbr2ct.cloudfront.net/images/press/logos/caspio_72.jpg width=”200px” style=”display:block; margin-left: auto; margin-right: auto;”>

  • Click Source once again. In the panel above the text window, click the Image button.
    
  • In the resulting pop-up window, in the URL text box, input the logo link:

    http://d23b32zmhbr2ct.cloudfront.net/images/press/logos/caspio_72.jpg

  • In the Width text box, input 300.
  • Click OK.

  

  With this method, you accomplished the same thing without writing the image source tag.