The Form Builder is a very powerful tool. It helps you create forms or lists of questions on your website where people can enter their information. This can then be emailed to you and/or posted on your website.

 

 To get to the Form Builder go to the add block button (plus icon on one of your columns).   

On the dropdown list select 'Add Feature'.

 

 In the top left corner under categories choose 'Site Widgets', then scroll down and select 'Form Builder'. 

Step 1: Form Setup

The first page is Form Setup. You can tell what Step you are on by looking at the top left column.

This page creates the labels and input areas for the form.

1.         Look at the center of the page, in the 'Form Fields' section and click the 'Add' button.

2.         The 'Types' column on the left shows the many ways that you can create questions for your form.

3.         Click on the name of the type of field you want to add.

4.         Enter a label for the field.  This is what the user will see.

5.         Continue configuring the field until it is set how you want it to be.  One thing you might pay special attention to is the box that when checked, makes that field required.

6.         Once you are done configuring your field, click “Add” to add the field to the form and continue selecting others, or “Add & Close” to add the field and return to the main Form Builder window.

The names of the fields you have added should show up in the “Form fields” box on the main Form Builder page.  You can change the order of the fields by clicking once on the field you want to move, then using the arrows to the right of the Form fields” box to move it up or down.  Once you have this set how you want it, hit the “Next” button, located in the bottom right of the page.

The Types that you can add to a  Form are:

• New Section: This splits the form questions into parts. If you add a new section it will create a link on the left-hand side that goes to any fields added below it. For example, the first picture shows the form fields I have created, and the second shows how they are displayed:

 

 

 

 

• Line Break: Creates an extra space between two fields.
• HTML: Allows you, the person creating the form, to add HTML code into your form. This does not allow someone visiting the site to add html code.

• HTML Editor: This puts a TinyMCE editor into the form. This is the same editor that is used when you go to 'Add Block' in Caravel and select 'New Document' in the dropdown list. It is helpful because it provides formatting tools similar to a word processor. The options 'Visible Rows' and 'Visible Columns' set the amount of space that the user has to enter text.

 

• Hidden Text: This is text that is not visible to the form user, but will be submitted with the form.

• 
  Textbox: This creates a standard textbox. A textbox only has one row. It allows you to set the width of the textbox. It also allows you to check whether you want this to be a required field or not. The option 'Read only' will turn the textbox into a label and will not allow the form user to change the text.

• Text Area: This is the same as a textbox except it allows you to set the number of rows.

 

• Checkbox: A checkbox allows the form user to answer a question from a list of responses. The user can select as many checkboxes as they want. The 'Options' field is the responses for the question (the question should be in the 'Label'). In the 'Options' field type the first label for the text box. Hit return and then type the 2nd label, and so on. For example, in the picture  my question was Favorite Colors? and my responses were Red, Green, Blue, Black, Pink :

 

 

 

 

 As you can see several checkboxes can be checked. If you only want to allow one response, use the Radio Button . When this form gets emailed the response for this question will be 'Red', 'Blue', and 'Pink'. To change what will be emailed when a box is checked, edit your checkbox by pressing the 'Edit' button which is located next to the add button.

 

In your 'Options' field you should see something like 'Red|=>|Red' The first Red is what the form user sees, the second Red is what is emailed if that checkbox is selected. So to change what is emailed simply change the text after the |=>| symbols. If you want the question and emailed response to be the same, just type in the question and it will automatically create
the correct format.

 

Another thing to note is the ‘Between Options:’ setting, which is located below the ‘Options’ field. This setting allows you to enter HTML code that will go between the checkboxes. To create line breaks between the checkboxes enter "" To have the checkboxes appear in a row, insert  " " which HTML for a space.

• Radio Button: A radio button is the same as a checkbox except it only allows the form user to input one answer.

 

• List: A list is essentially a dropdown list or box, but without the drop. Add options just like you would in a radio button or checkbox. ‘Visible rows’ is the setting that makes a list different than a dropdown list. For example, setting this to 5 will show 5 options. If you put more than 5 options in the ‘Options’ field, then it will create a scroll bar for the user to scroll through the remaining options. Like a radio box, only one option can be chosen.

 

• Dropdown list: This creates a dropdown list. The form user must click a dropdown box to see the options that are specified. Like a radio button and a list, a dropdown list only lets the user chose one option.

 

• Password: This is exactly the same as a textbox, but with one difference. When the form user types in this field what they type is hidden and appears as a *.

 

• Date: This puts a certain date on the page with a calendar button next to it. By clicking the calendar button, the form user can select any date.

 

• File Attachments: This creates a file uploader. The form user can upload a file to any folder on the caravel website. The ‘Saved Filename’ is set to be the same as what the name of the file that form user submitted. It is recommended to leave this at the default value. This is a useful tool.  One example of how to use this is to have the form user upload pictures. Then set the upload Folder to an empty folder. Then, by using the Folder Viewer, you can set these pictures that are uploaded to automatically appear on your website. Check the FAQ for how to use the Folder Viewer for pictures.

 

 

Once you have added all of your forms decide whether you are submitting to a non-caravel page, like PayPal for example. If you are then you might have to use the next two options depending on what site you are submitting it to. If you are submitting it to a caravel site, skip to the custom JavaScript section. Here you can add any JavaScript code to the form.

 

Step 2: Query Management

Query Management requires a whole tutorial itself. For now you can just skip this step and hit next.

Step 3. Email Options

Destination Email Address: This field is required. Specify what email you want the form data to go to when someone submits the form. This must be in the correct syntax of, otherwise it will not allow you to continue.

From Email Address:  This field is also required. Specify what email address you want this email to come from. This must be in the correct syntax of or it will not allow you to continue. This is helpful for organizing the emails that you receive that are forms, because they will all come from this specific address. This can be any email address, like anythinganything.com. For every form that is submitted you will receive an email from 'anythinganything.com'. By using the checkbox “Define ‘from’ address using a field” you can set the from field in the email to be an answer of one of your questions.

Subject: Specify the subject. By using the > button, you can set the subject of the email to be one of the answers to a form question.

Email Format: Set up how you want the email text to look. The default button will automatically include all the answers and their labels in the order that they appeared on the form. The |anything| is the ‘Unique Name’ of any of your form fields, and when it is emailed to you this will automatically be replaced by the values that were submitted into that field. Again, the default button sets everything up automatically, so nothing has to be changed for all of the questions and responses to be emailed to you correctly.

Step 4 : Text Save

This allows the same data that is emailed to be saved in a file on the website. Click the ‘Save Submission to File’ then select a folder on the website that you want to save it in.

Filename Format - This specifies how you want the name of this file to be. The default is timestamp, which will save the file as the day and time that it was submitted.

Show Metadata -This allows you to set the metadata of the file that is saved.

Step 5: Workflow Options

            Just skip this step for now by pressing next.

Step 6: Overall Options

Force Uniqueness- This makes people log on before they can complete the form. Only one form is allowed to be submitted for each user.

Allow immediate resubmit?- Allows someone to submit the form again immediately. If this is checked, then once the form is submitted it appears again. If it is not checked, then the form disappears after it is submitted, and displays the Thank you message.

Thank you Message: Text to display after the form is submitted. If left blank it displays “Successfully sent form.”

Submit Button Title:    What the user sees to submit the form. Usually ‘Send; or ‘Submit’ is a good option.

Reset Button : Displays a button next to submit called ‘Clear’. This resets all the form fields to their default values.

Custom JavaScript for Submit Button: This does exactly what you might think. It adds whatever JavaScript is in this box before all the things the button would normally do.

 

Hit finalize and your form is complete. To edit it, go to the block that the form builder is in, and press the pencil button.