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.