I have moved this to a new section so that all future updates can be tracked together. The new section is here. You will need to visit the new section to download the files. This post will remain, but if you link to this page, please update your link to the new seciton. Thanks.
One of the things I hate doing is creating forms. Sadly, most webapps use them pretty heavily so not doing them isn’t really an option. What I can do is create a plug-in for Coda to do all the heavy lifting for me. Without further foreshadowing, I give you…the Form Maker Plug-in for Coda.
To get the full effect you will need to download several components. First and foremost, you will need the Form Maker plug-in. This is the main plug-in file and will do all the heavy lifting of creating your form elements. There is also a small clipping group that I use for opening and ending the form tags and starting fieldsets. Why didn’t I include this in the plug-in? Because there are many times that I am working on an existing form and need to add a new field. Having the plug-in create an entire new form isn’t as useful as the ability to create elements quickly. And finally, there is a CSS file that handles some very basic formatting to get the form working okay. You can customize this to your heart’s content, but this helps get things laid out so you don’t have to recreate everything. It also declares a few classes that you can assign to the form to change the lay-out quickly (I’ll explain more later). You’re welcome.
Get the entire bundle here: FormMaker.zip
Download and unzip that and then put the Form Maker.codaplugin file in your ~/Library/Application Suport/Coda/Plug-ins folder. Open Coda and you will see the Form Maker option in the Plug-ins Menu. While you have Coda open, open the Clips panel and import the clips into it. I’ll outline these further in the instructions. The CSS file you can store wherever you wish. but keep it handy for including in your projects.
So now you are ready to make a form. Open up your HTML document and make sure you include the forms.css file in the <head>. Now go and type form and hit the tab key. You have now started your form with a new fieldset and legend. Your cursor is in the <legend> tag so you can name it whatever you like. You can end your form by typing /form and hitting the tab key. This will insert a submit button and close the form nicely.
Your form should look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Form Maker Plug-in Tutorial</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link href="forms.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="" class="form">
<fieldset>
<legend><span>Text Fields</span></legend>
</fieldset>
<dl>
<dt><label> </label></dt>
<dd><input class="button" type="submit" name="" value="Submit" id="submit" /></dd>
</dl>
</fieldset>
</form>
</body>
</html>
Now comes the fun part. Start typing the labels of the fields you will need. The only real caveat is that you need to start with no leading tabs. So it will look something like this:
<form action="" class="form">
<fieldset>
<legend><span>Text Fields</span></legend>
First Name
Last Name
</fieldset>
<dl>
<dt><label> </label></dt>
<dd><input class="button" type="submit" name="" value="Submit" id="submit" /></dd>
</dl>
</fieldset>
</form>
So let’s take a look at the different types of elements and the options the Form Maker plug-in has for them.
These are pretty basic. Type in the label name, select it and hit ⌃T to create text fields or hit ⌃A to create Textareas. The only option is whether or not the filed is required. If it is, add an asterisk to the front like this:
First Name
*Last Name
These require a label on the first line and the contents are below preceded by a tab. Select the whole batch and hit ⌃S. These are the special options for <select>s Including an asterisk on the first line marks it as a required field. An asterisk on a content line makes that one selected by default. You can create <optgroup>s by preceding the title with a hyphen. Here’s an example:
*Select Label
-Optgroup 1
Option 1
Option 2
*Option 3
-Optgroup 2
Option 1
Option 2
Option 3
Another Label
Option 1
Option 2
Option 3
These are formatted somewhat similarly to <select>s with a label and then tabbed options underneath. Again, an asterisk on the label will make it required and an asterisk on an option makes it checked. Select the block and hit ⌃R for radio buttons and ⌃C for checkboxes. Type it out as follows:
*Radio Buttons
Yes
No
*Maybe
Checkboxes
Option 1
Option 2
Option 3
So here’s why you care about the included stylesheet. with the change of a class you can alter the layout and flow of the form. The default is class=“form” which produces a vertical flowing layout with the label right-aligned and next to the input field.
Changing it to class=“form-h1” makes it flow horizontally with the labels above the input fields. class=“form-h2” is also horizontal but the labels are now next to the input fields.
If you like the vertical flow then class=“form-v1” is a vertical flow with the labels above the input fields. class=“form-v2” is like the default layout except the labels are left-aligned.
So a simple class change will totally alter the layout without any effort on your part.
Astute observers will note that the markup is not exactly what you would expect. Each element is wrapped in a <dl> with the <label> inside the <dt> and the <input> inside the <dd>. This method of marking up form elements was not mine. It is the system we use for creating forms here at work. I happen to like it and I wrote the plug-in to help at work so I am releasing it as is. If you have a different method of marking up your forms and know a little PHP you can easily modify the plug-in scripts to mark it up as you like. Just download the Coda Plug-in Creator and open the plug-in.
Posted by Catherine Azzarello on 07/07 at 07:16 PM
This is so wonderful! I’ve not done much in the way of forms (use wufoo on my own site) so it’s always slow. Loving Coda, I’ve been collecting clips and plugins to make me more efficient. This plugin is simply awesome for me! And the style sheet change-up is pure genius.
Thanks soooo much!
Posted by a on 07/13 at 06:26 AM
thanks
Posted by Sean Schraeder on 08/06 at 10:32 PM
Thank you! I haven’t even used the bundle yet (just finished up a site and I’m too tired to dig in) but I after reading the post and checking out your site I am pretty confident it’s going to work like a charm.
Big ups, Kudos, Gracias, people like you who contribute to the community really are the cat’s ass (what does that even mean?!? I think its a good thing 
Posted by Social Media Marketing on 08/10 at 05:06 AM
I have been collecting clips and plugins to make me more efficient.This plugin is simply awesome for me.
Posted by Refinance How on 11/17 at 11:49 PM
Wonderful and nifty tool. I have always hated trying to get my forms to work, but now I can do it in Coda without all the hassle that I used to go through. Thanks!
Posted by Facebook Layouts on 12/02 at 02:26 AM
If you have a different method of marking up your forms and know a little PHP.You can easily modify the plug-in scripts to mark it up as you like.
Posted by K. Garner on 12/02 at 08:38 AM
Very true “Facebook Layouts.” It’s easy to change the markup to whatever you prefer. I did it this way because that’s the format we use where I work.
Posted by Free Facebook Layouts on 12/03 at 02:58 AM
A newblog post will be indexed separately so you have more chances to be found in the sea of the internet.
Posted by myspace layouts on 12/24 at 04:39 AM
Nice post, i found it very informative and really subjective… i hope it will benefit to other users like me…
Posted by James on 01/15 at 09:41 AM
Well done!Thanks for your job!
Posted by Who won the superbowl on 01/27 at 12:36 AM
I can’t thank you enough for this. Forms have always been such a headache for me, so I appreciate all the help I can get to get forms working on my sites. This plugin is the best!
Posted by test inside on 03/12 at 10:59 PM
I am actual blessed I begin your website on google. Thanks for the alive critique. Me and my acquaintance were just advancing to do some analysis about this. I am animated to see such acceptable advice getting aggregate for chargeless out there.
Posted by autosafety on 04/09 at 03:34 PM
Thanks for providing for us.I read your article with my pleasure.
Posted by Best Laptop Review on 07/31 at 10:41 AM
Cool plugin, i’ll give it a go. Thanks dude!
Posted by ibuybattery on 08/31 at 05:28 AM
Wow,great job! Thanks for your work.