Form builder

Cradle CMS has a built-in form builder that creates and manages forms, such as contact forms and newsletter signups.

Form submissions are validated before saved in the database to prevent attacks, errors and maintain data integrity. 

• Server-side data validation.
• Unlimited amount of forms.
• Optional HTML-code generation.
• Multiple forms on the same page.
• Works without JavaScript.

Setup in admin

Forms are added and modified under Messages, also form submissions can be found here.

Form fields consists of Name, Type, Required, Match, Attributes and Value. Each input field that the form will consist of needs to be specified in admin, this is part of the form validation.

Option	Description
Required	Form submissions are only accepted with a value. HTML code should reflect this with the required attribute for the best UX experience.
Name	The HTML attribute name="email" for the input field.
Type	Type of HTML input field for example type="email".
Value	Sets a value on the input field.
Attributes	Adds input attributes for the generated HTML code.
Match	The given value has to match in the form submission, this can be used to create a validation to detect human users.

{% form %} tag

When setting up a form in admin, the form will get a handle, this handle needs to be added in a {% form '<handle>' %} liquid tag or <form name="<handle>" action="/forms/contact" method="POST"></form> HTML-tag. Note in the follwoing example that you can add id and class in the {% form %} tag.

{% form 'contact' id:'my-id' class:'special form' %}{% endform %}

will generate the following

<form class="special form" name="contact" action="/forms/contact" method="POST" id="my-id">
	<form content>
</form>

Since you can have several forms in a template the form value, in this case contact is matched to it’s handle or name.

<form name="contact" id="contact-form" action="/forms/contact" method="POST">
</form>

{% form.errors %} and {% form.success %} tags

The form submitted is either a success or contains errors, these are states can be communicated to the form submitter in the template.

{% if form.errors %}
 <div class="alert alert-error">
  <span>Sorry, looks like something went wrong, please try again.</span>
 </div>
{% endif %}

The form error will contain an array of the fields that contained the error which can be used to specify and further notify the form submitter, for example by adding a class {% if form.errors contains 'name' %} input-error{% endif %} to the input field.

Generated form HTML

When {% form '<handle>' %} and {% endfrom %} tags has no content in between markup for the form is generated from setup in admin.

{% form '<handle>' %}{% endform %}

Example code

Generated code for a typical contact form:

<form method="POST" name="contact" id="contact-form" action="/forms/contact">
	<input type="hidden" name="returnUrl" value="/#contact-form">
	<label for="name">Name</label>
	<input type="text" name="name" required="">
	<label for="email">Email</label>
	<input type="email" name="email" required="">
	<label for="phone">Phone</label>
	<input type="tel" name="phone" required="">
	<label for="subject">Subject</label>
	<input type="text" name="subject" required="">
	<label for="message">Message</label>
	<textarea name="message" required="" rows=""></textarea>
	<input type="submit" name="submit" required="" value="Send">
</form>

CSS for generated form HTML

CSS for the generated HTML if the css-framwork used requires another html structure:

form {
		max-width: 500px;
		margin: 0 auto;
		padding: 1em;
}
form input, form label, form textarea {
		width: 100%;
}
form label {
		display:block;
		font-size: 0.8em;
		text-align: left;
		padding: 0 0.5em
}
form input[type="submit"] {
		margin-bottom: 0.5em; 
}

Custom HTML code in template

If including html inside of the {% form %} tag, this code will be used instead of the generated code.

Code for a typical contact form:

{% form 'contact' %}
 <h3>Say hallo!</h3>
   {% if form.errors %}
    <div class="alert alert-error">
     <span>Sorry, looks like something went wrong, please try again.</span>
    </div>
   {% endif %}
   {% if form.success %}
    <div class="alert alert-success">
     <span>Thank you for the message, we will contact you shortly!</span>
    </div>
   {% else %}
    <label class="input {% if form.errors contains 'name' %} input-error{% endif %}">
     <input type="text" name="name" placeholder="Name" required/>
    </label>
    <label class="input {% if form.errors contains 'email' %} input-error{% endif %}">
     <input type="email" name="email" placeholder="Email" required />
    </label>
   <textarea placeholder="Message" name="message"  class="textarea {% if form.errors contains 'message' %} textarea-error{% endif %}" required ></textarea>
   <button type="submit" class="btn btn-primary">Send</button>
  {% endif %}
 </div>
{% endform %}

With {{ form | print_r }} it is possible to view the form object.

Spam filtering

Spam filtering helps protect your message inbox from unwanted, potentially harmful, messages

• Create your own questions with the form validations built in.
• Add a load delay with Javascript on the form.
• Use 3rd party services such as reCAPTCHA.

Input types

text, textarea, number, email, tel, url, color, date, datetime, month, week, time, select, range, hidden, reset and submit.

Text

The input attributes are used as a client-side validation.

Input Example

Required	Name	Type	Value	Attributes	Match
Yes	Name	Text	-	minlength=“4” maxlength=“8”	-

HTML Output

<label for="Name">Name</label>
<input type="text" name="Name" minlength="4" maxlength="8" required="">

Textarea

Typically a textarea is used in a contact form for a message, and could be set to required. Specifying the number of rows as an attribute is a good idea as the default number is only two.

Input

Required	Name	Type	Value	Attributes	Match
Yes	Message	Textarea	-	rows=“6”	-

HTML Output

<label for="Message">Message</label>
<textarea name="Message" rows="6" required=""></textarea>

Number

Number input can be used to collect a number and by adding attributes it is possible to get stepped values between a minimum and maximum amount.

Input

Required	Name	Type	Value	Attributes	Match
-	Amount	Number	-	min=“100” max=“900” step=“10”	-

HTML Output

<label for="Amount">Amount</label>
<input type="number" name="Amount" min="100" max="900" step="10" >

Email

A required email input field specification

Input

Required	Name	Type	Value	Attributes	Match
Yes	Email	Email	-	-	-

HTML Output

<label for="Email">Email</label>
<input type="email" name="Email" required="">

Phone

Input

Required	Name	Type	Value	Attributes	Match
-	Phone	Tel	-	-	-

HTML Output

<label for="Phone">Phone</label>
<input type="tel" name="Phone">

Url

Input

Required	Name	Type	Value	Attributes	Match
-	Website	Url	-	-	-

HTML Output

<label for="Website">Website</label>
<input type="url" name="Website" >

Colorpicker

Input

Required	Name	Type	Value	Attributes	Match
-	Colorpicker	Color	-	-	-

HTML Output

<label for="Colorpicker">Colorpicker</label>
<input type="color" name="Colorpicker">

Date

Input

Required	Name	Type	Value	Attributes	Match
-	Date	Date	-	-	-

HTML Output

<label for="Date">Date</label>
<input type="date" name="Date">

Datetime

Input

Required	Name	Type	Value	Attributes	Match
-	Date	Datetime	-	-	-

HTML Output

<label for="Date">Date</label>
<input type="datetime-local" name="Date">

Month

Input

Required	Name	Type	Value	Attributes	Match
-	Date	Month	-	-	-

HTML Output

<label for="Date">Date</label>
<input type="month" name="Date">

Week

Input

Required	Name	Type	Value	Attributes	Match
-	Date	Week	-	-	-

HTML Output

<label for="Date">Date</label>
<input type="week" name="Date">

Time

Input

Required	Name	Type	Value	Attributes	Match
-	Time	Time	-	-	-

HTML Output

<label for="Time">Time</label>
<input type="time" name="Time">

Select

Input

Required	Name	Type	Value	Attributes	Match
-	Select	Select	Cat, Dog, Rabbit	-	-

HTML Output

<label for="Select">Select</label>
<select name="Select">
  <option value="Cat">Cat</option>
  <option value="Dog">Dog</option>
  <option value="Rabbit">Rabbit</option>
</select>

Range

Input

Required	Name	Type	Value	Attributes	Match
-	Range	Range	-	min=“0” max=“5”	-

HTML Output

<label for="Range">Range</label>
<input type="range" name="Range" min="0" max="5">

Hidden

Input

Required	Name	Type	Value	Attributes	Match
-	Hidden	Hidden	-	-	-

HTML Output

<input type="hidden" name="Hidden" value="">

Reset

Input

Required	Name	Type	Value	Attributes	Match
-	Reset	Reset	Reset	-	-

HTML Output

<input type="reset" name="Reset" value="Reset">

Submit

Input

Required	Name	Type	Value	Attributes	Match
-	Submit	Submit	Submit	-	-

HTML Output

<input type="submit" name="submit" required="" value="Submit">

References

• The HTML input fields
• Input fields at Mozilla developers
• Email Input field at Mozilla developers