Cradle CMS has a built-in form builder that creates and manages forms, such as contact forms and newsletter signups.
- Server-side data validation
Form submissions are validated before saved in the database to prevent attacks, errors and maintain data integrity. - Automatic HTML
Optional HTML-code generation. - Multiple forms
Multiple forms on the same page. - JS free
Also works without JavaScript. - Unlimited
This is a self-hosted solution: no limit on the amount of forms and form submissions.
Form entries
Form submissions are validated server-side before saved.
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. |
Adding form into text editor
The content for a page is not automatically rendered but if including liquid filter | render
to the html output liquid will be processed. For the Rich Text Editor and Markup editor it is possible to add in Liquid and thus the form tag, {% form 'contact' %}{% endform %}
, straight in the editor.
Example of code for a page-template that renders the content
<section>
<h1>{{ meta.h1 }}</h1>
<div>
{{ page.html | render }}
</div>
</section>
{% 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">