> ## Documentation Index
> Fetch the complete documentation index at: https://docs.formcertify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Form Tags Reference

> Complete reference for Formcertify HTML data attributes

## Overview

Formcertify uses HTML data attributes to capture important consent information like who is the consenter and the disclosure they are consenting to.

## HTML Data Tags

Form elements must use the `data-fc-type` attribute with one of the following values:

<ParamField path="name" type="string">
  Input field for collecting the user's full name

  ```html theme={null}
  <input type="text" data-fc-type="name" />
  ```
</ParamField>

<ParamField path="phone" type="string">
  Input field for collecting the user's phone number

  ```html theme={null}
  <input type="tel" data-fc-type="phone" />
  ```
</ParamField>

<ParamField path="email" type="string">
  Input field for collecting the user's email address

  ```html theme={null}
  <input type="email" data-fc-type="email" />
  ```
</ParamField>

<ParamField path="consent-disclosure" type="string">
  Container element displaying the consent disclosure langauge shown to the user

  ```html theme={null}
  <div data-fc-type="consent-disclosure">
    By submitting this form, I agree to receive communications from...
  </div>
  ```
</ParamField>

<ParamField path="consent-opt-in" type="string">
  Checkbox input associated with the consent disclosure for explicit opt-in

  ```html theme={null}
  <input 
    type="checkbox" 
    data-fc-type="consent-opt-in"
    required
  />
  ```
</ParamField>

<ParamField path="company-name" type="string">
  Element containing the name of the entity receiving consent

  ```html theme={null}
  <span data-fc-type="company-name">
    ABC Mortgage
  </span>
  ```
</ParamField>

<ParamField path="submit" type="string">
  The form's submit button

  ```html theme={null}
  <button type="submit" data-fc-type="submit">Submit</button>
  ```
</ParamField>

<ParamField path="form" type="string">
  Can be added to the form element itself for explicit form identification

  ```html theme={null}
  <form data-fc-type="form">
    <!-- Form fields here -->
  </form>
  ```
</ParamField>

## Complete Example

Here's a complete example showing all required tags in context:

```html theme={null}
<form data-fc-type="form">
  <div class="form-group">
    <label for="name">Full Name</label>
    <input 
      type="text" 
      id="name"
      data-fc-type="name" 
      required 
    />
  </div>

  <div class="form-group">
    <label for="phone">Phone Number</label>
    <input 
      type="tel" 
      id="phone"
      data-fc-type="phone" 
      required 
    />
  </div>

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

  <div class="consent-box">
    <div data-fc-type="company-name">
      Acme Corporation
    </div>
    
    <div data-fc-type="consent-disclosure">
      By submitting this form, I agree to receive marketing communications from 
      <span data-fc-type="company-name">ABC Mortgage</span>. I understand that I can unsubscribe at any time. Message 
      and data rates may apply.
    </div>

    <input 
      type="checkbox"
      data-fc-type="consent-opt-in"
      required
    />
  </div>

  <button type="submit" data-fc-type="submit">
    Submit Form
  </button>
</form>
```