You are here: : Create Website ► Addons ► Contact Form

Contact form for the website

Last updated on July 8, 2009 at 05:19 pm

Normally you add contact information on your website. You can use your e-mail (bad idea because of spam). Or you add a contact form where the visitors can fill some fields and submit it. An e-mail is generated from the information entered into the form and sent to the e-mail address you have defined. Generally, for any kind of forms on your website you can use module FormBuilder. This addon is really powerful allowing you to built any complex forms.

Features of module Form Builder

Create and edit one or more forms on your website
Optional anti-spam feature (limit to 10 emails per IP address and hour)
Create standard input fields (text, check box, drop-down, date picker, file upload etc.)
E-mail specific fields like subject or From-address and e-mail validation
Pre-defined fields already filled with countries or states of the U.S
Controls like fieldset, hidden fields or instructions to the fields
Multi-page forms
Store submitted information in the database, text file and / or send to e-mail
Export and import form settings to use on other websites
And even more (please read Help for sophisticated forms)

Live examples

Standard contact form made with CMS Made Simple

Customized contact forms made with CMS Made Simple

To install the module go to the admin panel. Select Extension → Module Manager and choose the letter "F" in the list of available modules. Click on "Download & Install". The FormBuilder module is installed successfully.

After installation two forms can be found in Extensions → Form Builder. The first one is the standard contact form you can see in live example above. In the column "Form alias" you see the tag to add the form on the website. Create a new content page (Content → Pages) in the admin panel. Fill the "Title" and "Menu text" with "Contact us" or something like thins and add to the content field:

{cms_module module='FormBuilder' form='contact'}

Press "Submit". Control the output of contact form on the page.

The form has not layout so far. But there is a stylesheet automatically installed with FormBuilder module that you can attach to the template. Go to Content → Pages and click on the template name in the column "Template" beside your "Contact-us" page. The template is opened. Click on the blue CSS icon beside the button "Apply" to attach a form style. On the next page choose "FormBuilder Default Style" from the drop-down field and click on "Add a stylesheet". The style is now added to the list of stylesheets that are associated with this template. Control the layout of your contact form on the page again.

Configure the contact form

If you press on the button "Submit Form" in the contact form the submission template is shown saying that the form has been sent. But to what e-mail address? And what about required fields that must be field? You have to customize your contact form before it is able to send mails to your e-mail address.

In the admin panel select Extensions → Form Builder and click on "Contact Form" in the list of forms. The complexity of the admin area of FormBuilder shows how powerful the module is and it just impossible to describe each single field and setting here. The goal of this article is to configure contact form to send you e-mails generated from the visitors' submission.

In the section "Form Fields" click on the field "Send to".

Sendto field

You have to change 4 fields shown in the picture below.

Sendto settings

Enter the subject of e-mail message sent from contact form.
Enter the sender name, e. g. your name or the name of your website or your company. This name will be shown in your e-mail program instead of e-mail address.
Enter a valid (!) e-mail address to define the sender e-mail. This e-mail must exist and been configured. Test the e-mail with CMSMailer module, put it into "From address:" and send a test message. If you do not get a test message from this address then you can not use this e-mail here! Choose another one.
Enter e-mail address where the messages have to be sent to. Naturally It must be an existing e-mail address as well. You can enter here the same address you have entered in the 3rd step.

Press "Update". Go to the contact page on your website, fill in the contact form and send it to test the incoming messages. For the most common issues see CMSMailer problems.

Required fields

To define what fields are required and what fields are optional click on the red cross resp. green tick in the column "Req'd Information":

Required Fields

Tips

You can delete "Contact Fieldset" and "fieldset end" in the list above you do not like the red border around the form.
Click on "Your Email Address" in the list above and set "Field Validation" to Email Address so that invalid e-mail addresses are not accepted.
Click on "Your Email Address" in the list above and select Never in the field "Send User a Copy of Submission?" You can leave the default value but be aware that sending a copy to the visitor will reveal your e-mail address as well. This can lead to unwanted communication bypassing the contact form or even spam.

You can protect your form by enabling captcha. Go to Extensions → FormBuilder and click on "Contact Form". In the tab "Captcha Settings" select "Use Captcha to protect form submissions?". Module Captcha has to be installed to use this feature.

◄◄ Photo gallery || Event Calendar ►►

bruce

November 13, 2009 at 05:02 pm

hi Sophia,
love your site and all the great information in it. if you have a moment i would really appreciate any advice you have on the handling of errors and cancellation of the 'add a comment process'. out of the box this area seems unfinished, but maybe im missing something?

your comment frm seems to have no cancellation option, either before or after an error warning
nom

March 9, 2010 at 01:05 pm

Thanks for the intro!