Elegant Contact Form in Textpattern
One of the standout attributes of the Textpattern CMS is its ability to develop full-scale websites at almost unprecedented speed. The system makes template creation and site-wide implementation a snap, and coupled with some sweet plugins and an adherence to web standards, rock-solid sites can be raised from scratch in just a few hours.
The Basics
One of the best plugins available to facilitate that rapid development is zem_contact_reborn, which allows for the creation of web forms from a single tag:
<txp:zem_contact to="you@theplace.com" />
Unfortunately, the default form is a bit rough; without styling or customization, it looks like this:
There’s not much going on here. While the form is solid and accessible, without CSS, it looks like a throwback to early 90s mail forms. With a few changes to the tag and a bit of stylesheet action, we can create some nicely aligned fields.
Refining the HTML
Let’s start with the tag itself. In our example above, the tag is being used in the self-closing state; however, it can also be used as a container tag to enclose several different options, including different types of fields. The following code would produce the same form seen above.
<txp:zem_contact to="kevin@graphicpush.com">
<txp:zem_contact_text label="Name" /><br />
<txp:zem_contact_email /><br />
<txp:zem_contact_textarea label="Message" /><br />
<txp:zem_contact_submit label="Send" />
</txp:zem_contact>
However, since we want to clean up the overall structure of the form with some CSS, we’ll need to modify the code a bit. The first objective is to remove the trailing <br /> tags after each <label> tag by nullifying the break attribute, but retain the ones following the <input /> tags, which have been hard-coded already. The code would look like this:
<txp:zem_contact to="kevin@graphicpush.com">
<txp:zem_contact_text label="Name" break="" /><br />
<txp:zem_contact_email break="" /><br />
<txp:zem_contact_textarea label="Message" break="" /><br />
<txp:zem_contact_submit label="Send" />
</txp:zem_contact>
And the resulting new form like this:
Adding Some Style
Still not very attractive. However, this sets us up for some styling. By floating the <label> tag, we can nicely align the labels with the fields, like in the following example:
This simple aligning is accomplished through some basic CSS. The most relevant styles are included below, or you can download the entire segment of CSS that shows colors and typography as well.
#zemContactForm fieldset {
border: none;
}
#zemContactForm legend {
padding: 0.5em 10px 0.5em 0;
width: 60px;
}
#zemContactForm label {
float: left;
width: 60px;
margin: 0.3em 10px 0 0;
text-align: right;
}
#zemContactForm br {
clear: left;
}
#zemContactForm #zemSubmit {
margin: 0.5em 0 0 70px;
}
As you can see, the labels are floating to the left and given a defined width, so the input fields fall naturally in line to the right. The <br /> tag after each <input /> tag then clears the float and resets the stage for the next block-level element. The Submit button is attributed a left margin to equal the sum of the labels’ width and margin, so it lines up nicely with the input fields.
I use this plugin on almost every website I do, and I re-use this snippet of code and CSS over and over, so new mail forms can be implemented in mere seconds after the plugin is installed. Feel free to copy and paste whatever bits are useful.
Comments.
matthew Smith
- wrote the following on Wednesday July 4, 2007
Jamie Phelps
- wrote the following on Monday August 6, 2007
Kevin
- wrote the following on Sunday March 9, 2008
