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.
Download and unzip the file 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.
Bandwidth isn't free, and creating things like this takes time. If you find these things useful then maybe you might consider making a small donation. It helps offset my bandwidth cost and will help me to keep improving them. Thanks.
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.
Posted by Pink Laptops on 11/12 at 04:14 PM
I never could get my head around coda, i guess it’s time to dig it out again and take a closer look as it does seem quite usefull and powerfull.
Posted by Illustration on 02/08 at 06:16 AM
Thank you for the pluggin, I was looking for something similar for Coda ))
Posted by Peter Lloyd on 02/28 at 03:15 PM
Nice looking, but it doesn’t work. Installed, shows up under plug-ins, followed all directions, step-by-step, form code in page, named legend, typed field name, select, hit ^A… Nothing happens.
Any help out there?
Posted by powerchargerbattery on 04/21 at 02:07 AM
High quality battery | Supply High Quality Battery Charger
Posted by seo on 05/02 at 02:07 AM
SEO firms tend to be rather wordy - they’re pressing the limits of search engine ratios. They know that as an seo firm, their goal is to get a website into the top of the search engine results. Once they’ve done that, they’ve completed their job. They aren’t there to write sales copy or think of a catchy, brand-building slogan.
Posted by Ryan on 06/21 at 10:52 AM
Great guide to follow here as well as step-specific instructions. Sometimes people make things so difficult to follow and you have to repeat the process. This was a great help, thanks.
Posted by Apostille on 06/21 at 08:27 PM
Think of a topic for your own web page. Now create your own HTML text file that includes a <title> tag and a few introductory sentences. Save the HTML file and reload it in your web browser.
Posted by Carefree Estates on 09/20 at 05:50 AM
Their solutions for emergency and secure communications provide an ideal platform for the rac six, enabling incident commanders to maintain complete awareness of their region’s critical assets, threats or hazards, and vulnerabilities throughout an emergency. Thanks for sharing.
Posted by equality on 09/30 at 01:51 AM
It’s a great tool but quite complex because it’s designed to be distributed to millions of people not specifically for your site. So this project is going bypass a lot of the things that the profile plugin does that make it both super flexible and a bit ovewhelming. Thanks for sharing.
Posted by atelier theatre paris on 10/06 at 01:44 PM
This tutorial is genius. Thx so much!