I use the Secure PHP Form Mailer plugin from Dagon Design for my contact form - I like it because it is simple, it allows you to set up a contact from easily, but also lets you create more complex forms if needed. My only gripe with it is that some of the HTML code it generates is not as standards compliant or semantically structured as it could be, time to get my hands dirty.

Before I go any further I have to make it clear that I am no PHP expert, in fact I hardly know any PHP - I’m learning but for now I’m just stubborn and persistent.

Here’s how I have tweaked the code. The form that the plugin generates is fine and validates. However, while I was testing how the missing field errors were displayed I noticed that they were piled up on top of the first form field. (please note I am using my own CSS to control the form elements not the CSS file that comes with dd-formmailer)

The source code for this was interesting:

1. <div class="ddfmwrap">
2. <div class="ddfmerrors">Errors!</div>
3. <div class="errorlist">Missing required field 'Email'<br />
4. Missing required field 'Subject'<br />
5. Missing required field 'Please confirm that you are not a spambot'<br />
6. Missing required field 'Message'</div><br />
7. <div style="clear:both;"><!-- --></div>
8. </div>

As you can see that despite being given the class of ‘errorlist’ the markup is not actually a list, just text in a <div> made into a list using line breaks. It also contains a <div> with some inline CSS. Whilst this code validates, it is not semantically correct. In addition the lack of any formatting elements such as <p> or <li> makes the typography hard to control and the culprit for the error list text stacking up on top of the label for the first field.

A much better (and semantic) way to present this would be:

1. <div class="ddfmwrap">
2. <h4 class="ddfmerrors">Errors!</h4>
3. <ul class="errorlist">
4. <li>Missing required field 'Subject'</li>
5. <li>Missing required field 'Please confirm that you are not a spambot'</li>
6. <li>Missing required field 'Message'</li>
7. </ul>
8. </div>

So I had a look around in the script for the formmailer (dd-formmailer.php) and found code that controls the error list:

1. if ($errors) {
2. $o .= '<div class="ddfmwrap"><div class="ddfmerrors">' . DDFM_ERRORMSG . '</div>';
3. $o .= '<div class="errorlist">';
4. foreach ($errors as $err) {
5. $o .= $err . '<br />';
6. }
7. $o .= '<div style="clear:both;"><!-- --></div></div>';

and changed it to:

1. if ($errors) {
2. $o .= '<div class="ddfmwrap"><h4 class="ddfmerrors">' . DDFM_ERRORMSG . '</h4>';
3. $o .= '<ul class="errorlist">';
4. foreach ($errors as $err) {
5. $o .= '<li>' . $err . '</li>';
6. }
7. $o .= '</ul></div>';

which gave me the following:

Much nicer! I also changed the DDFM_ERRORMSG form ‘Errors!’ to something a bit more friendly (to do this you need to go into the ‘lang’ folder of the ‘dd-formmailer’ plugin, select the file that coresponds to your language, open it up in a text editor and change define('DDFM_ERRORMSG', 'Errors!'); to anything you like e.g. define('DDFM_ERRORMSG', 'Whoops! There were some errors.');)

Now that I have a nice semantic list, I can make it a bit more funky using a little bit of CSS to give me:

Lovely!

Well. that’s it for my first tutorial. Hope it was helpful.

This entry was posted on Thursday, April 3rd, 2008 at 12:00 am and is filed under PHP, semantics, tutorial, typography, wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. 2 Comments