Complex JSON Form
The example snippet installed with JsonFormBuilder will output the following form. You can find the snippet code in the file
core/components/jsonformbuilder/docs/examples/JsonFormBuilder-json-formFull.json.
The Code
[[!JsonFormBuilder-fromJSON? &json=`
{
"id": "TestContactForm",
"redirectDocument": "3",
"jqueryValidation":true,
"placeholderJavascript":"JsonFormBuilder_myForm",
"emailToAddress": "your@address.com",
"emailFromAddress": "from@nowhere.com",
"emailFromName": "Test User",
"emailSubject": "JsonFormBuilder Contact Form Submission",
"emailHeadHtml": "<p>This is a response from the contact us form:</p>",
"elements": [
{"element":"hidden", "id":"user_group", "label":"User Group", "defaultVal":3},
"<h2>Personal Information</h2>",
{"element":"text", "id":"name_full", "label":"Full Name", "defaultVal":"Your Name Here", "extraClasses":["half"],"rules":["required"] },
{"element":"text", "id":"age", "label":"Age", "extraClasses":["half"],"rules":[
{"type":"required"},
{"type":"numeric"},
{"type":"minimumValue","value":18},
{"type":"maximumValue","value":100}
]},
{"element":"text", "id":"date_of_birth", "label":"Date of Birth", "extraClasses":["half"], "rules":[
"required",
{"type":"date","value":"dd/mm/yyyy"}
]},
{"element":"date", "id":"date_to_attend", "label":"Select Date", "dateFormat":"yyyy/mm/dd", "yearStart":2000, "yearEnd":2010, "rules":["required"], "extraClasses":["half"]},
{"element":"text", "id":"username", "label":"Username", "extraClasses":["half"], "rules":[
"required",
{"type":"minimumLength","value":6},
{"type":"maximumLength","value":30}
]},
{"element":"text", "id":"email_address", "label":"Email Address", "extraClasses":["half"], "rules":["required","email"] },
"<h2>Password</h2>",
{"element":"password", "id":"user_pass", "label":"Password", "rules":["required",{"type":"minimumLength","value":8}], "extraClasses":["half"]},
{"element":"password", "id":"user_pass2", "label":"Confirm Password", "extraClasses":["half"],"rules":[
"required",
{"type":"fieldMatch","value":"user_pass", "validationMessage":"Passwords do not match"}
]},
"<h2>Address</h2>",
{"element":"text", "id":"address", "label":"Address", "extraClasses":["half"]},
{"element":"text", "id":"city", "label":"City/Suburb", "extraClasses":["half"]},
{"element":"select", "id":"ussuate", "label":"Select a state", "extraClasses":["half"] ,"values":{
"":"Please select...",
"AL":"Alabama",
"AK":"Alaska",
"AZ":"Arizona",
"AR":"Arkansas",
"CA":"California",
"CO":"Colorado",
"CT":"Connecticut"
}},
{"element":"text", "id":"postcode", "label":"Post Code", "extraClasses":["half"], "rules":[
"required","numeric",
{"type":"minimumLength","value":4},
{"type":"maximumLength","value":4}
]},
"<h2>Company Information</h2>",
{"element":"text", "id":"company", "label":"Company Name", "extraClasses":["quart"]},
{"element":"text", "id":"company_phone", "label":"Company Phone", "extraClasses":["quart"]},
{"element":"select", "id":"employees", "label":"Number of Employees", "defaultVal":"11 to 20", "extraClasses":["quart"], "values":{
"10":"Less than 10",
"11 to 20":"11 to 20",
"50":"21 to 50",
"100":"51 to 100",
"100+":"More than 10"
}},
{"element":"text", "id":"web_address", "label":"Website Address", "extraClasses":["quart"], "rules":["url"] },
"<h2>Performance</h2>",
{"element":"radioGroup", "id":"staff_performance", "label":"How would you rate staff performance?", "extraClasses":["half"], "values":{
"opt1":"Poor",
"opt2":"Needs Improvement",
"opt3":"Average",
"opt4":"Good",
"opt5":"Excellent"
},"rules":[
{"type":"required","validationMessage":"Please select an option for staff performance"}
]},
{"element":"checkboxGroup", "id":"food_most_like", "label":"Select your preferred two or three foods", "rules":["required"], "extraClasses":["half"], "values":[
{"title":"Cheese","checked":false},
{"title":"Grapes","checked":false},
{"title":"Salad","checked":false},
{"title":"Bread","checked":false},
{"title":"Chocolate","checked":true}
]},
"<h2>Matrix/Group Elements</h2>",
{"element":"matrix", "id":"checkMatrix", "label":"What foods do your children like?", "type":"check", "rules":["required"],
"rows": ["Child 1","Child 2","Child 3","Child 4"],
"columns": ["Fish","Beef","Chicken","Salad"]
},
{"element":"matrix", "id":"radioMatrix", "label":"How do you feel about us?", "type":"radio", "rules":["required"],
"rows": ["Service Quality","Overall Hygiene","Responsiveness","Kindness and Helpfulness"],
"columns": ["Very Satisfied","Satisfied","Somewhat Satisfied","Not Satisfied"]
},
{"element":"matrix", "id":"textMatrix", "label":"List your favorite websites", "type":"text", "rules":["required"],
"rows": ["Website #1","Website #2","Website #3","Website #4", "Website #5"],
"columns": ["Site Name","URL","Speed","Design"]
},
"<h2>Attach your Resume and Application</h2>",
{"element":"file", "id":"resume", "label":"Resume (PDF, DOC or DOCX)", "rules":["required"],"maxFilesize":204800,"allowedExtensions":["pdf","doc","docx"]},
{"element":"file", "id":"application", "label":"Application"},
"<h2>Additional</h2>",
{"element":"textArea", "id":"notes", "label":"Additional Comments", "rows":5,"columns":30, "defaultVal":"Here is an example of default multiline text.\n\n--- JsonFormBuilder ---"},
{"element":"checkbox", "id":"agree_newsletter", "label":"Sign me up for some spam","value":"Wants Spam","uncheckedValue":"Does <strong>NOT</strong> want spam","checked":true},
{"element":"checkbox", "id":"agree_terms", "label":"I agree to the terms & conditions", "value":"Agree", "uncheckedValue":"Disagree", "checked":false, "rules":[
{"type":"required","validationMessage":"You must agree to the terms and conditions"}
]},
{"element":"button", "id":"submit", "label":"Submit From", "type":"Submit"}
]
}
`]]
The Form
Check out how this form will render in the Complex Form example.
The Email
The email is automatically built from the snippet (below) just like the form.
