Convert Existing HTML Forms to Submit Data to Caspio Bridge

 

If you want the advantages of a web database, but have a few forms that you cannot upgrade to DataPages, you can change these older forms to submit data directly to Caspio Bridge.  This way all of your data is submitted to a central location for easy access.  You will adapt your form to pass the data to an intermediary DataPage that will submit the data to the database.  From the intermediary DataPage you have all of the options that Caspio Bridge provides for destinations and triggers including notification emails.  You can use this technique whether your original form uses the GET or POST method.

Submit Data to Caspio Bridge Through an HTML Form

Steps to make existing HTML forms submit data to Caspio Bridge

1.  Create a Web Form DataPage

In the Caspio Bridge Explorer window go to the DataPage view.  Click on New to open the DataPage wizard.  Choose the base table where you want to store the data submitted from your original form.  Because we are receiving this data through parameters we will enable advanced options and parameters.  Click Next.  We are going to create a Capture Form.

Select the fields you wish to receive by moving them from the left to the right-hand panel using the arrow button.  Click Next.

By default, after your end-user clicks submit on the original form, the completed Web Form will display to your end-user and prompt them to press Submit again.  In some instances this is a good option because you can format the DataPage to serve as a confirmation page.

If you would like to have the Web Form submit automatically, you can add a small snippet of JavaScript into an HTML block.  If you choose to add these lines of code, be sure that all of your DataPage elements are Text Fields or Text Areas and that you are not attempting to submit values to fields marked as unique.  All of the data validation will have to be handled on your original form.  Using the Insert button at the lower right hand corner of the DataPage Elements panel add an HTML block and move it down to the last element in your DataPage elements.  Insert the JavaScript at the end of this article.  Click Next.

2.  Redirect your end-user

On the Destinations and Triggers screen of the DataPage wizard you can decide where you would like your end-user to be directed after their information has been submitted.  You can also add notification and acknowledgement emails.  Press Finish to save your Web Form.

3.  Deploy the Web Form

Now that the Web Form is complete you can click the Deploy button.  Choose the Direct from Caspio method for deployment, choose your security setting and copy the deploy code URL.  You will need this address to alter your original form.

4.  Change the form action to the Caspio web address

Go to the HTML page of your original form.  Locate the Form tag.  Inside the Form tag there is a parameter called action.  This parameter chooses the destination after the end-user clicks Submit.  Take the Direct from Caspio URL and insert the portion before the first question mark into this parameter.  Now the form will pass the data to your Web Form.

Extract the HTML Form Data from the Deploy Code

5.  Add the AppKey to the original form items

The portion of the Direct from Caspio URL after the question mark also needs to be passed using the original form.  We accomplish this by adding a hidden element to the form.  Create an input tag.  This tag will have three parameters: type=”Hidden”, name=”AppKey” and value=”The AppKey from your Direct from Caspio URL”.

Summary

Caspio Bridge makes it easy to create a wide variety of DataPages to easily collect, search, and view data.  If you would like to create Caspio Bridge apps, but there are some HTML forms you must preserve, it is possible to tie these forms into your Caspio Bridge database and gain the advantages of a Caspio Bridge web database.

JavaScript

<script >
setTimeout('document.getElementById("caspioform").submit()',0);
</script >

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.