Profile form

Default profile form

HTML


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

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

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

    <div class="orc-c-text-block orc-c-text-block--bare orc-c-text-block--small orc-u-margin-bottom">


      <h3 class="orc-c-text-block__title">
        Jane Smith
      </h3>

      <div class="orc-c-text-block__desc">
        To update your name, please bring your ID to the Identity Membership & Rewards desk at The Cosmopolitan.
      </div>


    </div>
    <!--end orc-c-text-block-->


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

      <h4 for="" class="orc-c-field__label">Salutation</h4>

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

        <ul class="orc-c-option-list">

          <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

            <label class="orc-c-input-group" for="profile-mr">
                    <input id="profile-mr" type="radio" name="profile-salutation" value="" class="orc-c-input-group__control orc-js-radio-trigger"   >
                    <span class="orc-c-input-group__text">Mr.</span>
                </label>


          </li>
          <!-- end orc-c-radio-list__item -->
          <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

            <label class="orc-c-input-group" for="profile-mrs">
                    <input id="profile-mrs" type="radio" name="profile-salutation" value="" class="orc-c-input-group__control orc-js-radio-trigger"   >
                    <span class="orc-c-input-group__text">Mrs.</span>
                </label>


          </li>
          <!-- end orc-c-radio-list__item -->
          <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

            <label class="orc-c-input-group" for="profile-ms">
                    <input id="profile-ms" type="radio" name="profile-salutation" value="" class="orc-c-input-group__control orc-js-radio-trigger" checked  >
                    <span class="orc-c-input-group__text">Ms.</span>
                </label>


          </li>
          <!-- end orc-c-radio-list__item -->
          <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

            <label class="orc-c-input-group" for="profile-mx">
                    <input id="profile-mx" type="radio" name="profile-salutation" value="" class="orc-c-input-group__control orc-js-radio-trigger"   >
                    <span class="orc-c-input-group__text">Mx.</span>
                </label>


          </li>
          <!-- end orc-c-radio-list__item -->

        </ul>
        <!-- end orc-c-option-list -->

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


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

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

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

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

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

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


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

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

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

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

        <input type="" id="profile-address-1" class="orc-c-input " name="street-address" placeholder="Address" value="665 3rd St., Suite 207" 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="profile-city" class="orc-c-field__label ">City</label>

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

        <input type="" id="profile-city" class="orc-c-input " name="address-level2" placeholder="City" value="San Francisco" 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="profile-state" class="orc-c-field__label">State&#x2F;Region</label>

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

        <input type="" id="profile-state" class="orc-c-input orc-js-typeahead-state" name="address-level1" title="Please enter a valid state or region." placeholder="State" value="CA" required="required" />

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


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

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

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

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

        <input type="" id="profile-zip" class="orc-c-input " name="postal-code" placeholder="Zip Code" value="94107" 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="profile-email" class="orc-c-field__label ">Email</label>

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

        <input type="email" id="profile-email" class="orc-c-input " name="email" placeholder="email@email.com" value="emailaddress@email.com" title="Please enter a valid email." required="required" autocomplete="email" />

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


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

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

      <label for="profile-phone-1" class="orc-c-field__label ">Preferred phone number</label>

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

        <input type="tel" id="profile-phone-1" class="orc-c-input " name="tel1" placeholder="xxx-xxx-xxxx" value="555-555-555" title="Please enter a valid phone number." required="required" autocomplete="tel" />

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


    </div>
    <!-- end orc-c-field -->
    <!--phone-->
    <div class="orc-c-field  orc-js-field">

      <label for="profile-phone-2" class="orc-c-field__label ">Secondary phone number (optional)</label>

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

        <input type="tel" id="profile-phone-2" class="orc-c-input " name="tel2" placeholder="xxx-xxx-xxxx" value="555-555-5555" title="The Cosmopolitan Las Vegas" autocomplete="tel" />

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


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

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

      <h4 class="orc-c-field__label">Receive Text Messages</h4>

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

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

          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="profile-yes" name="profile-text-messages" title="Please choose yes or no." value="" checked />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="profile-yes">
                Yes
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="profile-no" name="profile-text-messages" title="Please choose yes or no." value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="profile-no">
                No
            </label>

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

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

      <div class="orc-c-field__note orc-js-field-note">(Message and data rates may apply)</div>

    </div>
    <!-- end orc-c-field -->
    <!--contact text message-->

  </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

The profile form is specific for managing profile page data. Anywhere you’re creating a profile page, use this component to let users manage it.

When to consider an alternative

This is specifically for managing a user profile. For most other use cases, use a contact form or provide a single text field.

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-c-form--profile` Required	Applied to the outer `<form>` element in addition to `orc-c-form` to add the proper styling to this profile form.
`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. In the profile form, there are text input fields, date fields, checkbox fields, radio fields and toggle fields.
`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-toggle` Required	A field consisting of a radio buttons that are styled as selectable blocks so a user can choose one of these block choices. For more in-depth details on the toggle, go to the toggle component.
`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 profile form `orc-c-form orc-c-form--profile`

Usage

When to use

When to consider an alternative