Tutorial: Building a Contact Form

In this tutorial we'll build a "Contact Us" form for our website. The form should let our website's visitors fill in their contact information and save it to our database so we can send them our newsletter.

Log in to Springbase and go to the Main Menu (usually the first screen you see). Click the "New database" link and enter a name for the database. Let's call this one "Contacts".

Step 1: Create a table for the data

We need a table to hold the data we're going to collect. In the application editor, click the Start button and choose New Table.

To create the table, we need to decide what data it will hold. After some thought, we've decided on the following:

• First name
• Last name
• Email address
• Phone number
• Comments

Our table will need a column for each of those. By default, this new table has no columns apart from the auto-generated ID column. Click the Edit button and you'll see an Add Column option. Click that and a window will appear letting you specify a new column for the table.

Our first column is the "first name" column. We'll take out the spaces when naming our columns, to make it easier to refer to them later (in queries). So we'll call our first column FirstName.

All of these columns will be of type "text", with no default value.

Click OK to add the first column to the table. You'll notice that the table displays a message about saving the changes before entering data. Normally you can type directly into the table to enter data, but if you have made changes to the table's structure that you haven't yet saved, you can't enter data until you save.

Click the "Save structure" button at the top of the page to save your changes. You'll be prompted to name the table; let's call it "Contacts", just like the database itself. Now you should see the FirstName column alongside the ID column, and if you wanted to you could click into the empty data row to start entering data.

But first let's add the rest of the columns. Just repeat the same process for each of the other four column types: last name, email address, phone number, and comments. You don't need to save changes after adding each column; you can add all four and then save at the end.

Now you should have a table with the five columns plus the auto-generated ID column.

Step 2: Create the contact form

Click Start and choose New Page. This page will contain our contact form. Let's add fields in the same order we added them to our table. First, select the Text Box tool by clicking in the tool drop-down selector at the top of the page editor.

Now draw a text box on the page by clicking and dragging the mouse. When you release the mouse button, the new text box control will be selected and its properties will appear in the property editor at the right.

Now we have a blank page with a text box on it. We need to hook up the text box to the FirstName column in our table. To do that, first we need to hook the page itself up to the table. Click on the page background, outside of the text box, to select the page itself. You'll see the page's properties appear in the property editor.

With the page selected, change the Data Source property to Contacts. Now the page is linked to the Contacts table.

Now select the text box control, and in the property editor, change its Data Source property to "FirstName". Now when someone types into this text box, the information will be saved in the FirstName column of the Contacts table.

We need a way to indicate what information is supposed to go into the text box, so choose the Label control, draw a label to the left of the text box, and set its Text property to "First name:". Also set its Text Align property to "Right", so the text will line up next to the field.

Now click the Save button to save your changes. You'll be prompted to name the page; call it "Contact Form".

To save a little time creating the rest of the fields, choose the Select tool and drag a rectangle around both the label and text box controls. When you release the mouse button both controls should be selected:

Now click the Edit button in the toolbar and choose Copy, then click Edit again and choose Paste. Copies of the two controls should appear slightly below the originals. Drag them into position below the first two fields, then select each one and change its properties: the text box should have its Data Source set to "LastName" and the label should have its Text set to "Last name:". Repeat this process for the other three fields in the table.

Looking at that last field, one line isn't going to be enough room for comments. Let's select it, change its Lines property to 5, and then drag the handle on the bottom edge to resize it.

Now we have a page linked up to our table, ready to store data. This form could work in several ways: it could display data from the table and let you change it by typing in the fields, letting you move through the records in the table one at a time; it could appear as a list, repeating the entire form once for each record; or it could appear as a blank form, waiting for data to be entered to add a new record to the table. You choose how the form should behave by setting its Display Mode property. For this form, click the page background and set the Display Mode to "New record". Now the form will start out blank, and typing into the fields will add a new record to the table. Also, set the Toolbar property to "Hidden".

Step 3: Add a button with a script

We want to be able to thank the visitor for filling out the form, so let's add a button at the bottom. Select the button tool and draw the button beneath the other fields. Once you've drawn the button, set its Text property to "Save". Then click the Events tab in the property editor to see the events for the button control.

Click the space to the right of the Click event to open up the list of options for handling the Click event. Choose the "New script" option to create a custom action to respond to click events. A script editor will appear at the bottom of the page editor.

The script will be empty at first, so click the Add Step button. In the window that pops up, set the Action to "Save record". This will cause the information in the form to be saved to the table when the Save button is clicked. Now click Add Step again to add another step, and set its Action to "Show message". In the message field, enter the message to display when the user clicks the button. We'll use "Thank you! Your information has been saved."

Save your changes to the page, click the Start button, and click Run to start your application. When you fill out the form and click the Save button, you should see the confirmation message you entered.

Now go back to the application editor and open the table. If you already had the table editor open, you won't see the new data until you refresh the view, which you can do by changing the "rows per page" drop-down. You should see your new data in the table:

We're done! You can integrate this form into your website by linking to the URL shown in the Settings page. Click the Start button and choose Settings to see the application settings. Make sure you set the Sharing option to "public".