Skip to main content
Components

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

Please enter a valid full name.
Please enter a valid email address.
Please enter a valid phone number.
Please enter a valid company (optional).
Please enter your message.

Thank You!

We'll be in touch within 24 hours.

{
  "component": "contact-form",
  "variant": "contact",
  "data": {
    "formId": "contact-form-preview",
    "heading": "Contact Form",
    "subheading": "Standard contact form for general inquiries",
    "submitText": "Send Message",
    "bg": "light",
    "container": "container-fluid px-0",
    "containerWidth": "col-12"
  }
}
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "LocalBusiness",
      "@id": "https://pagejson.com/#localbusiness",
      "name": "INC64 LLC",
      "url": "https://pagejson.com/",
      "image": "https://pagejson.com/assets/img/logo/logo-placeholder.svg",
      "address": {
        "@type": "PostalAddress"
      }
    },
    {
      "@type": "WebSite",
      "@id": "https://pagejson.com/#website",
      "url": "https://pagejson.com/",
      "name": "PageJSON",
      "description": "PageJSON is the first schema-driven page language. Generate validated JSON page specs with AI, render production-ready HTML with 18+ components and 60+ variants."
    },
    {
      "@type": "WebPage",
      "@id": "https://pagejson.com/components/forms#webpage",
      "url": "https://pagejson.com/components/forms",
      "name": "Form Components",
      "isPartOf": {
        "@id": "https://pagejson.com/#website"
      },
      "about": {
        "@id": "https://pagejson.com/#localbusiness"
      }
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://pagejson.com/components/forms#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://pagejson.com/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Form Components",
          "item": "https://pagejson.com/components/forms"
        }
      ]
    }
  ]
}
<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

Please enter a valid full name.
Please enter a valid email address.
Please enter a valid phone number.
Please enter a valid company.
Please select an option.
Please select an option.
Please enter your project details.

Drag & drop files here or

Max 10 files

Upload photos of items to be refinished

Thank You!

We'll be in touch within 24 hours.

{
  "component": "contact-form",
  "variant": "quote",
  "data": {
    "formId": "quote-form-preview",
    "heading": "Quote Request Form",
    "subheading": "Get a detailed quotation for your project",
    "submitText": "Request Quote",
    "bg": "white",
    "container": "container-fluid px-0",
    "containerWidth": "col-12"
  }
}
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "LocalBusiness",
      "@id": "https://pagejson.com/#localbusiness",
      "name": "INC64 LLC",
      "url": "https://pagejson.com/",
      "image": "https://pagejson.com/assets/img/logo/logo-placeholder.svg",
      "address": {
        "@type": "PostalAddress"
      }
    },
    {
      "@type": "WebSite",
      "@id": "https://pagejson.com/#website",
      "url": "https://pagejson.com/",
      "name": "PageJSON",
      "description": "PageJSON is the first schema-driven page language. Generate validated JSON page specs with AI, render production-ready HTML with 18+ components and 60+ variants."
    },
    {
      "@type": "WebPage",
      "@id": "https://pagejson.com/components/forms#webpage",
      "url": "https://pagejson.com/components/forms",
      "name": "Form Components",
      "isPartOf": {
        "@id": "https://pagejson.com/#website"
      },
      "about": {
        "@id": "https://pagejson.com/#localbusiness"
      }
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://pagejson.com/components/forms#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://pagejson.com/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Form Components",
          "item": "https://pagejson.com/components/forms"
        }
      ]
    }
  ]
}
<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

Please enter a valid company name.
Please select an option.
Please enter a valid email address.
Please enter your your requirements.

Thank You!

We'll be in touch within 24 hours.

{
  "component": "contact-form",
  "variant": "custom",
  "data": {
    "formId": "custom-form-preview",
    "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",
    "container": "container-fluid px-0",
    "containerWidth": "col-12"
  }
}
<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

Login form with email, password, remember me checkbox, and optional social login buttons.

Welcome Back

Sign in to your account

Forgot password?

Don't have an account? Sign up

or continue with
Google Microsoft 
{
  "component": "auth-form",
  "variant": "login",
  "data": {
    "heading": "Welcome Back",
    "subheading": "Sign in to your account",
    "showSocial": true,
    "showRemember": true,
    "bg": "white",
    "colClass": "col-12",
    "cardMaxWidth": null
  }
}
<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>

Variant: signup

Signup form with name, email, password, and terms checkbox.

Create Account

Get started in under a minute

Already have an account? Sign in

or continue with
Google Microsoft 
{
  "component": "auth-form",
  "variant": "signup",
  "data": {
    "heading": "Create Account",
    "subheading": "Get started in under a minute",
    "showSocial": true,
    "bg": "white",
    "colClass": "col-12",
    "cardMaxWidth": null
  }
}
<!-- Auth forms are rendered by the auth-form component -->

Variant: forgot-password

Password reset request form with email field only.

Reset Password

We’ll email you a reset link

Enter your email address and we'll send you a link to reset your password.

Remember your password? Sign in 

{
  "component": "auth-form",
  "variant": "forgot-password",
  "data": {
    "heading": "Reset Password",
    "subheading": "We’ll email you a reset link",
    "showSocial": false,
    "bg": "white",
    "colClass": "col-12",
    "cardMaxWidth": null
  }
}
<!-- Auth forms are rendered by the auth-form component -->

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.