Using a simple Form editor Mosaic Site Creator allows you to create fast and with minimum of effort different types of web forms that can help you interact with your site visitors or gather user information. The Form editor is very similar to the Text and Image editor, with a set of additional controls for customizing your forms.  It lets you add all types of fields and controls needed and arrange them as you like to get any type of web form -Feedback form, Product / Service Information Request forms, Subscription forms, Surveys and Questionnaires. You can also define what will happen when the form is submitted - it may send an email, post the information filled in the form to a forum or blog on your site or may join the users who submitted the form to a mailing list.

 

How to add a web form to your Mosaic Site Creator website

Adding a form to your website is easy and does not require any programming.

The form, just like the Hits Counter, HTML Snippet, Mailing List and Form/Blog is an advanced element and you will need to enable it before being able to add it on a page. To do this, roll-over the Control Panel icon in the top right corner in Admin view and select Advanced Elements. Check the box in front of Form and press Update. The option for adding a Form will now appear within the menu of any Area or other object icon. Note that Advanced elements are enabled per working session. So, the next time you log in and wish to be able to add an Advanced Element - you should repeat these steps.

 

To add a Form to a page, rollover the Area  or any other object icon and select Add > Form. The Form editor will open up with a button displayed. The Submit button is a mandatory part of each form and you can't delete it.  Above the Submit button you may add any type of form fields you will need - text field, text area, select field, checkboxes, radio buttons and arrange them appropriately. You may also add a button just next to the Submit button to clear the fields if needed.

 

Review of the different types of fields you may have in your form

 

1. Text Field

 

The Text Field may be used in your form to type text which is fairly short, and does not need to be split in lines. To add a Text Field press the  button from the Form editor tools menu. Now click over the Text Field you have added and you will see a set of options displayed in the right pane of the Form editor.

• The Type is the type of information users will fill into this form field. If you select type Text, the text users fill in will appear just as they typed it. If you set type Password the text will appear as **** so other users may not see it. Type Hidden can be used when you need to gather system-related information (like IP or browser used to submit the form) or add data which users should not see. A hidden field will not be visible on the page.
• The Name, just like the name of a person, is used to identify the form field when you need to refer to it anywhere inside the form editor as well as in the email / blog entry generated by this form. That is why each form field should have a unique Name.
• You may adjust the Width of the text box either by typing a different width number or by just dragging the resize controls of the field text box (the resize controls will appear when you click over the form field).
• Max Length is the maximum number of symbols this form field can accept. Your form may visually be very short, but it will accept as many symbols as you define in Max Length.
• Validate As field will let you define the type of content users are required to fill into this form field. If they don't fill in the proper content type - they won't be able to submit the form. E.g your form field Email may be validated to accept just content type Email. Thus if some user submits a form with incorrect email address (like me@yahoo or meyahoo.com) on trying to submit of the form the user will see a notice to correct the email.
• Default Value - This value will be pre-filled upon opening of the form and the visitor will be able to change it. The following special strings will be replaced with the corresponding values:

$date  - Date in format YYYY-MM-DD

$date_time  - Date and time in format YYYY-MM-DD HH:MM

$browser_ver  - Browser version and type of operating system

$referrer  - The page the visitor came from (referrer page)

$ip  - Visitor's IP address

 

 

2. Text Area

 

The Text Area form field is similar to the text box field but can hold longer, multi-line text.  Add a Text Area from the form editor > . Click over the Text Area field you have added to see its customization options displayed to the right.
The options Name, Width, Validate As and Default Value are identical to those of the Text Field. In addition, here we have :

• Height of the text area - you may change it either by changing the number in the height field or by dragging the text area size controls.
• Wrap - defines the wrapping of the submitted form field text when displayed in an email or forum / blog. Choose Default value to have your browser and mail client (Outlook, etc) wrap the text according to their default settings. Set wrapping Off to disallow the wrapping of the text when it is typed. Choose Physical to display the text in the mail the way it was wrapped in the text area. Choose Virtual to allow the mail client to decide how exactly the text should be wrapped.

 

 

3. Select Field

 

The Select Field is a box with a dropdown list inside, or a box with several options displayed one below the other. Add a select field from the Form Editor >  button. Click on the select field you have just added and you will see its properties again to the right. The new options we see here are:

• Type - if you choose Menu type the select field will be a dropdown with options. If List is selected, the available field options will be listed one below the other.
• The Options will be displayed as variants for selection in your Select Field. The Option Name is the exact text to appear in the dropdown / list, and the Option Value is the text that will be sent to you in an email or posted to a forum when the corresponding option is selected. Using up/down arrows you may rearrange the options in the dropdown or list. You can also delete options as well as choose a specific option to be selected by default. 

 

 

4. Checkboxes

 

Checkboxes are used when there is a lists of possible options and the user can select any number of choices from them.  A stand-alone checkbox can also be used for a single option the user can turn on or off.

Add a checkbox from the form editor >  and select it to see the customization options in the right pane. 

• The checkboxes just like all other form fields have a Name which identifies the  field in the form and template editor as well as in the email/blog entry generated by this form. You may consider the Name as the question your users will have to answer by checking or un-checking the checkboxes associated with it.
• The Value of the checkbox is the answer you will get on your question. I.e if you set the checkbox value to Yes when the users checked this checkbox this means they answered affirmatively to your question.
• If you check the Default State option, your checkbox form field will be initially checked when the users load your form.
• And finally, if you make a checkbox mandatory users will be required to check it before being able to submit the form. E.g if you want them to agree to your Terms and Conditions before they may submit the form - add an Agreement checkbox and make it Mandatory.

 

 

5. Radio buttons

 

Radio buttons are used when there is a list of several mutually exclusive options - i.e. the user can select just one option out of all available. The radio buttons related to one question form groups - clicking a non-selected radio button will deselect the rest radio buttons in this group.

Add a radio button from the form editor > . Now click the radio button to see the customization options for it displayed to the right.

• All radio buttons representing the options for one and the same question must belong to the same Group. I.e. the Groups are the questions which will have radio button answers.
• The Values of the radio buttons are the actual answers to your questions. The value gets posted in the email / forum when this radio button is selected.
  Imagine your question was Do you like my site and you want to give the users 3 options: Yes, No and Needs more work. Your radio button group may then be named 'LikeMySite' and the Values of the radio buttons will be Yes, No and Needs work.  If a user selects the radio button with value Yes, in the email or forum where the results of the form get posted you will receive this information asLikeMySite: Yes
• The Default State and Mandatory options work the same way as described for the checkbox field.

 

 

6. Reset button

 

When pressed, the Reset button will clear all form information filled in by the user. To add a Reset button click the icon in the form editor. The only option associated with this form field is the Caption - this is the text that is displayed on the button. Usually the Reset button is positioned next to Submit button.

 

 

7. Submit button

The Submit button is the main functional element of the form - it sends the information filled in by the user in your form to an email, forum / blog or mailing list, depending on the settings you have specified for your form. Your form can't function without a Submit button, that's why you are not allowed to delete it.  A single form can have only one Submit button.  Click on the Submit button to access the available customization  for the form as a whole. 

As Name you can specify the name with which you will identify your form. As Submit Caption specify the text you wish to be displayed on the Submit button. From the Next page setting you can define which page from your site should open after successful submission of the form  (it may be a Thank You page for example). The Actions listed in the Form properties panel define how the information submitted by the user with this form should be processed. We will review all available form actions and the settings for them in detail below.

 

 

Form actions

To complete the form we need to specify what the Submit button should do.

• Should it post the information submitted to an email?
• Or maybe submit some of the content in this form to a forum or blog on your site?
• Or just join the email entered somewhere in your form to a mailing list on your site?

Lets review each of these options and then see how to set your form to do one or all of the above.

 

 

Click the already added   button. The list of available Actions for the form will appear in the right pane of the Forms Editor - Send to Email, Submit to Forum, add an email filled in the form to a Mailing List added to your site. Checking any of these options will open a set of advanced preferences.

 

1. Send to Email

Lets say you want to send the contents of your form to your email.  Check the Send to Email checkbox, and in the options that will expand. As To email specify the address to which all submitted forms should be addressed. As From specify the address from which the form will be sent.

Set a Subject of the mail that will be received on submission of the form (like New Information Request) and Format of the mail. If "Plain" is selected any formatting will be lost. If "HTML" is selected the submitted email will be displayed in HTML format if your mail client supports this option.

 

To display additional information and/or apply special formatting to the mail containing the form data submitted, choose Use Template option and a Template Editor will open.

The Template Editor resembles a simplified Text and Images editor, and has its own Save and Cancel links which will let you save the template or go back to the Form editor. The Template Editor will let you apply your own formatting and include in the email body the value of any field from the form. Use the Value dropdown on top right of the Template Editor to insert placeholders for the desired field values in your template. You will see that all form fields you have added to your form appear in this dropdown referenced by their Name.  After your template is ready and saved, each submission of your form will result in an email sent to your email, and the content of the email will follow the content structure you have set in your Template.

2. Submit to a Forum or Blog

If you want to submit the form content to a Forum or Blog on your site select Submit to Forum checkbox a panel with detailed preferences will expand. Select a forum / blog that you already have on your site. Then in the Fields Map section define the mapping between the form fields and the mandatory fields for each forum posting:

Posting Title, Posting Content and User Email.

As with Send to Email option you may choose to use a Template instead of the fields from the Posting Content dropdown. If you select Use Template you will be able to define your own formatting and have include any other field from the form.

 

3. Add to Mailing List

By selecting the Mailing List checkbox all emails submitted through your form will be added to a Mailing list on your site. In the set of options that will expand specify the mailing list to which the submitted emails should be added. In the Fields Map section specify which fields in your form should be mapped as the Email and Subscribe fields. If you wish users to be added to your mailing list only after their email address is confirmed  - check the Confirmation checkbox and they will be receive a confirmation email with a link they need to follow in order to confirm their subscription. Otherwise, users will be immediately joined to the selected mailing list. 

These are the basic available Form Actions. Please note that depending on the purposes your form should serve you can choose to a combination of actions performed on Submit. I.e - your form can both post to a Forum / Blog, send a notification email with the results and subscribe the user to a Mailing List. For an example of combined actions - please refer to the sample usage of a Form in setting up a Guestbook on your site.

 

4. Send Confirmation Email

This will allow you to send a timely response to your visitors notifying that their information has been proper submitted and will be processed shortly. After you select the checkbox for the Send Confirmation Email option, a section with additional parameters will expand. In the To dropdown select the name of the field in your form where visitors will fill in their email. This will assure that the confirmation will be sent to the email address provided by the user. It is recommended to set email validation for this field to make sure it will be a valid email address. Then, in the From field enter the address from which the confirmation message will be sent. In Subject fill in the desired subject of the confirmation message. Select Plain or HTML Mail Format. If you want to modify the text of your auto-response message, click on the Template Edit option.
 

Form Wizards

For ease of use Mosaic Site Creator's Form editor features two ready form wizards - Feedback form and Mailing list form.  They come with ready fields and predefined settings that you can easily modify if you wish, To add to your site a ready mailing list or feedback form use the wizard icons from to tools panel of the Form Editor -   for Mailing list form, for Feedback form. Apply modifications if needed, move the already available  button to the end of the form, specify appropriate action and you are all set!

 

 

For a detailed personal introduction and advice on integrating forms in your site - please schedule a personal consultation call with Mosaic Site Creator Web Consultants. For questions or issues with specific form features contact Mosaic Site Creator Support.