form

The form tag creates HTML forms with predefined actions for common Qumra operations like login, signup, customer verification, and localization.

Description

The form tag generates a <form> element with the appropriate method and action based on the form type. It supports various form types including authentication forms, customer management forms, and localization forms.

Syntax

{% form 'form_type', attributes %}
  <!-- form content -->
{% endform %}

Parameters

• form_type (required): The type of form to create. Available types:
  • 'login' - User login form
  • 'create_customer' - Customer registration form
  • 'customer_verify' - Customer email verification form
  • 'lang' - Language selection form
  • 'currency' - Currency selection form
  • 'market' - Market selection form
  • Any custom form type (requires action attribute)
• attributes (optional): HTML attributes to add to the form element (e.g., class, id, data-*)

Examples

Login Form

Create a login form for user authentication:

{% form 'login',  class='login-form'  %}
  <input type="email" name="email" placeholder="Email" required>
  <input type="password" name="password" placeholder="Password" required>
  <button type="submit">Login</button>
{% endform %}

Rendered HTML:

<form method="POST" action="/auth/login" class="login-form">
  <input type="email" name="email" placeholder="Email" required>
  <input type="password" name="password" placeholder="Password" required>
  <button type="submit">Login</button>
</form>

Customer Registration Form

Create a customer signup form:

{% form 'create_customer',  id='signup', class='signup-form'  %}
  <input type="text" name="first_name" placeholder="First Name" required>
  <input type="text" name="last_name" placeholder="Last Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <input type="password" name="password" placeholder="Password" required>
  <button type="submit">Sign Up</button>
{% endform %}

Rendered HTML:

<form method="POST" action="/auth/signup" id="signup" class="signup-form">
  <input type="text" name="first_name" placeholder="First Name" required>
  <input type="text" name="last_name" placeholder="Last Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <input type="password" name="password" placeholder="Password" required>
  <button type="submit">Sign Up</button>
</form>

Customer Verification Form

Create a form for email verification:

{% form 'customer_verify' %}
  <label for="code">Verification Code</label>
  <input type="text" name="code" id="code" placeholder="Enter verification code" required>
  <button type="submit">Verify</button>
{% endform %}

Rendered HTML:

<form method="POST" action="/auth/verify">
  <label for="code">Verification Code</label>
  <input type="text" name="code" id="code" placeholder="Enter verification code" required>
  <button type="submit">Verify</button>
</form>

Language Selection Form

Create a form to change the site language:

{% form 'lang',  class='lang-form'  %}
  <select name="lang">
    <option value="en">English</option>
    <option value="ar">العربية</option>
    <option value="fr">Français</option>
  </select>
  <button type="submit">Change Language</button>
{% endform %}

Rendered HTML:

<form method="POST" action="/localize/lang" class="lang-form">
  <select name="lang">
    <option value="en">English</option>
    <option value="ar">العربية</option>
    <option value="fr">Français</option>
  </select>
  <button type="submit">Change Language</button>
</form>

Currency Selection Form

Create a form to change the currency:

{% form 'currency', class='currency-form'  %}
  <select name="currency">
    <option value="USD">USD ($)</option>
    <option value="EUR">EUR (€)</option>
    <option value="GBP">GBP (£)</option>
  </select>
  <button type="submit">Change Currency</button>
{% endform %}

Rendered HTML:

<form method="POST" action="/localize/currency" class="currency-form">
  <select name="currency">
    <option value="USD">USD ($)</option>
    <option value="EUR">EUR (€)</option>
    <option value="GBP">GBP (£)</option>
  </select>
  <button type="submit">Change Currency</button>
</form>

Market Selection Form

Create a form to change the market:

{% form 'market' %}
  <input type="hidden" name="market" value="US">
  <button type="submit">Switch to US Market</button>
{% endform %}

Rendered HTML:

<form method="POST" action="/localize/market">
  <input type="hidden" name="market" value="US">
  <button type="submit">Switch to US Market</button>
</form>

Custom Form with Custom Action

Create a custom form with a custom action URL:

{% form 'search', action='/search', class='search-form', data-test='search' %}
  <input type="text" name="q" placeholder="Search..." required>
  <button type="submit">Search</button>
{% endform %}

Rendered HTML:

<form method="POST" action="/search" class="search-form" data-test="search">
  <input type="text" name="q" placeholder="Search..." required>
  <button type="submit">Search</button>
</form>

Form Types and Actions

Form Type	Action URL	Description
login	/auth/login	User login form
create_customer	/auth/signup	Customer registration form
customer_verify	/auth/verify	Email verification form
lang	/localize/lang	Language selection form
currency	/localize/currency	Currency selection form
market	/localize/market	Market selection form
Custom	Custom (requires action attribute)	Custom form with specified action

Tips

tip

• All forms use POST method by default
• You can add any HTML attributes to the form using the second parameter
• For custom form types, always specify the action attribute
• Use appropriate input names that match the expected backend parameters

Styling Forms

• Add CSS classes to style your forms consistently
• Use semantic HTML elements inside forms for better accessibility
• Consider adding validation attributes like required to form inputs