Form Components

Contact forms, quote requests, and authentication. 6 variants with built-in validation and TD-20 integration.

Contact Form Variants

The contact-form component handles general inquiries, quote requests, and custom field configurations.

Variant: contact

Standard contact form with name, email, phone, and message fields. The most common form type.

Contact Form

Standard contact form for general inquiries

{
  "component": "contact-form",
  "variant": "contact",
  "data": {
    "formId": "contact-form",
    "heading": "Contact Form",
    "subheading": "Standard contact form for general inquiries",
    "submitText": "Send Message",
    "bg": "light"
  }
}

<section class="contact-form-component bg-light py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <h2 class="text-center mb-3">Contact Form</h2>
        <form id="contact-form" class="card shadow-sm">
          <div class="card-body p-4">
            <!-- Name, Email, Phone, Message fields -->
            <button type="submit" class="btn btn-primary">Send Message</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Variant: quote

Quote request form with additional fields for project details, services, and file upload for specifications.

Quote Request Form

Get a detailed quotation for your project

Company Name *

Contact Person *

Email *

Phone *

Service Required *

Project Details *

Attach Files (optional) Upload images, drawings, or specifications (max 5MB per file)

{
  "component": "contact-form",
  "variant": "quote",
  "data": {
    "formId": "quote-form",
    "heading": "Quote Request Form",
    "subheading": "Get a detailed quotation for your project",
    "submitText": "Request Quote",
    "bg": "white"
  }
}

<section class="contact-form-component bg-white py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <h2 class="text-center mb-3">Quote Request Form</h2>
        <form id="quote-form" class="card shadow-sm">
          <div class="card-body p-4">
            <!-- Company, Contact, Email, Phone, Service, Details, Files -->
            <button type="submit" class="btn btn-primary">Request Quote</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Variant: custom

Custom field configuration. Define your own fields array for any type of form.

Custom Form

Define your own form fields

{
  "component": "contact-form",
  "variant": "custom",
  "data": {
    "formId": "custom-form",
    "heading": "Custom Form",
    "subheading": "Define your own form fields",
    "submitText": "Submit",
    "fields": [
      {
        "name": "company",
        "type": "text",
        "label": "Company Name",
        "required": true,
        "colClass": "col-md-6"
      },
      {
        "name": "industry",
        "type": "select",
        "label": "Industry",
        "required": true,
        "colClass": "col-md-6",
        "options": ["Hotels", "Architecture", "Retail", "Medical", "Other"]
      },
      {
        "name": "email",
        "type": "email",
        "label": "Email Address",
        "required": true,
        "colClass": "col-12"
      },
      {
        "name": "requirements",
        "type": "textarea",
        "label": "Your Requirements",
        "required": false,
        "colClass": "col-12"
      }
    ],
    "bg": "light"
  }
}

<section class="contact-form-component bg-light py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <h2 class="text-center mb-3">Custom Form</h2>
        <form id="custom-form" class="card shadow-sm">
          <div class="card-body p-4">
            <!-- Custom fields based on JSON config -->
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Authentication Forms

The auth-form component handles user authentication with login, signup, and password reset variants.

Variant: login

Welcome Back

{
  "component": "auth-form",
  "variant": "login",
  "data": {
    "heading": "Welcome Back",
    "subheading": "Sign in to your account",
    "showSocial": true,
    "showRemember": true,
    "bg": "white"
  }
}

<section class="auth-form-component bg-white py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-5">
        <div class="card shadow-sm">
          <div class="card-body p-4">
            <h2 class="text-center mb-2">Welcome Back</h2>
            <form>
              <!-- Email, Password, Remember Me, Social Login -->
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Additional Auth Variants

signup: Registration form with name, email, password, and terms checkbox.

forgot-password: Password reset request form with email field only.

All auth forms include proper validation, error handling, and CSRF protection when integrated with backend systems.

Form Integration

All contact forms automatically integrate with TD-20 for serverless form handling. Features include:

Email notifications with customizable templates
Spam protection with honeypot and rate limiting
File uploads (Base64 encoded, up to 5MB per file)
Success/error messages with customizable redirects
Form data validation and sanitization

Configure TD-20 settings in site.json under the forms section.