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" >
A required email input field specification
Input
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| Yes | - | - | - |
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">