Rendering forms

Table of contents

In Plate templates you can use the form liquid tag. This tag renders an HTML form that sends out an email to the passed email address, and saves the message to the database, so the user can find it under ‘Messages’ in the site dashboard. Inside the 'form' tag, the 'submitted_form_fields' object will be available.

Arguments

The form tag accepts the following arguments:

for
The Plate object that represents the form. (Required)

to
The email address where the message is sent. (Required)
This can be:

  1. A string containing one email address, or multiple comma-separated email addresses.

  2. An array containing strings of individual email addresses.

subject

The subject that is used for the email sent to the email filled in at to. (Not required, default: 'Message sent from %{site}')

See register_form_confirmation_field for the subject of the confirmation email.

error_msg
The error message that is used in the ‘request’ object (alert attribute) when the form is invalid and doesn’t get sent. (Not required, default: ‘Something went wrong while sending the message.’)

success_msg
Same as error_msg, but for the message when the form does send (request attribute: notice). (Not required, default: ‘Thank you for your message. We will reply as soon as possible.’)

success_url
The url where the user is redirected to after a successful form submission. (Not required, by default the user gets redirected to the page where the submitted form was located)

enable_recaptcha (accepted values: true, skip_js)
Inserts an invisible Captcha (Google reCaptcha v3) inside the form, to prevent the form being used for spam. Set the value to 'true' for a regular implementation. If you need to handle the Captcha token generation yourself, set the value to 'skip_js'. Read how to enable recaptcha.

Note that Plate does not add the credits for Google for the use of their ReCaptcha system. It is your own responsibility to add credits for Google on your page if you enable ReCaptcha.

Note 2 You need to add {% include_plate_scripts "recaptcha_scripts" %} somewhere on the page that has the form on it. The form will not be submitted if the scripts are not included on the page!

output_as
Only accepts 'json' as value. Returns a JSON hash that can be used as a payload when POSTing to the form_messages endpoint as a JSON request. See

for more info on how the request works.

Example form

{% comment %}Input{% endcomment %}

{% form for: form, to: form.email, success_url: form.success_page_link, enable_recaptcha: true %}
  {% for field in form.field_lines %}
    {% include field %}
  {% endfor %}
  <div>
    <input type="submit" >
  </div>
{% endform %}

{% comment %}Output{% endcomment %}
<form action="/form_messages" method="post" accept-charset="utf-8">
  <!-- Fields -->
  <div><input type="submit" value="Send"></div>
</form>

{% comment %}You could add all kinds of attributes like so:{% endcomment %}
{% form class: "contact-form", autocomplete: true %}
form liquid tag

Submitted form fields object

Inside the 'form' block, you have access to the submitted_form_fields object. This is a liquid object, representing all the (non-file) fields that were submitted. This allows you to keep your form fields filled when a validation error occurred.

For example, you can use this object when rendering a form field, as follows:

{% form ... %}
    {% for field in form.fields %}
        <input type="{{field.type}}" name="{{field.name | form_input_name}}" value="{{submitted_form_fields[field.name]}}"/>
        {% register_form_field field.name %}
    {% endfor %}
{% endform %}

By setting the value of the input field to the value in the submitted_form_fields object, this input field will retain its value when the form is rendered again after a validation error on submitting the form.

Need help?

Do you have any question which is not answered in this knowledge base? Contact us. We are here to help you.