Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

Elegant Contact Form in Textpattern

One of the great things about Textpattern is its capability to scale and deploy templated websites quickly. Plugins are a major contributor to this. zem_contact_reborn offers complete mail forms in a single tag, and this article explores some simple styling to make these forms look great.

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="" />

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="">
<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" />

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="">
<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" />

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.

, , ,

commentary + criticism

matthew Smith

wrote the following on Wednesday July 4, 2007

Great idea to clear the break. I hadn’t thought of that. I’d been encompassing the label and input in paragraph tags. I like your solution better :)

Jamie Phelps

wrote the following on Monday August 6, 2007

Nice article. In the version of zem_contact_reborn that I am using, the zemContactForm and zenSubmit are classes rather than id’s. Just in case anyone has problems with it.


wrote the following on Sunday March 9, 2008

Jamie —

You are right. This is my mistake; in the code examples, #zemContactForm should be .zemContactForm, etc. Thanks for the catch.

Marty Walker

wrote the following on Tuesday December 2, 2008

I’m so glad I found this.

luke perman

wrote the following on Monday January 5, 2009

I don’t understand why the code you are getting from the zem_contact_reborn plugin is different to what i’m getting. i don’t have any fieldset tags, the labels automatically generate colons at the end of them and all the required items are in bold!

not good…

Liz Harte

wrote the following on Wednesday July 8, 2009

Thanks so much! Makes the contact form look so much tidier!


wrote the following on Wednesday April 3, 2013

Thanks for the article. The plug-in is really great. I wish I had some image or file upload option.