form Tag

The form tag creates an HTML form that submits to the Basker forms API. It includes built-in honeypot spam protection and optional Google reCAPTCHA v3 integration.

Syntax

{% form "form-slug" %}
  <!-- Form fields go here -->
{% endform %}

Parameters

Parameter	Required	Description
`form-slug`	Yes	The slug of the form defined in the Basker CMS

Basic Usage

Create a form in the Basker CMS with a slug (e.g., contact), then reference it in your template:

{% form "contact" %}
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" required></textarea>
  </div>

  <button type="submit">Send Message</button>
{% endform %}

Generated HTML

The form tag generates a complete <form> element with:

A unique form ID
POST method to the Basker forms API
Hidden redirect fields for post-submission redirect
A honeypot field for spam protection
reCAPTCHA attributes (if enabled)

Input
Output

{% form "newsletter" %}
  <input type="email" name="email" placeholder="Enter your email">
  <button type="submit">Subscribe</button>
{% endform %}

<form id="form-abc123-x7y9z2" method="POST" action="https://forms.basker.app/forms/abc123">
  <input type="hidden" name="_redirect_url" value="https://example.com/current-page">
  <input type="hidden" name="_redirect_host" value="example.com">
  <input type="email" name="email" placeholder="Enter your email">
  <button type="submit">Subscribe</button>
  <input type="text" name="website_url" style="display:none !important;" tabindex="-1" autocomplete="off" aria-hidden="true">
</form>

Spam Protection

Honeypot Field

Every form includes an automatically generated honeypot field. This hidden field is invisible to users but will catch most spam bots:

The field name is randomly selected from a pool of common spam targets
The field is completely hidden using CSS
Has tabindex="-1" to prevent keyboard navigation
Has autocomplete="off" to prevent browser autofill
Has aria-hidden="true" for accessibility

reCAPTCHA v3 Integration

If Google reCAPTCHA is enabled in your tenant’s Google app settings, forms automatically include reCAPTCHA v3 protection:

Enable reCAPTCHA in the Basker CMS under Apps > Google
Add your site key from the Google reCAPTCHA admin console
Forms will automatically include reCAPTCHA validation

When reCAPTCHA is active:

The form gets data-recaptcha="true" attribute
A reCAPTCHA token is generated on form submission
The token is validated server-side before processing

<!-- With reCAPTCHA enabled -->
<form id="form-abc123-x7y9z2"
      method="POST"
      action="https://forms.basker.app/forms/abc123"
      data-recaptcha="true"
      data-recaptcha-site-key="your-site-key"
      data-recaptcha-action="submit">
  ...
</form>

Form Submission Handling

Redirect After Submission

By default, the form redirects back to the current page after submission. The redirect URL is captured in hidden fields:

_redirect_url: The full URL to redirect to
_redirect_host: The host for validation

Success/Error Handling

The Basker forms API handles:

Validation based on form field configuration
Spam filtering (honeypot + reCAPTCHA)
Email notifications
Webhook triggers
Redirect with success/error status

Complete Example

Here’s a complete contact form example with styling hooks:

<section class="contact-form-section">
  <h2>Get in Touch</h2>

  {% form "contact" %}
    <div class="form-row">
      <div class="form-group">
        <label for="first-name">First Name <span class="required">*</span></label>
        <input
          type="text"
          id="first-name"
          name="firstName"
          required
          autocomplete="given-name">
      </div>

      <div class="form-group">
        <label for="last-name">Last Name <span class="required">*</span></label>
        <input
          type="text"
          id="last-name"
          name="lastName"
          required
          autocomplete="family-name">
      </div>
    </div>

    <div class="form-group">
      <label for="email">Email Address <span class="required">*</span></label>
      <input
        type="email"
        id="email"
        name="email"
        required
        autocomplete="email">
    </div>

    <div class="form-group">
      <label for="phone">Phone Number</label>
      <input
        type="tel"
        id="phone"
        name="phone"
        autocomplete="tel">
    </div>

    <div class="form-group">
      <label for="subject">Subject <span class="required">*</span></label>
      <select id="subject" name="subject" required>
        <option value="">Select a subject...</option>
        <option value="general">General Inquiry</option>
        <option value="tickets">Ticket Questions</option>
        <option value="donations">Donations</option>
        <option value="press">Press Inquiry</option>
      </select>
    </div>

    <div class="form-group">
      <label for="message">Message <span class="required">*</span></label>
      <textarea
        id="message"
        name="message"
        rows="5"
        required></textarea>
    </div>

    <div class="form-group form-checkbox">
      <label>
        <input type="checkbox" name="newsletter" value="yes">
        Subscribe to our newsletter
      </label>
    </div>

    <div class="form-actions">
      <button type="submit" class="btn btn-primary">
        Send Message
      </button>
    </div>
  {% endform %}
</section>

Checking Form Availability

You can check if a form exists before rendering:

{% assign contact_form = all_forms['contact'] %}

{% if contact_form %}
  {% form "contact" %}
    <!-- Form fields -->
  {% endform %}
{% else %}
  <p>Contact form is not available.</p>
{% endif %}