JsonFormBuilder

• Introduction
• Documentation
  • Basic JSON Form
  • Basic PHP Form
  • Complex JSON Form
  • Complex PHP Form
  • Conditions
  • Custom Validation
  • Custom Rules
  • Recording Form into a Database Table
  • Auto Responders
• Demos
  • Base Form
  • Complex Form
  • Conditions
• Pre-Release Code from Github
• Upgrading from FormItBuilder
• FormItBuilder (deprecated)
• Contact Support

Basic JSON Form

Using the quick JSON form syntax below is very fast, you don't even need to create a snippet if you don't want to (although you can mix JSON syntax with dynamic output from PHP if used in a snippet), you can simply place the JSON inline and call the inbuilt JsonFormBuilder-fromJSON snippet.

The Code

[[!JsonFormBuilder-fromJSON? &json=`

{
    "id": "TestContactForm",
    "redirectDocument": "3",
    "jqueryValidation":true,
    "placeholderJavascript":"JsonFormBuilder_myForm",

    "emailToAddress": "[[++emailsender]]",
    "emailFromAddress": "[[+postVal.email_address]]",
    "emailFromName": "[[+postVal.name_full]]",
    "emailSubject": "JsonFormBuilder Contact Form Submission",
    "emailHeadHtml": "<p>This is a response from the contact us form:</p>",
    
    "elements": [
        {"element":"text", "id":"name_full", "label":"Name", "extraClasses":["half"], "extraElementAttribs":{"placeholder":"Enter your name","class":"custom-class"}, "rules":["required"] },
        {"element":"text", "id":"email_address", "label":"Email Address", "extraClasses":["half"], "extraElementAttribs":{"placeholder":"Enter your email","class":"custom-class"}, "rules":["required","email"] },
        {"element":"textArea", "id":"notes", "label":"Comments", "rows":5, "columns":30, "rules":["required"]},
        {"element":"button", "id":"submit", "label":"Submit From", "type":"Submit"}
    ]
}

`]]

Multiple Addresses

You can also specify multiple addresses by using JSON array syntax (e.g. "emailToAddress": ["name@address1.com","name@address2.com"]),

The Form

Check out how this form will render in the Base Form example.

Note: we have disabled redirect and the to email address, so submitting this form will not send an email.

Breaking it down

If you can read JSON easy enough, hopefully this will mostly seem obvious. The first lines indicate that the form id will be TestContactForm. After a valid submission, the user will be redirected to the resource with 3 as its id (which you would in most cases set up as a "Thank You" resource of some sort). It will have javascript validation turned on, and it will send all javascript to a placeholder called JsonFormBuilder_myForm.

After submission an email containing the form contents will be sent to your@address.com and appear to come from from@nowhere.com with the name Test User. The email will have the subject line JsonFormBuilder Contact Form Submission and will include a head paragraph saying "This is a response from the contact us form:".

Now, the elements are created (4 including Full Name, Email Address, Comments and a submit button). Each of these elements MUST have a recognized element type (text, button, textArea etc), a unique id attribute, and a label. Optionally, extra classes can be added which will allow extra CSS ability (such as the two half classes added to name and email address elements). Rules such as whether the field is requires, or an email type can then be set on the elements themselves.

The form will be build in the order of the elements specified and will send to the email in the order specified.

The Email

The email is automatically built from the snippet (above) just like the form.

Have your JSON in a chunk

You can place the inner JSON code into a chunk and simply call it like this

[[!JsonFormBuilder-fromJSON? &jsonTpl=`JsonFromBuilder-formBasic`]]

Have your JSON in an external file (my favorite)

You can place the inner JSON code into an external file and simply call it like this. Having code located externally may be a touch slower (to a very tiny degree), but the benefit of file version control such as Git or Subversion is well worth it.

[[!JsonFormBuilder-fromJSON? &jsonFile=`core/components/jsonformbuilder/docs/examples/JsonFormBuilder-json-formBasic.json`]]

Lots more examples

This is about the most primitive form you can make, there are loads of elements types and rules which can be seen in the complex examples, and the remaining demos. There is a lot of sample code scattered in the core/components/jsonformbuilder/docs/examples folder.

ENJOY AND HAVE FUN BUILDING!