Here are some notes on configuring the Contact Form module for Drupal:

Activate The Module!

That’s right, browse to Administer / Site Building / Modules in your site and activate the Contact module. Save the configuration and you’re ready to go.

Configure The Contact Form

Browse to Administer / Site Building / Contact Form to begin. Click the link at the top of the page to Add Category.

• Give the category a name. I’ve used “Contact Site” (where site is the name of the website).
• Configure recipients. You can put in a single email address here, or multiple addresses separated with a comma. I’m using info@domain.com.
• If you like, you can configure a polite autoresponder to send an acknowledgement back to the visitor.
• Take note of the weight setting – if you have more than one category in your contact form, you’ll have to set the weight so that the fields are ordered in the right manner.
• Since we have only one category, we’ll ignore the Selected setting for now.

When you’re done configuring, click Submit to create the contact form category.

This basic setup with give you a form with fields for name, email address, subject and message. There’s also a check box that allows the sender to receive a copy of the message.

Configuring Contact Form Settings

You can customize the contact form message text by browsing to Administer / Site Building / Contact Form / Settings. This page also allows you to set maximum messages per hour – an anti-spam setting that prevents you getting bombarded with contact form spam!

You can also allow members to have a personal contact form which relays emails to the address they have in their profile.

Integrating Into Site Navigation

When you activate the Contact Form module, a menu item gets created for the page (which points to yoursite.com/contact. This item is disabled by default, so you have to enable it and move it to the desired place in your navigation.

To do this, browse to Administer / Site Building / Menus. Find the Contact Form link and click the enable button. The edit form should appear.

You can change the title of the contact form if desired, but the important items are the Parent Item field and the Weight. Set these according to your navigation structure and you should notice the link appearing when you refresh the page. You might have to fiddle with the weight of the item to get it in the right position.

Testing The Form

You’re nearly finished. Just don’t forget to test the form by sending a quick message through it!

[tags]Drupal, Tips, Web Design[/tags]

I’ll make my best efforts to ensure that the pages can be viewed properly in the majority of web browsers, and I’ll do my level best to test that the code is accessible and valid.

That’s why I find this post by Eric Meyer disturbing. Eric points to a recent trend where people are developing iPhone-only websites. Now, these folks are likely cashing in on a trend, aiming for ‘cool points’ by supporting the latest Apple mega-gadget, but to exclude the rest of the web?

I’ll put it this way: web standards allow you to serve up a different stylesheet depending on the device. You can have the same page, the same underlying (X)HTML code, but a different stylesheet that caters to the device in question. So why lock non-iPhone users out?

As Eric says in his post:

I might be willing to entertain the argument if the iPhone’s browser were some specialized non-web contraption. It’s not. It’s a full-fledged XHTML+CSS+DOM browser that happens to lag a bit in some implementation areas and won’t run some plugins.

What percentage of the web browsing population is using an iPhone? Take a look at your web stats and find out. Internet Explorer is still a dominant force, FireFox (from my stats) has about a 12-16% market share. Safari, Opera and Camino have less than 5% market share combined. Looking at my own stats, I see a few rogue handheld devices connecting to my sites, but why create a bespoke site for iPhones, Sony Ericssons or whatever else?

Perhaps I’ll be proven wrong, and the iPhone will gain some kind of global dominance to rival the two main browsers. Maybe then I’ll have to give it some more thought. But in the meantime, I’ll concentrate on making my pages work for the majority of the market, thank you very much.

[tags]iPhone, Design, Web Standards, Compatibility[/tags]

In most of the standard Drupal themes, the Preview, Publish and Delete buttons are styled in the same way, which gives equal visual weight to each button. Arguably the most dangerous would be to mistakenly click on the Delete button and wipe out a draft post!

This simple tutorial shows how to style the three buttons so that the Publish button is most prominent, Preview is next and the Delete button is displayed almost as an inline link. Excellent notion, slightly marred in that the solution isn’t particularly accessible for those with poor or no vision (I think the guidelines say that you shouldn’t use color to provide meaning).

Though Mani touches upon the basic benefits of streamlined CSS/XHTML design, like improved accessibility, page loading and search engine friendliness, she focuses mostly on the long-term benefits of the Standards-based approach.

How easy is it to approach a redesign in the future?

Well, Mani suggests approaching the XHTML structure first, regardless of what the final design will look like – Let’s code our XHTML as if we plan to have 10 different designers apply their own unique layouts to it. If we can do it that way, then we will be able to execute minor or even major design overhauls without touching a single page in the site.

The logic of this idea is carefully explained through experience of several site designs and subsequent realigns, which were achieved with virtually the same XHTML structure.

I must say, this idea appeals as a designer. The closest I have come to this in the real world is through adapting the Sandbox theme for WordPress.

Sandbox is an incredibly complex and powerful WordPress theme that makes the best possible use of semantic XHTML, even implementing Microformats where they can be identified.

The idea behind Sandbox is that it can be skinned completely through CSS, and is flexible enough that you can move containers around in the CSS rather than constantly change your XHTML.

Essentially the whole idea harks back to the ethos behind the CSSZenGarden site: one well-formed XHTML document can be styled in unlimited ways with the right creative input. Very good article and a reminder that we should be striving to improve the art of web standards, not merely resting on our laurels!

I’ve just discovered the Operator extension for FireFox, which is a plugin to detect and debug microformats on any web page. I’ve tested this on a couple of pages I’m working on, and it’s extremely useful.

You can use Operator to debug your microformats. Holding down the Ctrl key when you select a microformat action will show you the HTML that corresponds to that microformat. In addition, holding down the Shift key when you select a microformat action will display our internal representation of the microformat data.

The difficulty with microformats thus far is that they’re generally invisible to users. To see widespread adoption of the microformat standard, we need to be able to detect instances on a webpage and then be able to do something useful with them. For example, Operator gives us the ability to export vCard information to Outlook (at least that’s how it worked for me).

The one drawback of Operator is that it adds yet another toolbar to Firefox, which has the effect of cluttering the screen and further reducing the viewable area. Perhaps dropping this to the status bar would be a better solution?

Regardless, Operator is hopefully a tentative step forward for the Microformats movement! I haven’t mentioned Tails Export, by the way, because it’s still not compatible with Firefox 2.

Anyway, Cameron recently posted some useful grid images that you can use in CSS design to see how if your containers are complying to your spec or if there’s a problem. You simply apply the image as the background image for the container element and then you can refer to it as you work. Highly useful!

I’m working on taking all my blogs to a 950px wide format in the near future, so I’ll be road-testing this technique in the weeks ahead!