Form builder

Cradle CMS has a built-in form feature making it possible to create and manage forms such as contact forms and newsletter signups.

The form functionality includes data validation, which ensures that the data entered follows specific rules before it is saved in the database. This helps to prevent 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.

Options

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.

Form setup in admin

Form setup in admin for a contact form
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.

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">

HTML

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 id='<handle>'> markup tag.

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.

{% form %} tag

Since you can have several forms in a template the form value, in this case contact is matched to it’s handle or name. Note in the follwoing example that you can add id and class in the {% form %} tag.

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

or if you want to create it manually

<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.

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.

References