5/23/13
In this article we have a look at the Accessify Quick Form Builder.
As you can see there’s not much to it. For the purposes of this tutorial, I’m going to enter some basic values, similar to what you’d find on a squeeze page. One exception will be the addition of a field for a phone number.
- First Name
- Email Address
- Phone Number
Here’s what this looks like on the interface.
In this step I’ve enabled Mark All Fields as Required. Here are the other settings:
- First Name: Text Input
- Email Address: Email address
- Phone Number: Telephone Number
Here’s the popup where you can test out different field options. As you can see, there are many control options you can choose from.
In this step you choose some markup options. In this case I chose to enable Create name/id’s, Prefix field, and Create ARIA. In the Form Name ID I used: newCustInfo and in the Help text area I used the word: REQUIRED.
Above is the completed form. Note the warning about the HTML5 options that I’ve chosen and that there may be an issue with some browsers. You’re prompted to provide a JavaScript alternative in case the browser doesn’t support the HTML5 types used in the form.
Below that is the form code you can use in your HTML editor of choice for further styling.
Note that if you’re not satisfied with the results, you can start over. As you can see by the steps above, it only takes a few minutes to create the form.
In addition to the instructions above, here’s a video which explains the process in more detail.
Below, I’ll paste in the code from the form so you can see how it works.
As you can see, the form is pretty straightforward.
Note that in the last step, you have some CSS you can use to stylize the form, which looks like this:
div.row {background:#ffc;border:2px solid #ffc;margin:0 0 5px 0;float:left;width:100%;padding:6px 0;}
div.row label {float:left;display:block;width:15em;font-weight:bold;padding:0 6px;}
div.row label:hover {background:#FFFF66;cursor:pointer;}
div.row fieldset {border:1px solid gray;margin:0 6px;}
div.row fieldset span {display:block;}
div.row fieldset span label {float:none;display:inline;}
div.row fieldset legend {font-weight:bold;}
div.requiredRow {border:2px solid #049;}
Also included on this last page is a link to a jQuery you can use.
In my case, I have Adobe Dreamweaver, so I’m going to transfer the CSS and form to that. Note that you’ll have to make use of the
