Setting up a contact form for Drupal

Drupal vs WordPress

As told in the previous Drupal article, Drupal is far to be “click and we are done” sort of CMS as WordPress. In WordPress, even for your first time installation, setting up a captcha’d contact module will take 15 minutes. In Drupal, if this is your first time, this will easily take a couple of hours. I thought hence it’s important to document the steps.

Module activation

To begin with, given that Drupal has three kinds of modules, the good news is that “Contact” is part of Drupal’s core module. Let’s go to Administer > Site building > Modules (admin/build/modules) and click beside “Contact” to check it from the list of available core modules. We will next submit the page using the Save Configuration button below.

Contact settings

For the next part, we will browse to Administer > Site building > Contact form(admin/build/contact) and will click on add category. We will add a demo category here, let’s say “Website feedback“. In the next field, Recipients, we will add the email address of the website administrator. We can also add an “auto reply” in the next field. Let’s add a weight, selected = yes and then move to settings after saving the configuration.

We will now see that a contact form is created in the list tab, as below. The form just created, can be found by browsing to /contact while still logged in as admin.

Getting the captcha spam protection

We will add a captcha to our newly created contact field protect against spams now. Here is the link. Once we have downloaded the latest version, we will unzip this, and will upload the “captcha” folder to our server’s /sites/all/modules directory.

Captcha settings

Let’s go to Administer > User management > CAPTCHA (admin/user/captcha) and start by setting up the Default challenge type under the Form protection block. We will then add challenge types to individual items, where we can choose among none, math and image. We can also click on Add CAPTCHA administration links to forms and set up other details below as per our taste. Save configuration.

Image Captcha settings

We can next click on the image captcha link above to tweak with the image captcha settings. We can set up the default characters to use in the code, code length, select the fonts, font-size, character spacing, etc. Also you can play around with the distortion and noise level. Be careful (hit and try is the best option) not to add too much distortion / noise to make the captcha illegible.

I have got the above image captcha look by using Code length: 5, Fonts: #2 and #3, Font size: 30pt, Character spacing: normal, Background color: white, Text color: black, Additional variation of text color: moderate, Distortion level: 5, Smooth distortion: 0, Add salt and pepper noise: 1, Add line noise: 1 and Noise level: 1.

Introducing reCaptcha

reCaptcha is an interesting alternative to the traditional math and image captcha, and as you can see, it is visually more appealing and gives more option to the end user. To use this, we will have to download this from here. Like before, we will unzip and upload this to the /sites/all/modules directory.

reCaptcha settings

The admin/user/captcha page will now hold a link to reCaptcha, and on clicking the link, we will see that we will need private and public keys to use reCaptcha in our site. Getting the keys are instant however, like getting the Google API key (reCaptcha is a Google project). Once we have added the keys, we can tweak with the theme settings and after saving the configuration, we can go to the Captcha tab above, and do changes if we feel.

Alternative Captchas

We also have to choice to choose some alternative captchas proposed by other developers, like text CAPTCHA or the Egglue CAPTCHA.

Setting the permission right

Even if the contact form is by now installed in www.example.com/contact address, you will see an access denied page if you browse there. To see a proper contact page there, let’s set the permission right. Rendez-vous for this at Administer > User management > Permissions (admin/user/permissions). Let’s find the contact module> access site-wide contact form and check the anonymous user. The page www.example.com/contact on refresh will now show the contact page.

Integrating into menu / navigation

Okay, let’s now go to Administer > Site building > Menus (admin/build/menu) for the final step. Once there, under the List menu tab, we will click on Primary links, and then Add item. In the form, Path: contact (assuming that in Administer > Site configuration > Clean URLs, the Clean URLs: are Enabled), Menu link title: anything you find suitable, say Contact us. Also, Enabled: 1, Expanded: 0, Parent item:<Primary links>, Weight: 0 (you will have to play around with this value later).

And that’s it. The contact form is up and ready. Go and check the front end of your website. Cheers.