Allthough Baboon Webforms is very intuitive and you can use it without reading any manual, we recommend that you read this tutorial to have a bigger grasp on how the program works.

Step 1: Webform Settings

The first step of the process is to set the general webform settings.

First we will select a Title for our webform, in this case we will simply input: Baboon Webforms - Contact Us.

When a user sends our webform a report with the data received will be sent automatically to the Email address we select. In this example we want to receive the data at:
contact@baboonwebforms.com

Then we must select a Subject for the messages we will receive, it has to be a subject you can identify so that you know that the message comes from a user filling the webform. In this example we'll set it to:
New webform user contact

Finally we can select to receive the user's Environment data along the email message. The user's environment data lets you know information, such as the user's agent, IP, connection name, etc. This can be useful for tracking and security purposes. We will select Yes but you can select not to receive it.

Once we are done entering our webform settings we click on "Continue" and move on to the next step.

Step 2: Setup Fields

In this step we will setup the fields our webform will have. We have to add the fields one at a time and at the order we want to display them. I recommend you carefully plan your fields before you start to setup them.

For this webform we want the following fields: Name, Email, Comments and How did you find us.

We begin with the first field we want, that is the Name field. First we must choose the field type from the list (for a complete description of the field types please read Web Form Basics)

1. Select a field type from the list.

For our Name field we will select a Text Box field.

2. Field configuration.

As you can see in the image 2, after we select the Field Type we have to configure our field. On the Name we have to enter the name of your field, in this case it will simply be: Name. This way the user will understand that he has to enter his name.

Then on Description we will enter: Please enter your name. The Description gives the user extra information about what they need to fill on that field.

We'll ignore the Default Value since we don't need our field to default to any data.

As we want this field to be required check the make required checkbox. By making a field required, our user can't submit the webform unless he fills the field correctly.

After we're done we click on the Add This Field button and we can see a preview of how our field will look.

We will repeat this steps for each field we want to on the webform. The next field is the Email field. We select a Text Box, under name we select Email. On description: Please enter your email an we make this field required.

Then comes the Comments field. We select a Textarea field, under name we select Comments. On description: Please enter your comments, this field will not be required.

The last field, How did you find us? comes with a twist. We select Select Field from the field type. And you will see that in the configuration panel, instead of Default Value we have an area where we have to enter the Options

3. Multiple-Option Field configuration.

For fields with multiple-options (select field, checkboxes and radio buttons) we have to enter the options we want in the Options area. Each option must be on a new line.

For this field on Name we select: How did you find us?. On Description we select: Please tell us how did you find us.

And on the Options we will enter:

Search Engine
Website Link
A friend
Advertising

We've finished adding all our fields. At the end your form's preview should look something like this:

4. Form Preview.

If you need you can Delete or Modify your fields once you added them.

We go to the bottom of the page and click on the Continue button to move on to the next step.

Step 3: Auto-Respond

An autoresponder is a pre-written reply to anyone sending your webform. If someone sends the webform, it automatically and immediately emails this person the reply (for example: "Thank you for sending me a message. I will reply shortly.").

The autoresponder is optional, and if you dont want one, then you can go to the bottom of the page, click on the Continue button and skip ahead to the next step.

In this case, we do want an auto-responder.

We check the box that says Yes. I want to setup an autoresponder.

First we will select a subjet for the reply message we want to send to the user. Select a subject that the user can easily identify. In this case we will select something like:
Thank you for contacting Baboon Webforms.

Now we will write the actual message of the reply mail. We can personalize the mail message by attaching the information the user supplied.

5. Message Composition.

As you can see on the image 5, there is a button for each field of your webform. By clicking on them the necessary code for attaching the field will be added at the message.

We will send the following reply message:

Hello $Name:

Thank you for contacting us at Baboon Webforms. We have succesfully
received your email message and we will contact you at $Email
in less than 24 hours.

Best Regards,
The Baboon Webforms Team

Finally we have to select the Email Field. The Email Field is that field were you ask your users to enter the email. This will be used to send the reply message. In this case we select our Email field.

After you are done, click on the Continue button to move on to the next step.

Step 4: Redirect

Once the user sends the webform it will be redirected to any page you select, usually a thank you page explaining that the webform was submitted and anything else you might want to communicate.

Prepare a thank you page and enter the url in the Final URL field. In this example we will use:
http://baboonwebforms.com/thankyou.htm

We finally click on the Continue button to create our webform.

Use your WebForm

You will see a confirmation page telling you that your webform was created. On this confirmation page you will see the link to your newly created webform.

To use your webform simply send your visitors to that link and you are ready. Behold the magic of Baboon Webforms as you now have an easy way to get feedback from your visitors without those annoying mailto links.

Take a look at this example's final webform.