Contact form

Default contact form

HTML


<form method="GET" action="#" class="orc-c-form  orc-js-form">

  <input type="hidden" name="_token" value="">

  <div class="orc-c-form__body">

    <div class="orc-c-field  orc-js-field">

      <label for="contact-first-name" class="orc-c-field__label ">First Name</label>

      <div class="orc-c-field__body">

        <input type="" id="contact-first-name" class="orc-c-input " name="given-name" placeholder="First Name" value="" title="Please enter your first name." required="required" autocomplete="given-name" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->


    <div class="orc-c-field  orc-js-field">

      <label for="contact-last-name" class="orc-c-field__label ">Last Name</label>

      <div class="orc-c-field__body">

        <input type="" id="contact-last-name" class="orc-c-input " name="family-name" placeholder="Last Name" value="" title="Please enter your last name." required="required" autocomplete="family-name" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->


    <div class="orc-c-field  orc-js-field">

      <label for="contact-company" class="orc-c-field__label ">Company&#x2F;Organization</label>

      <div class="orc-c-field__body">

        <input type="" id="contact-company" class="orc-c-input " name="org" placeholder="Company&#x2F;Organization" value="" title="Please enter a company&#x2F;organization." required="required" autocomplete="org" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->



    <div class="orc-c-field  orc-js-field">

      <label for="contact-address-1" class="orc-c-field__label ">Address</label>

      <div class="orc-c-field__body">

        <input type="" id="contact-address-1" class="orc-c-input " name="street-address" placeholder="Address" value="" title="Please enter a valid address." required="required" autocomplete="street-address" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--address-->

    <div class="orc-c-field  orc-js-field">

      <label for="contact-city" class="orc-c-field__label ">City</label>

      <div class="orc-c-field__body">

        <input type="" id="contact-city" class="orc-c-input " name="address-level2" placeholder="City" value="" title="Please enter a valid city." required="required" autocomplete="address-level2" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--city-->

    <div class="orc-c-field  orc-js-field">

      <label for="contact-zip" class="orc-c-field__label ">Zip&#x2F;postal Code</label>

      <div class="orc-c-field__body">

        <input type="" id="contact-zip" class="orc-c-input " name="postal-code" placeholder="Zip Code" value="" title="Please enter a valid zip&#x2F;postal code." required="required" autocomplete="postal-code" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--zip-->

    <div class="orc-c-field  orc-js-field">

      <label for="contact-country" class="orc-c-field__label">Country</label>

      <div class="orc-c-field__body">

        <input type="" id="contact-country" class="orc-c-input orc-js-typeahead-country" name="country-name" title="Please enter a valid country." placeholder="Country" value="" required="required" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--country-->

    <div class="orc-c-field  orc-js-field">

      <label for="contact-zip" class="orc-c-field__label">Questions&#x2F;Comments</label>

      <div class="orc-c-field__body">

        <textarea class="orc-c-textarea " id="contact-zip" placeholder="Questions&#x2F;Comments" value="" rows="5"></textarea>

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--country-->

  </div>
  <!--end orc-c-form__body-->

  <div class="orc-c-form__footer">

    <div class="orc-c-btn-group ">

      <button class="orc-c-btn ">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
      <!-- end orc-c-btn -->


      <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
      <!-- end orc-c-btn -->




    </div>
    <!--end orc-c-btn-group-->



  </div>
  <!--end orc-c-form__footer-->

</form>
<!--end orc-c-form-->

When to use

Use when we need to give the user a way to provide details or a message to an administrator at The Cosmopolitan.

When to consider an alternative

If there isn’t a need to send a message, an avatar block is a more visual way to display someone’s contact information (usually a phone number and email address).

Class Name	Description
`orc-c-form` Required	Applied to the outer `<form>` element. This `form` element will help allow the data in the fields to be submitted. An `input` with a `type` of `hidden` and a `name` of `_token` needs to be added within this form as the first element for submission reasons.
`orc-js-form` JS	Applied to the `<form>` element so that JavaScript can target this form.
`orc-c-form___body` Required	Inner container of the `orc-c-form`.
`orc-c-field` Required	Form field within the `orc-c-form`. Consists of a field label, field body, and input in most cases.
`orc-js-field` JS	Class added to `orc-c-field` to have JavaScript target this element, mainly for form field validation
`orc-c-field__label` Required	Form field label used to describe the input within the field
`orc-c-field__body` Required	Form field container that houses the input and other form field content.
`orc-c-input` Required	Form field input. Inputs can be of various types. The contact form has types of “text”.
`orc-c-textarea` Required	Textarea input within the contact form. This is used with the `<textarea>` tag.
`orc-c-form__footer` Required	The bottom portion of the form that houses items like the button group
`orc-c-btn-group` Required	Button group containing the buttons to submit the contact form or any other actions needed within the form.

Default contact form `orc-c-form`

Usage

When to use

When to consider an alternative