Create a "Contact Us" Form for a Business Website

In this example, we want to create a contact request form. We want the users to submit their name, phone number, email address and comments.

1. Click the Form Layout arrow on the graphical interface to view Form Layout mode.

2. Select Text icon:

3. Move cursor to design grid.

4. Click once to drop field on design grid.

5. Write desired text within the text box:

6 . Before clicking out of the field, notice that the Properties Panel is at the bottom of the screen. Text color and font may be changed from the default Times New Roman black. Also, colored or shaded backgrounds can be added as well as borders around the field.

7. In this case, we have changed the font to Verdana 10, bold, the background color to yellow, and have added a black border.

8. Now we want to add a field so that users can enter their name. Click the Text Field Icon. Remember, this is not the same as the Text icon. The Text Field icon is a live field that allows users to submit data.

9. Drop the Text Field onto the design grid by moving the cursor to the design grid and clicking once.

10. Before clicking outside of the Text Field, it is important to check your Properties Panel and edit the field's attributes. In this case, we need to identify the name of the text field as “full_name.” If you do not manually name the fields, default names will automatically be added. If you leave a field name blank, you will be prompted to add one. However, you will almost always want to name your own fields because it greatly assists with data management later in the form publication process.

Note: You may also enter text which will be displayed within the field, but we are not doing so in this example.

11. Now we need to let the user know what they should enter in the Text Field. So we click the Label icon.

12. While we could have clicked the Text icon, the Label icon is preferable because it allows us to tie our on-screen command text to the email submission form. This helps us to tie our data together after users start submitting information to us. Go to the Properties Panel at the bottom of the workarea and use the drop-down list to select the field you would like to tie the text command to - in this case, "full_name" is our field of choice:

13. In the layout grid, we write the command (label) to let them know they need to enter their full name:

14. Next, we will follow steps 8 through 13 three more times in order to create fields for a phone number, email and comments. We will call these "phone," "email" and "comments" respectively.

Note: For the comments field we have chosen Textarea rather than Text to allow room for more than one line of text.

15. In order to help ensure that our form is filled out by a human being rather than a spam robot, we're going to add validation to our email field. While our email field is selected, we right-click and select Other Validation Options...

Then select the "EMAIL" option. This will ensure that our users have to enter an email in the format name@domain.com or they cannot submit the form. Meaning, they have to enter their email name, the "@" sign and a dot something (it doesn't have to be .com specifically).

16. Since we want to contact our customers in a time and manner that is convenient to them, we will ask them how they prefer to be contacted - by email or by phone. But because we want to give users a choice of only one contact method, and because we want the selection process to be easy, we have chosen the Combo Box. If we wished to give the user an option of choosing multiple methods, we would have used the List Box with the "Multiple" option. Click on the Combo Box icon and drop the Combo Box field onto our design grid above the comments box (after moving our comments field down a few spaces on the grid to make room for it).

Note: When someone fills out a SeaGreen form online, the tabbing order will be the same as the order of the fields on the page - right to left and top to bottom (as if you were reading the text on a page). If you insert a new field in between two existing fields, the tabbing order will be reset according to their placement on the page.

17. Before clicking out of the Combo Box field, go to the Properties Panel and name the Combo Box:

18. On the right-hand bottom of the screen, click Items…

19. Click Items… and then Add… to open a separate window that allows you to enter items you would like displayed in the Combo Box. We have entered the choices Phone and Email. Note: If you want a selection to be selected by default, check the box next to that label.

Click OK. You will not see items displayed in the Combo Box in Form Layout mode. But if you wish to verify that the items were correctly entered, briefly click into Preview Mode and the items will appear. Be sure to click back to Form Layout mode to continue.

20. Now we label the Combo Box “Contact By:” so that users know what to do, and link it to our Combo Box field (as seen in step 12).

Note: Image below represents the Combo Box in Preview Mode, so that you can see the items in the Combo Box as they will look upon publication.

21. Now we need to give users a way to submit the form. Click the Button icon from the graphical interface and drop the Button onto the design grid.

22. Before clicking out of the Button field, we go to the Properties Panel and type in our Field name. Since this is a name for our own purposes, we are simply calling it “submit_button.” We then type “Submit Form” in the Label section (note that the text is duplicated in our Button field, above); and request a certain Action. In this case, when the user presses the Button, we want the form to be submitted. Make sure that you always label this button with a very direct command so that the user does not think that pressing it is an option.

24. Last, let's add a picture to make our form more colorful. Select the Picture icon from the tool bar and place it on the design grid:

Then click the button with the X and browse to the image you wish to use:

Note: Remember, this form will be on the internet - therefore you will want to make sure that your images are the correct size for your form and saved as optimized for the web. Larger image sizes make for longer download times for your page.

25. Now let’s take a look at our complete form in Form Layout mode:

26. Now, we assign the Title, Description, and Keywords to the file. This can be done at any point in the form creation process, though you should do this as soon as possible.

27. Finally, we click on File and then Save As… and save the document. File will save in a special SeaGreen format with the extension .sea. We're saving ours as contact_us.sea.

28. If you wish to edit the code behind the form, you may either press the “2. Code Editor” button on top of the graphical interface or press the “Next” button at the bottom-right of the screen. If you have no need to edit the code, you may skip to “3. Form Preview.”