Overview

Properly mark fields as required
Add help blocks with inputs when necessary, especially when users may not fully understand the purpose of the input
Place constructive action buttons on the right, and deconstructive action buttons on the left of the form
If necessary, place short, related inputs on the same line (e.g., City and State, Start and End, Min and Max)
Ensure that unsaved changes are not easily lost

Don’t

Use placeholders as the only label
Place unrelated inputs on the same line

Field widths

Field widths should communicate the expected or max length of content. Use consistent, non-arbitrary widths to help with alignment. These widths apply to similar controls like selects, date inputs, dropdowns, and sliders. These widths may not be appropriate in some situations or layouts.

Field width

col-sm-2

col-md-4

col-lg-6

Example HTML usage:

<!--Field size-->

<div class="form-group row">
  <div class="col-sm-2">
    <label for="ex1">col-sm-2</label>
    <input class="form-control" id="ex1" type="text" />
  </div>
</div>
<div class="form-group row">
  <div class="col-md-4">
    <label for="ex2">col-md-4</label>
    <input class="form-control" id="ex2" type="text" />
  </div>
</div>
<div class="form-group row">
  <div class="col-lg-6">
    <label for="ex3">col-lg-6</label>
    <input class="form-control" id="ex3" type="text" />
  </div>
</div>

Field size

Example HTML usage:

<!--Field size-->
<form>
  <div class="form-group">
    <input
      class="form-control form-control-lg"
      type="text"
      placeholder=".form-control-lg"
    />
  </div>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="Default input" />
  </div>
  <div class="form-group">
    <input
      class="form-control form-control-sm"
      type="text"
      placeholder=".form-control-sm"
    />
  </div>
</form>

Labels

Form labels can either go above or beside the input, depending on the space constraints. If you are horizontally constrained, place the labels above the input, otherwise, place the labels beside the input. In a responsive design, labels should automatically reposition themselves depending on the space available.

Ensure that clicking on a label focuses the corresponding input
Use sentence capitalization for labels
Use concise labels name
Use the user’s language for labels
Be consistent with label positioning (above/beside)
Be consistent with questions or statements labels

Don’t

Use colons after labels

Vertically aligned labels

Labels are placed above the inputs, left aligned.

Example HTML usage:

<!--Form labels-->
<form>
  <h2>Access your account</h2>
  <div class="form-group">
    <p>Required fields are marked with an asterisk (<span class="text-danger">*</span>).</p>
    
  </div>
  <div class="form-group">
    <label for="exampleFLInputEmail" class="required">Email address</label>
    <input
      type="email"
      class="form-control"
      id="exampleFLInputEmail"
      required
      aria-required="true"
    />
  </div>
  <div class="form-group">
    <label for="examplFLeInputPassword" class="required">Password</label>
    <input
      type="password"
      class="form-control"
      id="examplFLeInputPassword"
      required
      aria-required="true"
    />
  </div>
</form>

Required fields

Add asterisk symbol (*) to the required fields with .required class to the form label.

Example HTML usage:

<!--Required fields-->
<form>
  <div class="form-group">
    <label for="exampleOFStreetAddress" class="required"
      >Street address 1</label
    >
    <input
      type="email"
      class="form-control"
      id="exampleOFStreetAddress"
      required
      aria-required="true"
    />
  </div>
</form>

Optional fields

Add (optional) to the optional fields with .optional class to the form label.

Example HTML usage:

<!--Optional fields-->
<form>
  <div class="form-group">
    <label for="exampleOFStreetAddress2" class="optional"
      >Street address 2</label
    >
    <input type="email" class="form-control" id="exampleOFStreetAddress2" />
  </div>
</form>

Form validation

There are two main types of form validation, often used together.

Field level: Validation errors appear directly below the field with errors (e.g., This field is required.)
Form level: Validation errors appear at the top or bottom of the form (e.g., The email or password you entered is incorrect., and Please fix the 3 errors.)

For input fields that are cramped, you may need to resort to using a popover error message.

Scroll to and focus the first field with an error when the submit button is pressed.
Provide validation feedback as soon as possible, either 500ms after a key is pressed, when the field loses focus, or (if all else fails) when the form is submitted.
Provide field level validation for fields that are known to be invalid
Provide form level validation for large forms, or when the system doesn’t know exactly which field is invalid
Describe why an error occurred (e.g., Email is already in use rather than There was an error)
Describe/imply what the user should do to fix the error

Don’t

Cause the form to ‘bounce’ as validation errors show/hide while the user is typing
Include technical jargon in errors

Example HTML usage:

<!-- Form validation -->
<form>
  <div class="form-group">
    <label for="validationServer01" class="required">Invalid</label>
    <input
      type="text"
      value="john.smith@gmail"
      class="form-control is-invalid"
      id="validationServer01"
      required
      aria-required="true"
    />
    <div id="validationServer01Feedback" class="invalid-feedback">
      This email address is not valid.
    </div>
  </div>

  <div class="form-group">
    <label for="validationServer02" class="required">Required</label>
    <input
      type="text"
      class="form-control is-invalid"
      id="validationServer02"
      required
      aria-required="true"
    />
    <div id="validationServer02Feedback" class="invalid-feedback">
      This field is required.
    </div>
  </div>

  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Example HTML usage:

<!--Incorrect forms-->
<form>
  <div class="mb-2 alert alert-danger" role="alert">
    <div class="alert-icon">
      <i class="material-icons">error</i>
    </div>
    <div>The email or password you entered is incorrect.</div>
  </div>
  <div class="form-group">
    <label for="exampleIFInputEmail" class="required">Email address</label>
    <input
      type="email"
      class="form-control"
      id="exampleIFInputEmail"
      required
      aria-required="true"
    />
  </div>
  <div class="form-group">
    <label for="exampleIFInputPassword" class="required">Password</label>
    <input
      type="password"
      class="form-control"
      id="exampleIFInputPassword"
      aria-required="true"
      required
    />
  </div>
  <button class="btn btn-primary" type="submit">Sign in</button>
</form>

Help text

Help text can be placed at the top of the form, under the heading of a form group, under an individual form field, or as a popover when the field is focused.

Place help text at the top of the form to give information that relates to the entire form
Place help text under the heading of a form group to give information that relates to that form group alone
Place help text beside or under an individual form field that relates to that field alone
Use a popover on an input field (text box, text area, or select) for help text that is lengthy, complex, non-critical, or when screen real estate is limited. Too much help text can make a form look and feel busy and difficult.

Example HTML usage:

<!-- Help text -->
<form>
  <h3>Public profile</h3>
  <p class="form-text text-muted">
    This information will appear on your public profile.
  </p>
  <div class="form-group">
    <label for="exampleHTFullName" class="required">Full name</label>
    <input
      type="text"
      class="form-control"
      id="exampleHTFullName"
      aria-required="true"
      required
    />
  </div>
  <div class="form-group">
    <label for="exampleHTInputEmail" class="required">Email</label>
    <p class="form-hint">This is how people will contact you.</p>
    <input
      type="email"
      class="form-control"
      id="exampleHTInputEmail"
      aria-required="true"
      required
    />
  </div>
  <div class="form-group">
    <label for="examplePopover" class="required">Popover</label>
    <input
      type="password"
      class="form-control"
      id="examplePopover"
      data-html="true"
      data-toggle="popover"
      data-container="body"
      data-trigger="focus"
      data-content="Use at least 8 characters. Don’t use a password from another site, or something too obvious like your pet’s name. <a href=''>Why?</a>"
      data-original-title=""
      title=""
      required
      aria-required="true"
    />
  </div>
</form>

Form groups

If you have many fields, consider organizing related fields into groups. Groups can have a title.

Example HTML usage:

<!-- Form group -->
<form> 
  
  <h3>Personal information</h3>
  <p class="form-text text-muted">Some other help text and information.</p>
  <div class="form-group">
    <label for="exampleFGInputEmail" class="required">Email</label>
    <input
      type="email"
      class="form-control"
      id="exampleFGInputEmail"
      aria-required="true"
      required
    />
  </div>
  <div class="form-group">
    <label for="exampleFGFullName" class="required">Full name</label>
    <input
      type="text"
      class="form-control"
      id="exampleFGFullName"
      aria-required="true"
      required
    />
  </div>
  <h3 class="mt-4">Shipping details</h3>
  <div class="form-group">
    <label for="exampleFGStreetAddress" class="required">Address line 1</label>
    <input
      type="text"
      class="form-control"
      id="exampleFGStreetAddress"
      aria-required="true"
      required
    />
  </div>
  <div class="form-group">
    <label for="exampleFGStreetAddress2" class="optional"
      >Address line 2
    </label>
    <input type="text" class="form-control" id="exampleFGStreetAddress2" />
  </div>
</form>

Input character limits

Most input fields have technical character limits. The system should handle this gracefully in all scenarios.

Text box

In most cases, simply ignore key presses that exceed the limit

Text area

If the limit is low or the expected input size is unknown, include a limit indicator
Update the limit indicator on each key press
Allow the user to keep typing past the indicator, but provide obvious indications that the limit has been exceeded.

Example HTML usage:

<!-- Input character limit -->
<form>
  <div class="form-group">
    <label for="exampleCLFormControlTextarea1" class="required"
      >Description</label
    >
    <textarea
      class="form-control is-invalid no-icon"
      id="exampleCLFormControlTextarea1"
      rows="3"
      required
      aria-required="true"
    >
This textfield has exceed the character limit by 10 characters. The user can still continue to type after reaching the limit, but the field is invalid.</textarea
    >
    <span class="invalid-feedback text-right">
      <strong>150/140</strong> character limit</span
    >
  </div>

  <div class="form-group">
    <label for="exampleCLFormControlTextarea2" class="required"
      >Description</label
    >
    <textarea
      class="form-control"
      id="exampleCLFormControlTextarea2"
      rows="3"
      required
      aria-required="true"
    ></textarea>
  </div>

  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleCLMaxValue" class="required">Max 25</label>
      <input
        type="text"
        class="form-control"
        id="exampleCLMaxValue"
        maxlength="25"
        required
        aria-required="true"
      />
    </div>
  </div>
</form>

Examples

These examples show various form configurations.

Various form elements

Required fields are marked with an asterisk (*).

Your email will be used to log in.

Full name

City

State

Shipping

UPS

FedEx

USPS

Example HTML usage:

<!-- Form example 1 -->
<form>
  <div class="form-group">
    <p>Required fields are marked with an asterisk (<span class="text-danger">*</span>).</p>    
  </div>
  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXInputEmail1" class="required">Email</label>
      <p class="form-hint">Your email will be used to log in.</p>
      <input
        type="email"
        class="form-control"
        id="exampleFXInputEmail1"
        aria-required="true"
        required
      />      
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXFullName1" class="required">Full name</label>
      <input
        type="text"
        class="form-control"
        id="exampleFXFullName1"
        aria-required="true"
        required
      />
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXCity1" class="required">City</label>
      <input
        type="text"
        class="form-control"
        id="exampleFXCity1"
        aria-required="true"
        required
      />
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-4">
      <label for="exampleFXState1" class="required">State</label>
      <select
        class="form-control"
        id="exampleFXState1"
        aria-required="true"
        required
      >
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXShipping1" class="required">Shipping</label>
      <div class="form-check">
        <input
          class="form-check-input"
          type="radio"
          name="exampleFXRadios"
          id="exampleFXRadios1"
          value="option1"
          checked
          required
          aria-required="true"
        />
        <label class="form-check-label" for="exampleFXRadios1"> UPS </label>
      </div>
      <div class="form-check">
        <input
          class="form-check-input"
          type="radio"
          name="exampleFXRadios"
          id="exampleFXRadios2"
          value="option2"
        />
        <label class="form-check-label" for="exampleFXRadios2"> FedEx </label>
      </div>
      <div class="form-check">
        <input
          class="form-check-input"
          type="radio"
          name="exampleFXRadios"
          id="exampleFXRadios3"
          value="option3"
        />
        <label class="form-check-label" for="exampleFXRadios3"> USPS </label>
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Send</button>
</form>

Please fix the 3 errors.

USPTO email address Email must end with uspto.gov.

Employee ID Employee ID must be numeric.

Title

First name

Middle name

Last name This field is required.

Telephone number

Address

Country

Address line 1

Address line 2

City

State

Zip code

Example HTML usage:

<!-- Form example 2 -->
<form>
  <div class="form-group row">
    <div class="col-md-6">
      <div class="mb-2 alert alert-danger" role="alert">
        <div class="alert-icon">
          <i class="material-icons">error</i>
        </div>
        <div>Please fix the 3 errors.</div>
      </div>
    </div>
  </div>

  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXInputEmail2" class="required"
        >USPTO email address</label
      >
      <input
        type="email"
        class="form-control is-invalid no-icon"
        id="exampleFXInputEmail2"
        value="john.smith@gmail.com"
        required
        aria-required="true"
      />
      <span class="invalid-feedback">Email must end with uspto.gov.</span>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXEmployeeID2" class="required"
        >Employee ID
        <!--<a href="#" class="float-right">Find my Employee ID</a>--></label
      >
      <input
        type="text"
        class="form-control is-invalid no-icon"
        id="exampleFXEmployeeID2"
        value="238942a"
        required
        aria-required="true"
      />
      <span class="invalid-feedback">Employee ID must be numeric.</span>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-2">
      <label for="exampleFXTitle1" class="required">Title</label>
      <select
        class="form-control"
        id="exampleFXTitle1"
        aria-required="true"
        required
      >
        <option value="Mr.">Mr.</option>
        <option value="Mrs.">Mrs.</option>
        <option value="Miss">Miss</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXInputFirstName2" class="required">First name</label>
      <input
        type="text"
        class="form-control"
        id="exampleFXInputFirstName2"
        value="John"
        required
        aria-required="true"
      />
    </div>
  </div>

  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXInputMiddleName2" class="optional"
        >Middle name
      </label>
      <input
        type="text"
        class="form-control"
        id="exampleFXInputMiddleName2"
        value="John"
      />
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXInputLastName2" class="required">Last name</label>
      <input
        type="email"
        class="form-control is-invalid no-icon"
        id="exampleFXInputLastName2"
        value=""
        required
        aria-required="true"
      />
      <span class="invalid-feedback">This field is required.</span>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXInputTelephone2" class="required"
        >Telephone number</label
      >
      <input
        type="text"
        class="form-control"
        id="exampleFXInputTelephone2"
        value="John"
        required
        aria-required="true"
      />
    </div>
  </div>
  <h3>Address</h3>
  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXInputCountry2" class="required">Country</label>
      <select
        class="form-control"
        id="exampleFXInputCountry2"
        aria-required="true"
        required
      >
        <option value="AF">Afghanistan</option>
        <option value="AX">Åland Islands</option>
        <option value="AL">Albania</option>
        <option value="DZ">Algeria</option>
        <option value="AS">American Samoa</option>
        <option value="AD">Andorra</option>
        <option value="AO">Angola</option>
        <option value="AI">Anguilla</option>
        <option value="AQ">Antarctica</option>
        <option value="AG">Antigua and Barbuda</option>
        <option value="AR">Argentina</option>
        <option value="AM">Armenia</option>
        <option value="AW">Aruba</option>
        <option value="AU">Australia</option>
        <option value="AT">Austria</option>
        <option value="AZ">Azerbaijan</option>
        <option value="BS">Bahamas</option>
        <option value="BH">Bahrain</option>
        <option value="BD">Bangladesh</option>
        <option value="BB">Barbados</option>
        <option value="BY">Belarus</option>
        <option value="BE">Belgium</option>
        <option value="BZ">Belize</option>
        <option value="BJ">Benin</option>
        <option value="BM">Bermuda</option>
        <option value="BT">Bhutan</option>
        <option value="BO">Bolivia, Plurinational State of</option>
        <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
        <option value="BA">Bosnia and Herzegovina</option>
        <option value="BW">Botswana</option>
        <option value="BV">Bouvet Island</option>
        <option value="BR">Brazil</option>
        <option value="IO">British Indian Ocean Territory</option>
        <option value="BN">Brunei Darussalam</option>
        <option value="BG">Bulgaria</option>
        <option value="BF">Burkina Faso</option>
        <option value="BI">Burundi</option>
        <option value="KH">Cambodia</option>
        <option value="CM">Cameroon</option>
        <option value="CA">Canada</option>
        <option value="CV">Cape Verde</option>
        <option value="KY">Cayman Islands</option>
        <option value="CF">Central African Republic</option>
        <option value="TD">Chad</option>
        <option value="CL">Chile</option>
        <option value="CN">China</option>
        <option value="CX">Christmas Island</option>
        <option value="CC">Cocos (Keeling) Islands</option>
        <option value="CO">Colombia</option>
        <option value="KM">Comoros</option>
        <option value="CG">Congo</option>
        <option value="CD">Congo, the Democratic Republic of the</option>
        <option value="CK">Cook Islands</option>
        <option value="CR">Costa Rica</option>
        <option value="CI">Côte d'Ivoire</option>
        <option value="HR">Croatia</option>
        <option value="CU">Cuba</option>
        <option value="CW">Curaçao</option>
        <option value="CY">Cyprus</option>
        <option value="CZ">Czech Republic</option>
        <option value="DK">Denmark</option>
        <option value="DJ">Djibouti</option>
        <option value="DM">Dominica</option>
        <option value="DO">Dominican Republic</option>
        <option value="EC">Ecuador</option>
        <option value="EG">Egypt</option>
        <option value="SV">El Salvador</option>
        <option value="GQ">Equatorial Guinea</option>
        <option value="ER">Eritrea</option>
        <option value="EE">Estonia</option>
        <option value="ET">Ethiopia</option>
        <option value="FK">Falkland Islands (Malvinas)</option>
        <option value="FO">Faroe Islands</option>
        <option value="FJ">Fiji</option>
        <option value="FI">Finland</option>
        <option value="FR">France</option>
        <option value="GF">French Guiana</option>
        <option value="PF">French Polynesia</option>
        <option value="TF">French Southern Territories</option>
        <option value="GA">Gabon</option>
        <option value="GM">Gambia</option>
        <option value="GE">Georgia</option>
        <option value="DE">Germany</option>
        <option value="GH">Ghana</option>
        <option value="GI">Gibraltar</option>
        <option value="GR">Greece</option>
        <option value="GL">Greenland</option>
        <option value="GD">Grenada</option>
        <option value="GP">Guadeloupe</option>
        <option value="GU">Guam</option>
        <option value="GT">Guatemala</option>
        <option value="GG">Guernsey</option>
        <option value="GN">Guinea</option>
        <option value="GW">Guinea-Bissau</option>
        <option value="GY">Guyana</option>
        <option value="HT">Haiti</option>
        <option value="HM">Heard Island and McDonald Islands</option>
        <option value="VA">Holy See (Vatican City State)</option>
        <option value="HN">Honduras</option>
        <option value="HK">Hong Kong</option>
        <option value="HU">Hungary</option>
        <option value="IS">Iceland</option>
        <option value="IN">India</option>
        <option value="ID">Indonesia</option>
        <option value="IR">Iran, Islamic Republic of</option>
        <option value="IQ">Iraq</option>
        <option value="IE">Ireland</option>
        <option value="IM">Isle of Man</option>
        <option value="IL">Israel</option>
        <option value="IT">Italy</option>
        <option value="JM">Jamaica</option>
        <option value="JP">Japan</option>
        <option value="JE">Jersey</option>
        <option value="JO">Jordan</option>
        <option value="KZ">Kazakhstan</option>
        <option value="KE">Kenya</option>
        <option value="KI">Kiribati</option>
        <option value="KP">Korea, Democratic People's Republic of</option>
        <option value="KR">Korea, Republic of</option>
        <option value="KW">Kuwait</option>
        <option value="KG">Kyrgyzstan</option>
        <option value="LA">Lao People's Democratic Republic</option>
        <option value="LV">Latvia</option>
        <option value="LB">Lebanon</option>
        <option value="LS">Lesotho</option>
        <option value="LR">Liberia</option>
        <option value="LY">Libya</option>
        <option value="LI">Liechtenstein</option>
        <option value="LT">Lithuania</option>
        <option value="LU">Luxembourg</option>
        <option value="MO">Macao</option>
        <option value="MK">Macedonia, the former Yugoslav Republic of</option>
        <option value="MG">Madagascar</option>
        <option value="MW">Malawi</option>
        <option value="MY">Malaysia</option>
        <option value="MV">Maldives</option>
        <option value="ML">Mali</option>
        <option value="MT">Malta</option>
        <option value="MH">Marshall Islands</option>
        <option value="MQ">Martinique</option>
        <option value="MR">Mauritania</option>
        <option value="MU">Mauritius</option>
        <option value="YT">Mayotte</option>
        <option value="MX">Mexico</option>
        <option value="FM">Micronesia, Federated States of</option>
        <option value="MD">Moldova, Republic of</option>
        <option value="MC">Monaco</option>
        <option value="MN">Mongolia</option>
        <option value="ME">Montenegro</option>
        <option value="MS">Montserrat</option>
        <option value="MA">Morocco</option>
        <option value="MZ">Mozambique</option>
        <option value="MM">Myanmar</option>
        <option value="NA">Namibia</option>
        <option value="NR">Nauru</option>
        <option value="NP">Nepal</option>
        <option value="NL">Netherlands</option>
        <option value="NC">New Caledonia</option>
        <option value="NZ">New Zealand</option>
        <option value="NI">Nicaragua</option>
        <option value="NE">Niger</option>
        <option value="NG">Nigeria</option>
        <option value="NU">Niue</option>
        <option value="NF">Norfolk Island</option>
        <option value="MP">Northern Mariana Islands</option>
        <option value="NO">Norway</option>
        <option value="OM">Oman</option>
        <option value="PK">Pakistan</option>
        <option value="PW">Palau</option>
        <option value="PS">Palestinian Territory, Occupied</option>
        <option value="PA">Panama</option>
        <option value="PG">Papua New Guinea</option>
        <option value="PY">Paraguay</option>
        <option value="PE">Peru</option>
        <option value="PH">Philippines</option>
        <option value="PN">Pitcairn</option>
        <option value="PL">Poland</option>
        <option value="PT">Portugal</option>
        <option value="PR">Puerto Rico</option>
        <option value="QA">Qatar</option>
        <option value="RE">Réunion</option>
        <option value="RO">Romania</option>
        <option value="RU">Russian Federation</option>
        <option value="RW">Rwanda</option>
        <option value="BL">Saint Barthélemy</option>
        <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
        <option value="KN">Saint Kitts and Nevis</option>
        <option value="LC">Saint Lucia</option>
        <option value="MF">Saint Martin (French part)</option>
        <option value="PM">Saint Pierre and Miquelon</option>
        <option value="VC">Saint Vincent and the Grenadines</option>
        <option value="WS">Samoa</option>
        <option value="SM">San Marino</option>
        <option value="ST">Sao Tome and Principe</option>
        <option value="SA">Saudi Arabia</option>
        <option value="SN">Senegal</option>
        <option value="RS">Serbia</option>
        <option value="SC">Seychelles</option>
        <option value="SL">Sierra Leone</option>
        <option value="SG">Singapore</option>
        <option value="SX">Sint Maarten (Dutch part)</option>
        <option value="SK">Slovakia</option>
        <option value="SI">Slovenia</option>
        <option value="SB">Solomon Islands</option>
        <option value="SO">Somalia</option>
        <option value="ZA">South Africa</option>
        <option value="GS">South Georgia and the South Sandwich Islands</option>
        <option value="SS">South Sudan</option>
        <option value="ES">Spain</option>
        <option value="LK">Sri Lanka</option>
        <option value="SD">Sudan</option>
        <option value="SR">Suriname</option>
        <option value="SJ">Svalbard and Jan Mayen</option>
        <option value="SZ">Swaziland</option>
        <option value="SE">Sweden</option>
        <option value="CH">Switzerland</option>
        <option value="SY">Syrian Arab Republic</option>
        <option value="TW">Taiwan, Province of China</option>
        <option value="TJ">Tajikistan</option>
        <option value="TZ">Tanzania, United Republic of</option>
        <option value="TH">Thailand</option>
        <option value="TL">Timor-Leste</option>
        <option value="TG">Togo</option>
        <option value="TK">Tokelau</option>
        <option value="TO">Tonga</option>
        <option value="TT">Trinidad and Tobago</option>
        <option value="TN">Tunisia</option>
        <option value="TR">Turkey</option>
        <option value="TM">Turkmenistan</option>
        <option value="TC">Turks and Caicos Islands</option>
        <option value="TV">Tuvalu</option>
        <option value="UG">Uganda</option>
        <option value="UA">Ukraine</option>
        <option value="AE">United Arab Emirates</option>
        <option value="GB">United Kingdom</option>
        <option value="US" selected>United States</option>
        <option value="UM">United States Minor Outlying Islands</option>
        <option value="UY">Uruguay</option>
        <option value="UZ">Uzbekistan</option>
        <option value="VU">Vanuatu</option>
        <option value="VE">Venezuela, Bolivarian Republic of</option>
        <option value="VN">Viet Nam</option>
        <option value="VG">Virgin Islands, British</option>
        <option value="VI">Virgin Islands, U.S.</option>
        <option value="WF">Wallis and Futuna</option>
        <option value="EH">Western Sahara</option>
        <option value="YE">Yemen</option>
        <option value="ZM">Zambia</option>
        <option value="ZW">Zimbabwe</option>
      </select>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXStreetAddress" class="required"
        >Address line 1</label
      >
      <input
        type="text"
        class="form-control"
        id="exampleFXStreetAddress"
        aria-required="true"
        required
      />
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXStreetAddress2" class="optional"
        >Address line 2
      </label>
      <input type="text" class="form-control" id="exampleFXStreetAddress2" />
    </div>
  </div>

  <div class="form-group row">
    <div class="col-md-6">
      <label for="exampleFXCity2" class="required">City</label>
      <input
        type="text"
        class="form-control"
        id="exampleFXCity2"
        aria-required="true"
        required
      />
    </div>
  </div>

  <div class="form-group row">
    <div class="col-md-4">
      <label for="exampleFXState2" class="required">State</label>
      <select
        class="form-control"
        id="exampleFXState2"
        aria-required="true"
        required
      >
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>
    <div class="col-md-2">
      <label for="exampleFXZip2" class="required">Zip code</label>
      <input
        type="text"
        class="form-control"
        id="exampleFXZip2"
        aria-required="true"
        required
      />
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-6">
      <button class="btn btn-secondary float-left" type="submit">Cancel</button>
      <button class="btn btn-primary float-right" type="submit" disabled>
        Next
      </button>
    </div>
  </div>
</form>