Documentation
Step 1:
Search for the JsonFormBuilder xtra via the package manager, or download and install a package manually from JsonFormBuilder or from GitHub (packages are available in the core/packages folder (https://github.com/marcushouse/JsonFormBuilder).
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:
Create a basic template with the following
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>[[*pagetitle]] - [[++site_name]]</title>
<base href="[[++site_url]]" />
<!-- Include any preliminary CSS such as a reset (this reset included just for demonstration purposes -->
<link type="text/css" rel="stylesheet" href="assets/components/jsonformbuilder/css/reset.css" />
<!-- Include/copy/modify the JsonFormBuilder CSS (SCSS version also packaged in assets/components/jsonformbuilder/scss/ folder -->
<link type="text/css" rel="stylesheet" href="assets/components/jsonformbuilder/css/jsonformbuilder.css" />
</head>
<body>
<!-- output the resource content (which will contain our snippet calls) -->
<div>[[*content]]</div>
<!-- Grab the latest jQuery, or link directly from a Content Delivery Network -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<!-- Grab the latest jQueryValidate Plugin, or link directly from a Content Delivery Network -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script>
<!-- Set a placeholder in your template or content page that will receive any JavaScript from the form process. -->
<script type="text/javascript">
// <![CDATA[
[[+JsonFormBuilder_myForm]]
// ]]>
</script>
</body>
</html>
Step 3:
Download the latest jQuery framework, and jQuery Validation plugin if needed (the example above demonstrates linking to various Content Delivery Frameworks. Then include them in your MODX in whatever order you like.
NOTE: Keep in mind that here we place our javascript files just before body close as it frequently recommended for performance. You can also have them in the html head. If this is the case, you don't require use of the JsonFormBuilder_myForm placeholder and can remove the $o_form->setPlaceholderJavascript('JsonFormBuilder_myForm'); link shown in the demo code.
Step 4:
Copy and modify, or directly link to the jsonformbuilder.css sample CSS file shown in the template sample above. A copy of this CSS is shown below. The stylesheet can be compiled into your site CSS file or whatever you wish to do. Keep in mind that future update installs will overwrite the CSS in the assets/components/jsonformbuilder/css/. Therefore copying this file elsewhere and making modifications is recommended to ensure updates do not overwrite your form styles.
/* JsonFormBuilder base rules */
.form h1, .form h2, .form h3, .form h4 {
clear: both; }
.form .formSegWrap {
padding-top: 5px;
vertical-align: top;
/* example extra classes */ }
.form .formSegWrap > label {
display: block;
padding: 2px 0px 2px 0px;
cursor: pointer;
color: #666666; }
.form .formSegWrap .mainLabel:after {
content: ":"; }
.form .formSegWrap .elWrap {
padding: 2px 10px 2px 0px; }
.form .formSegWrap .elWrap input[type="text"], .form .formSegWrap .elWrap textarea, .form .formSegWrap .elWrap select, .form .formSegWrap .elWrap input[type="password"] {
width: 100%;
border: 1px solid #BBBBBB;
border-radius: 2px;
padding: 8px;
color: #555555;
transition: all 0.3s ease-out;
-webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08) inset;
-moz-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08) inset;
box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08) inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; }
.form .formSegWrap .elWrap input[type="text"]:focus, .form .formSegWrap .elWrap textarea:focus, .form .formSegWrap .elWrap select:focus, .form .formSegWrap .elWrap input[type="password"]:focus {
background-color: #f7f7f7;
border-color: #838383; }
.form .formSegWrap .elWrap input[type="text"].error, .form .formSegWrap .elWrap textarea.error, .form .formSegWrap .elWrap select.error, .form .formSegWrap .elWrap input[type="password"].error {
background-color: #ffe8e8;
border: 1px solid #c04242;
color: #c04242; }
.form .formSegWrap .elWrap input[type="radio"].error, .form .formSegWrap .elWrap input[type="checkbox"].error {
box-shadow: 0 0 3px red;
border: 1px solid red; }
.form .formSegWrap .elWrap input[type="submit"], .form .formSegWrap .elWrap input[type="button"], .form .formSegWrap .elWrap input[type="reset"] {
border: 1px solid #CCCCCC;
padding: 8px;
min-width: 110px;
background-color: #f7f7f7;
color: #555555;
cursor: pointer;
border-radius: 2px;
transition: all 0.3s ease-out;
-webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08) outset;
-moz-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08) outset;
box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08) outset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; }
.form .formSegWrap .elWrap input[type="submit"]:hover, .form .formSegWrap .elWrap input[type="button"]:hover, .form .formSegWrap .elWrap input[type="reset"]:hover {
background-color: #eeeeee; }
.form .formSegWrap table.matrix {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
width: 100%; }
.form .formSegWrap table.matrix th {
background-color: #F7F7F7;
font-size: 85%; }
.form .formSegWrap table.matrix th, .form .formSegWrap table.matrix td {
padding: 3px;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
font-size: 85%; }
.form .formSegWrap table.matrix th.columnHead {
text-align: center;
border-top: 1px solid #dddddd; }
.form .formSegWrap table.matrix th.rowHead {
text-align: left;
border-left: 1px solid #dddddd; }
.form .formSegWrap table.matrix th.spaceCell {
background-color: transparent; }
.form .formSegWrap table.matrix .optionCell {
text-align: center; }
.form .formSegWrap.elementCheckbox .mainElLabel {
display: inline-block;
margin-left: 5px;
vertical-align: middle; }
.form .formSegWrap.elementCheckbox .elWrap {
display: inline-block;
vertical-align: middle; }
.form .formSegWrap.elementCheckboxGroup .checkboxWrap .checkboxEl {
display: inline-block;
vertical-align: middle; }
.form .formSegWrap.elementCheckboxGroup .checkboxWrap > label {
display: inline-block;
margin-left: 5px;
vertical-align: middle; }
.form .formSegWrap.required .mainElLabel:after {
content: " *";
color: red; }
.form .formSegWrap.elementDate select {
width: auto;
margin-right: 5px; }
.form .formSegWrap.half {
width: 50%;
float: left; }
.form .formSegWrap.third {
width: 33.3%;
float: left; }
.form .formSegWrap_submit, .form .formSegWrap_reset {
float: left;
width: auto;
margin: 10px 10px 10px 0px; }
.form label.mainLabelError {
color: #990000; }
.form .errorContainer {
display: block;
/* for Non jQuery Validate form errors with multiple warnings */
padding-top: 2px; }
.form .errorContainer label {
font-size: 85%;
display: block;
color: red;
clear: both;
cursor: pointer; }
.form .errorContainer label span {
display: block; }
.form .process_errors_wrap {
color: red; }
.form .radioWrap {
clear: both; }
.form .radioWrap label {
display: inline-block;
width: 80%;
padding: 2px;
cursor: pointer; }
.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:
Create a new form snippet called JsonFormBuilder-contact using any one of the demos as inspiration. If you are brand new to JsonFormBuilder, check out the basic JSON form, or if you prefer coding in PHP with a little more power, the basic form.
Step 6:
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 2, then add the call to your new form snippet like so...
[[!JsonFormBuilder-contact]]
Step 7:
Hit the page made in Step 6 from the website and take a look at the output. You should end up with a very similar form as shown in the demos. Here is an example form which uses the above steps using the basic JSON form. It will appear this way it if you have followed the exact process above.