Request Info Form

The RequestInfoForm component is a comprehensive form pattern designed to collect user information for program inquiries. It combines multiple form elements including text inputs, select dropdowns, and a textarea in a two-column responsive layout.

Accessibility Guidelines

• All form fields include proper label associations
• Required fields are marked with the required attribute
• The form uses semantic HTML structure for better screen reader support
• Select dropdowns include disabled placeholder options to guide user selection
• Error states should be implemented with appropriate aria-invalid and aria-describedby attributes

Request Info Form

The standard request info form with all fields and the reCAPTCHA section enabled.

Request Info

First Name

Last Name

Program of Interest

-- Select a program -- Option 1 Option 2 Option 3 Option 4 Option 5

Location

-- Select a location -- United States Option 2 Option 3 Option 4 Option 5

Postal Code

Email Address

Phone Number

Questions/Comments

Captcha

Let us know that you are not a robot to prevent automated spam submissions.

Submit

<div class="cmp-request-info-form not-content">
  <h2 class="cmp-heading-4 util-text-center">Request Info</h2>
  <div
    class="obj-grid obj-grid--gap-xl@md obj-grid--align-items-start util-margin-horiz-md"
  >
    <div class="obj-grid__full obj-grid__half@md">
      <div class="cmp-form-field util-pad-top-xl">
        <div class="cmp-form-field--required">
          <div class="util-position-relative">
            <input
              id="first-name"
              class="cmp-form-field__input cmp-form-field__input--faux-placeholder"
              type="text"
              name="firstName"
              placeholder=" "
              required
            />
            <label
              for="first-name"
              class="cmp-form-label cmp-form-label--faux-placeholder"
            >
              First Name
            </label>
          </div>
        </div>
      </div>
      <div class="cmp-form-field util-pad-top-xl">
        <div class="cmp-form-field--required">
          <div class="util-position-relative">
            <input
              id="last-name"
              class="cmp-form-field__input cmp-form-field__input--faux-placeholder"
              type="text"
              name="lastName"
              placeholder=" "
              required
            />
            <label
              for="last-name"
              class="cmp-form-label cmp-form-label--faux-placeholder"
            >
              Last Name
            </label>
          </div>
        </div>
      </div>
      <div class="cmp-form-select util-margin-vert-lg">
        <label for="program-of-interest" class="cmp-form-label">
          Program of Interest
        </label>
        <div class>
          <select
            id="program-of-interest"
            class="cmp-form-select__dropdown"
            name="program"
          >
            <option value="" disabled selected>-- Select a program --</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
          </select>
        </div>
      </div>
      <div class="cmp-form-select util-margin-top-lg">
        <label for="location" class="cmp-form-label">Location</label>
        <div class>
          <select
            id="location"
            class="cmp-form-select__dropdown"
            name="location"
          >
            <option value="" disabled selected>-- Select a location --</option>
            <option value="1">United States</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
          </select>
        </div>
      </div>
      <div class="cmp-form-field util-pad-top-xl">
        <div>
          <div class="util-position-relative">
            <input
              id="postal-code"
              class="cmp-form-field__input cmp-form-field__input--faux-placeholder"
              type="text"
              name="postalCode"
              placeholder=" "
            />
            <label
              for="postal-code"
              class="cmp-form-label cmp-form-label--faux-placeholder"
            >
              Postal Code
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="obj-grid__full obj-grid__half@md">
      <div class="cmp-form-field util-pad-top-xl">
        <div class="cmp-form-field--required">
          <div class="util-position-relative">
            <input
              id="email"
              class="cmp-form-field__input cmp-form-field__input--faux-placeholder"
              type="email"
              name="email"
              placeholder=" "
              required
            />
            <label
              for="email"
              class="cmp-form-label cmp-form-label--faux-placeholder"
            >
              Email Address
            </label>
          </div>
        </div>
      </div>
      <div class="cmp-form-field util-pad-top-xl">
        <div>
          <div class="util-position-relative">
            <input
              id="number"
              class="cmp-form-field__input cmp-form-field__input--faux-placeholder"
              type="text"
              name="phone"
              placeholder=" "
            />
            <label
              for="number"
              class="cmp-form-label cmp-form-label--faux-placeholder"
            >
              Phone Number
            </label>
          </div>
        </div>
      </div>
      <div class="cmp-form-field util-pad-top-xl">
        <div>
          <label for="questions" class="cmp-form-label">
            Questions/Comments
          </label>
        </div>
        <textarea
          id="questions"
          class="cmp-form-field__textarea"
          name="questions"
          rows="4"
        ></textarea>
      </div>
    </div>
    <div class="obj-grid__full util-pad-top-xl util-margin-bottom-none@md">
      <p class="cmp-heading-6 util-margin-bottom-none">Captcha</p>
      <p class="util-margin-top-none">
        Let us know that you are not a robot to prevent automated spam
        submissions.
      </p>
      <div class="form-group">
        <div
          class="g-recaptcha"
          data-sitekey="your_key"
          data-theme="light"
        ></div>
        <div class="help-block with-errors"></div>
      </div>
    </div>
    <div class="obj-grid__full obj-grid__third@md">
      <button
        class="cmp-button cmp-button--full-width cmp-button--has-icon"
        type="submit"
      >
        Submit
        <svg
          class="cmp-button__icon cmp-button__icon--right"
          aria-hidden="true"
        >
          <use xlink:href="#icon-arrow-right"></use>
        </svg>
      </button>
    </div>
  </div>
</div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Implementation Notes

Grid Layout

The form uses the obj-grid layout system with responsive breakpoints:

• Full width on mobile
• Two-column layout (obj-grid__half@md) on medium screens and above
• Submit button spans one-third width (obj-grid__third@md) on medium screens

Field Styling

Individual fields use utility classes for consistent spacing:

• Text inputs and textarea use util-pad-top-xl for top padding
• Select dropdowns use util-margin-vert-lg or util-margin-top-lg for vertical spacing
• The captcha section uses util-pad-top-xl and util-margin-bottom-none@md

reCAPTCHA

When using reCAPTCHA:

• Replace your_key with your actual reCAPTCHA site key
• The captcha can be toggled on/off using the showCaptcha prop
• Note: The documentation shows a placeholder. In production, you need to:
  1. Load the Google reCAPTCHA script: <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  2. Replace your_key in the data-sitekey attribute with your actual site key from Google reCAPTCHA
  3. Handle reCAPTCHA verification on your backend