Documentation
Step 1:
Install the package and create a new snippet for your first form called "FormItBuilder_MyContactForm". Copy the snippet contents from the example shown on the FormItBuilder Complex Example page into the FormItBuilder_MyContactForm snippet. You can also of course use the basic example as well (although in that situation the snippet has a different name).
Step 2:
Download the latest jQuery framework
and jQuery Validation plugin.
Then include them in your modX template as shown in the next step.
Step 3:
Create a basic template with the following
<!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"> <head> <title>[[++site_name]] - [[*pagetitle]]</title> <base href="[[!++site_url]]" /> <script src="assets/js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="assets/js/jquery.validate.min.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="assets/css/stylesheet.css" /> </head> <body> [[*content]] </body> </html>
Step 4:
Create your stylesheet.css as linked in the html head. The sample below can of course be modified or rebuilt to suit the project. This is a set of CSS rules based off example forms on this site.
/* Set some global basic rules such as font and font size etc */
body, input, select, textarea {
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
}
/* FormItBuilder base rules */
.form {
background-color: #e9edf3;
border-radius: 5px;
border: 1px solid #c8d3e3;
padding: 10px;
color: #233156;
overflow: auto;
margin: 10px;
line-height: 110%;
}
.form th, .form td {
padding: 3px;
border-bottom: 1px solid #c8d3e3;
border-right: 1px solid #c8d3e3;
}
.form .matrix th {
background-color: #dfe5ee;
font-size: 90%;
}
.form .matrix th.columnHead {
text-align: center;
border-top: 1px solid #c8d3e3;
}
.form .matrix th.rowHead {
text-align: left;
border-left: 1px solid #c8d3e3;
}
.form .matrix th.spaceCell {
background-color: transparent;
}
.form .matrix .optionCell {
text-align: center;
}
.form .matrix .optionCell input[type="text"] {
width: 8em;
}
.form .formSegWrap {
padding: 0px 5px 5px 0px;
}
.form .formSegWrap > label {
display: block;
font-weight: bold;
padding: 2px 0px 2px 0px;
}
.form .formSegWrap .mainLabel:after {
content: ":";
}
.form .formSegWrap .elWrap {
padding: 2px 0px 2px 0px;
}
.form .formSegWrap.elementCheckbox label.mainElLabel {
position: absolute;
margin-left: 30px;
}
.form .formSegWrap.elementCheckbox .elWrap {
padding-right: 10px;
}
.form .formSegWrap.elementCheckbox .mainLabel:after {
content: "";
}
.form .formSegWrap.elementCheckboxGroup .checkboxWrap {
clear: both;
}
.form .formSegWrap.elementCheckboxGroup .checkboxWrap label {
display: inline-block;
margin: 3px 0px 0px 5px;
}
.form .formSegWrap.elementCheckboxGroup .checkboxEl {
float: left;
}
.form .formSegWrap.elementCheckboxGroup .checkboxEl input[type="checkbox"] {
margin-left: 0px;
}
.form .formSegWrap.required .mainElLabel:after {
content: " *";
color: red;
}
.form input[type="text"], .form textarea, .form input[type="password"] {
width: 210px;
}
.form input[type="text"], .form textarea, .form select, .form input[type="password"] {
border: 1px solid #a9bbd6;
padding: 3px;
border-radius: 3px;
color: #233156;
}
.form input[type="text"]:focus, .form textarea:focus, .form select:focus, .form input[type="password"]:focus {
background-color: #f4f7fb;
border-color: #4586e7;
}
.form textarea {
font-size: 90%;
}
.form textarea.error, .form input[type="text"].error, .form input[type="password"].error {
background-color: #ffe8e8;
border: 1px solid #c04242;
color: #c04242;
}
.form input[type="radio"].error, .form input[type="checkbox"].error {
box-shadow: 0 0 3px red;
border: 1px solid red;
}
.form input[type="submit"], .form input[type="button"], .form input[type="reset"] {
border: 1px solid #a9bbd6;
padding: 2px;
min-width: 110px;
border-radius: 3px;
background-color: #b0cde8;
cursor: pointer;
}
.form input[type="submit"]:hover, .form input[type="button"]:hover, .form input[type="reset"]:hover {
background-color: #8ca2d9;
}
.form .formSegWrap_submit, .form .formSegWrap_reset {
float: left;
width: auto;
margin: 10px 10px 10px 0px;
}
.form label.mainLabelError {
font-weight: bold;
color: #990000;
}
.form .errorContainer {
display: block;
/* for Non jQuery Validate form errors with multiple warnings */
}
.form .errorContainer label {
font-size: 11px;
display: block;
color: red;
clear: both;
}
.form .errorContainer label span {
display: block;
}
.form hr.formSpltter {
border-top: 1px dashed #c8d3e3;
border-bottom: none;
height: 1px;
margin: 5px 0px 5px 0px;
}
.form h2 {
font-size: 18px;
font-weight: bold;
padding: 2px 0px 5px 0px;
}
.form .process_errors_wrap {
color: red;
}
.form .radioWrap {
clear: both;
}
.form .radioWrap label {
display: inline-block;
padding: 2px;
}
.form .radioWrap .radioEl {
float: left;
clear: both;
}
.form .tiny .elWrap span.after:after, .form .tiny .elWrap span.after:before {
content: "*";
padding-left: 2px;
}
Step 5:
Now you just need a page to output the form into. Simply create a new document in your resource tree, make sure that page has the template set to that made in Step 3, then add the call to your new form snippet like so...
[[!FormItBuilder_MyContactForm? &outputType=`dynamic`]]
Step 6:
Hit the page made in Step 5 from the website and take a look at the output. You should end up with a very similar form as shown in the FormItBuilder Complex Example.