Cradle CMS & eCommerce

Cradle CMS and eCommerce comes with forms functionality built in. There are no limitations on the amount of forms and they can be used without the use of JavaScript.

For more information about the setup of forms check out the Form builder guide

Format

{% form '<handle>' attributes %}
<html content>
{% endform %}

	Description	Example
`<handle>`	The handle of the form , if setting up a form in the builder this is the name of the form. Otherwise it can be one of the premade forms in the system	`contact`
`attributes`	The attributes are inserted as ids or classes on the generate form.	`class:'w-full border rounded p-4'`
`<html content>`	The area to include HTML for the form, if not using the built-in format	See below

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

if no class is defined on the form class="cradle" is added to the <form> element.

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

Attributes

Attributes	Description	Example
Redirect	Defines where the form is redirecting after success	`onSuccess:'/cart'`

Example of HTML content

<div class="form-control">
  <label class="{% if form.errors contains 'email' %} input-error{% endif %} flex items-center gap-2">
    <input type="email" name="email" class="grow  input input-bordered" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="Email" autocorrect="off" autocapitalize="off" required />
   </label>
</div>
<button type="submit" class="btn btn-primary">Send</button>

eCommerce

Customer account forms

{% form 'customer_register' %}
{% form 'activate_customer_password' %}
{% form 'customer_login' %}
{% form 'customer_password_reset' %}

Checkout forms

{% form 'cart_add' %}
{% form 'cart' %}
{% form 'checkout' %}

`cart_add` Add product to cart

Example

{% form 'cart_add' %}
		<input type="hidden" name="product" value="{{product.id}}">
		{% if product.variants.size > 1 %}
		<select name="variant" value="{{product.selectedVariant.id}}">
				{% for variant in product.variants %}
				<option value="{{variant.id}}" {% if variant.id == product.selectedVariant.id %}selected{% endif %}>{{variant.title}}</option>
				{% endfor %}
		</select>    
		{% else %}
		<input type="hidden" name="variant" value="{{product.selectedVariant.id}}">
		{% endif %}
		<button name="submit">Add to cart</button>
{% endform %}

Form development