Activity 3-4–Adding CAPTCHA to the Contact form

These days, there’s a factor of spam form completion to legitimate that seems like 10:1. To prevent that, we’re going to add a CAPTCHA to the form.

1. This activity requires that the CAPTCHA module be installed and configured. Information about this can be found at http://drupal.org/project/captcha. CAPTCHA is a means of ensuring that the author of information being submitted is a human and not a ‘robot’ or ‘web crawler.’ Sometimes the user is asked to identify characters that appear in a graphic, sometimes they must identify the object shown in an image,or complete a simple math problem, and so on. We can begin by navigating to the CAPTCHA settings page (admin/user/captcha).
2. The page lists the contact_mail_page and contact_user_page as forms that can have CAPTCHA set for them, but neither applies in this case, since we’re using a form in a block in a view. We’ll enable the CAPTCHA challenge for the user from the user form itself, but here we need to turn on the admin link to do so, so check the box labeled Add CAPTCHA administration links to forms which will provide a link on the form for us as long as we’re logged in as the administrator.
3. Having saved that change, return to our form. There, find a new link that opens as shown in the following screenshot:



4. This brings up a dialog that allows us to choose the CAPTCHA type. Choose the type that provides an easy math equation.



5. The result is the link changing on the form, to show us that CAPTCHA will be enabled. Why can’t we see the CAPTCHA challenge, though? Because admins don’t have to submit to a CAPTCHA challenge, so log out and look at the form.

Adding a Contact info Attachment view

With our contact form complete, it’s time to complete our Contact Us page. We’re going to add an attachment display to the Contact Us view that will provide other contact options. Actually, we have other options available to us. We could create this display as a block, or, since our current view has no node to display and the additional contact information will be a node, we could just have it shown by the existing Page display.

We’ll use an Attachment display instead of a block display simply because we don’t want to use one of the block regions for the output, and we’re already using the Content region for a block (the form). We’ve chosen not to use the Page display because it’s easier to theme the output with one part of the content being a separate display. Then, its content is provided in a separate variable for us, so we’ll use an Attachment display.

Activity 3-5–Creating the contact-us Attachment view

1. We need to create the content for the Attachment view. We’ll be using a custom content type, Location, for this. Let’s create the content (node/add/location).
2. We’ll give the content a title, Guild Builders Contact Information.
3. For the body, we’ll create a <div> and put the contact information in it.

This step requires the embed_gmap module. Information about this module can be found at http://drupal.org/project/embed_gmap.

4. Next, we’ll get to the field that makes this content type different, the map. The embed_gmap module takes the content of the map field and uses it to produce and embed a Google map. Enter the address in this field.
5. We’ll save the content, which is shown in the following screenshot.



6. With our content created, we’re ready to create our Attachment display. Edit our Contact us view (admin/build/views/edit/contact_us).
7. Create a title for the view, and name it Guild Builders Contact Information, also create the header information, to appear beneath the title.
8. The next thing to do is create an Attachment display for our view.



9. That takes us to the View control panel.



10. We’ll start with the Filters pane. Click on the Node: Post date filter we have, and click Override, so that our changes only affect the Attachment display. Then click Remove, because we don’t want this filter for our Attachment.
11. Click the + icon to add a filter. We created a piece of content, of the Location content type. Therefore, we can create a filter to select only the Node: Type of Location, and another to specify that the node is published, in case we ever have more than one version of that content, so that only the one that is published will be selected.



12. In the settings dialog for the filter, specify that Published should be Yes.



13. Next, we’ll specify that the Attachment be attached to the Page display.



14. The last thing we need to do is add a small entry to our CSS file, so that our map and contact information will appear side-by-side.

/* Contact-Us page settings */
#contact-us-info, .field-field.map {
  float: left
}
#contact-us-info {
  margin-right: 1em;
}

And with that, and two images that show our Attachment display (which is too large to fit on the page in one image), we’re done!

Summary

We learned what the default Contact system does, and how to add just a little pizazz with an Attachment view. We learned how to add the Contact form to a view, and used Drupal’s module architecture and hook mechanism to modify that form by creating a small module. Finally, we created an Attachment view to add content to our Contact page.