MSD Component Snippets

Forms

Table of Contents

Form Wrapper

In general all forms should be wrapped by an HTML-Element with the class frame-type-form_formframework, because several (minor) styles depend on this class.

Code 
<div class="frame-type-form_formframework">
  <form>
    ...
  </form>
</div>

Form Inputs

Text Field

Code 
<div class="form-group">
  <input
    class="form-control"
    name="some-arbitrary-text-field-name"
    placeholder="Label Text Field"
    type="text"
  >
</div>

Select

Code 
<div class="form-group">
  <select
    class="custom-select form-control"
    name="some-arbitrary-select-name"
  >
    <option value="">Label Select</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
    <option value="option-4">Option 4</option>
    <option value="option-5">Option 5</option>
  </select>
</div>

Textarea

Code 
<div class="form-group">
  <textarea
    class="form-control"
    name="some-arbitrary-textarea-name"
    placeholder="Label Textarea"
  ></textarea>
</div>

Checkbox

Code 
<div class="form-group">
  <label class="custom-control custom-checkbox">
    <input
      class="custom-control-input"
      name="some-arbitrary-checkbox-name"
      type="checkbox"
    ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Checkbox</span>
  </label>
</div>

Radio

Code 
<div class="form-group">
  <label class="custom-control custom-radio">
    <input
      class="custom-control-input"
      name="some-arbitrary-radio-group-name"
      type="radio"
      value="option-1"
    ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Option 1</span>
  </label>

  <label class="custom-control custom-radio">
    <input
      class="custom-control-input"
      name="some-arbitrary-radio-group-name"
      type="radio"
      value="option-2"
    ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Option 2</span>
  </label>

  <label class="custom-control custom-radio">
    <input
      class="custom-control-input"
      name="some-arbitrary-radio-group-name"
      type="radio"
      value="option-3"
    ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Option 3</span>
  </label>
</div>

Themes

Theme Secondary

Code 
<div class="theme-secondary p-4">
  <div class="form-group">
    <input
      class="form-control"
      name="some-arbitrary-text-field-name"
      placeholder="Label Text Field"
      type="text"
    >
  </div>

  <div class="form-group">
    <select
      class="custom-select form-control"
      name="some-arbitrary-select-name"
    >
      <option value="">Label Select</option>
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
      <option value="option-3">Option 3</option>
      <option value="option-4">Option 4</option>
      <option value="option-5">Option 5</option>
    </select>
  </div>

  <div class="form-group">
    <textarea
      class="form-control"
      name="some-arbitrary-textarea-name"
      placeholder="Label Textarea"
    ></textarea>
  </div>

  <div class="form-group">
    <label class="custom-control custom-checkbox">
      <input
        class="custom-control-input"
        name="some-arbitrary-checkbox-name"
        type="checkbox"
      ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Checkbox</span>
    </label>
  </div>

  <div class="form-group">
    <label class="custom-control custom-radio">
      <input
        class="custom-control-input"
        name="some-arbitrary-radio-group-name"
        type="radio"
        value="option-1"
      ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Option 1</span>
    </label>
    
    <label class="custom-control custom-radio">
      <input
        class="custom-control-input"
        name="some-arbitrary-radio-group-name"
        type="radio"
        value="option-2"
      ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Option 2</span>
    </label>
    
    <label class="custom-control custom-radio">
      <input
        class="custom-control-input"
        name="some-arbitrary-radio-group-name"
        type="radio"
        value="option-3"
      ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Option 3</span>
    </label>
  </div>
</div>

Multiple Columns

Bootstrap's Grid system which is based on 12 columns can also be used within forms, as demonstrated below.

For details please refer to the page "Grid system" of the official documentation.

Static

Code 
<div class="row">
  <div class="col-4">
    <div class="form-group">
      <input
        class="form-control"
        name="col-static-1-1"
        placeholder="4/12 or 1/3"
        type="text"
      >
    </div>
  </div>

  <div class="col-8">
    <div class="form-group">
      <input
        class="form-control"
        name="col-static-1-2"
        placeholder="8/12 or 2/3"
        type="text"
      >
    </div>
  </div>
</div>

<div class="row">
  <div class="col-3">
    <div class="form-group">
      <input
        class="form-control"
        name="col-static-2-1"
        placeholder="3/12 or 1/4"
        type="text"
      >
    </div>
  </div>

  <div class="col-4">
    <div class="form-group">
      <input
        class="form-control"
        name="col-static-2-2"
        placeholder="4/12 or 1/3"
        type="text"
      >
    </div>
  </div>

  <div class="col-5">
    <div class="form-group">
      <input
        class="form-control"
        name="col-static-2-3"
        placeholder="5/12"
        type="text"
      >
    </div>
  </div>
</div>

Responsive

The Grid system's distribution can also be applied based on the predefined viewport sizes sm, md, lg and xl.

For details please refer to the section "Grid Options" on the page "Grid system" of the official documentation.

Please resize your browser window to see the effect of the example below.

Code 
<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <input
        class="form-control"
        name="col-responsive-sm-1"
        placeholder="6/12 or 1/2 on >= 'small' devices"
        type="text"
      >
    </div>
  </div>

  <div class="col-sm-6">
    <div class="form-group">
      <input
        class="form-control"
        name="col-responsive-sm-2"
        placeholder="6/12 or 1/2 on >= 'small' devices"
        type="text"
      >
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <input
        class="form-control"
        name="col-responsive-md-1"
        placeholder="4/12 or 1/3 on >= 'medium' devices"
        type="text"
      >
    </div>
  </div>

  <div class="col-md-8">
    <div class="form-group">
      <input
        class="form-control"
        name="col-responsive-md-2"
        placeholder="8/12 or 2/3 on >= 'medium' devices"
        type="text"
      >
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-3">
    <div class="form-group">
      <input
        class="form-control"
        name="col-responsive-lg-1"
        placeholder="3/12 or 1/4 on >= 'large' devices"
        type="text"
      >
    </div>
  </div>

  <div class="col-lg-9">
    <div class="form-group">
      <input
        class="form-control"
        name="col-responsive-lg-2"
        placeholder="9/12 or 3/4 on >= 'large' devices"
        type="text"
      >
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xl-2">
    <div class="form-group">
      <input
        class="form-control"
        name="col-responsive-xl-1"
        placeholder="2/12 or 1/6 on >= 'extra large' devices"
        type="text"
      >
    </div>
  </div>

  <div class="col-xl-10">
    <div class="form-group">
      <input
        class="form-control"
        name="col-responsive-xl-2"
        placeholder="10/12 or 5/6 on >= 'extra large' devices"
        type="text"
      >
    </div>
  </div>
</div>

Form Error Style for Required Input Elements After Submit

For demonstration the class submitted has already been set on the <form>-element – normally this has to be done "manually" after submit.

Besides the submitted class, the error style also depends on the wrapper class frame-type-form_formframework and the required attribute of form input elements (the error style is applied on CSS selector .frame-type-form_formframework form.submitted :invalid).

*Required fields.

Code 
<div class="frame-type-form_formframework">
  <!-- The class `submitted` on `<form>` has to be set manually after submitting the form. -->
  <form class="submitted">
    <div class="form-group">
      <input
        class="form-control"
        name="some-arbitrary-text-field-name"
        placeholder="Label Text Field *"
        required="required"
        type="text"
      >
    </div>

    <div class="form-group">
      <select
        class="custom-select form-control"
        name="some-arbitrary-select-name"
        required="required"
      >
        <option value="">Label Select*</option>
        <option value="option-1">Option 1</option>
        <option value="option-2">Option 2</option>
        <option value="option-3">Option 3</option>
        <option value="option-4">Option 4</option>
        <option value="option-5">Option 5</option>
      </select>
    </div>

    <div class="form-group">
      <textarea
        class="form-control"
        name="some-arbitrary-textarea-name"
        placeholder="Label Textarea *"
        required="required"
      ></textarea>
    </div>

    <div class="form-group">
      <label class="custom-control custom-checkbox">
        <input
          class="custom-control-input"
          name="some-arbitrary-checkbox-name"
          required="required"
          type="checkbox"
        ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Checkbox*</span>
      </label>
    </div>

    <div class="form-group">
      <label class="custom-control custom-radio">
        <input
          class="custom-control-input"
          name="some-arbitrary-radio-group-name"
          required="required"
          type="radio"
          value="option-1"
        ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Option 1*</span>
      </label>

      <label class="custom-control custom-radio">
        <input
          class="custom-control-input"
          name="some-arbitrary-radio-group-name"
          required="required"
          type="radio"
          value="option-2"
        ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Option 2*</span>
      </label>

      <label class="custom-control custom-radio">
        <input
          class="custom-control-input"
          name="some-arbitrary-radio-group-name"
          required="required"
          type="radio"
          value="option-3"
        ><span class="custom-control-indicator"></span><span class="custom-control-description">Label Option 3*</span>
      </label>
    </div>

    <p>
      <em>*Required fields.</em>
    </p>

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

Contact Form Example

* Mandatory field

Code 
<div class="frame-type-form_formframework">
  <form>
    <div class="form-group">
      <label class="custom-control custom-radio">
        <input
          class="custom-control-input"
          name="salutation"
          type="radio"
          value="mr"
        ><span class="custom-control-indicator"></span><span class="custom-control-description">Mr.</span>
      </label>
      
      <label class="custom-control custom-radio">
        <input
          class="custom-control-input"
          name="salutation"
          type="radio"
          value="mrs"
        ><span class="custom-control-indicator"></span><span class="custom-control-description">Mrs.</span>
      </label>
      
      <label class="custom-control custom-radio">
        <input
          class="custom-control-input"
          name="salutation"
          type="radio"
          value="diverse"
        ><span class="custom-control-indicator"></span><span class="custom-control-description">Diverse</span>
      </label>
    </div>
    
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <input
            class="form-control"
            name="firstName"
            required="required"
            placeholder="First Name *"
            type="text"
          >
        </div>
      </div>
      
      <div class="col-sm-6">
        <div class="form-group">
          <input
            class="form-control"
            name="lastName"
            required="required"
            placeholder="Last Name *"
            type="text"
          >
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <input
            class="form-control"
            name="email"
            required="required"
            placeholder="Email *"
            type="text"
          >
        </div>
      </div>
      
      <div class="col-sm-6">
        <div class="form-group">
          <input
            class="form-control"
            name="phone"
            placeholder="Telephone Number"
            type="text"
          >
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <input
            class="form-control"
            name="company"
            required="required"
            placeholder="Company *"
            type="text"
          >
        </div>
      </div>
      
      <div class="col-sm-6">
        <div class="form-group">
          <select
            class="custom-select form-control"
            name="country"
            required="required"
          >
            <option value="">Country *</option>
            <option value="AD">Andorra</option>
            <option value="BB">Barbados</option>
            <option value="CV">Cabo Verde</option>
            <option value="etc">and so on ...</option>
          </select>
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <input
            class="form-control"
            name="street"
            placeholder="Street and Number"
            type="text"
          >
        </div>
      </div>
      
      <div class="col-sm-3 col-lg-2">
        <div class="form-group">
          <input
            class="form-control"
            name="zip"
            placeholder="ZIP"
            type="text"
          >
        </div>
      </div>
      
      <div class="col-sm-3 col-lg-4">
        <div class="form-group">
          <input
            class="form-control"
            name="city"
            placeholder="City"
            type="text"
          >
        </div>
      </div>
    </div>
    
    <div class="form-group">
      <select
        class="custom-select form-control"
        name="industry"
        required="required"
      >
        <option value="">Industry *</option>
        <option value="agriculture">Agriculture</option>
        <option value="buildingIndustryServices">Building Industry / Services</option>
        <option value="chemicalBasicChemicals">Chemical - Basic Chemicals</option>
        <option value="etc">and so on ...</option>
      </select>
    </div>
    
    <div class="form-group">
      <select
        class="custom-select form-control"
        name="purpose"
        required="required"
      >
        <option value="">Purpose *</option>
        <option value="productInquiry">Product Inquiry</option>
        <option value="callBack">Call Back</option>
        <option value="consultingRequest">Consulting Request</option>
        <option value="offerQuote">Offer / Quote</option>
        <option value="serviceSpareParts">Service / Spare Parts</option>
      </select>
    </div>
    
    <div class="form-group">
      <textarea
        class="form-control"
        name="your-inquiry"
        placeholder="Your Inquiry *"
        required="required"
      ></textarea>
    </div>
    
    <div class="form-group">
      <label
        class="control-label"
        for="attachment"
      >Attachment</label>
      
      <div class="input">
        <input
          id="attachment"
          type="file"
          name="attachment"
        >
      </div>
    </div>
    
    <div class="form-group">
      <label class="custom-control custom-checkbox">
        <input
          class="custom-control-input"
          name="has-accepted-terms-and-conditions-and-read-data-protection-declaration"
          required="required"
          type="checkbox"
        ><span class="custom-control-indicator"></span><span class="custom-control-description">I agree to the terms
          and conditions of LEWA GmbH and have read the data protection declaration. *</span>
      </label>
    </div>
    
    <div class="form-group">
      <label class="custom-control custom-checkbox">
        <input
          class="custom-control-input"
          name="has-accepted-processing-of-user-data"
          type="checkbox"
        ><span class="custom-control-indicator"></span><span class="custom-control-description">I agree to the
          processing of my data for marketing purposes. This includes, for example, sending our newsletter and further
          information about new products, company news, advertising campaigns, invitations to events or other relevant
          events.</span>
      </label>
    </div>
    
    <div class="mt-5">
      <div class="row align-items-center">
        <div class="col col-auto">
          <button
            class="btn btn-primary pr-0"
            type="submit"
          >
            Submit
          </button>
        </div>
        
        <div class="col col-auto">
          <p>
            * Mandatory field
          </p>
        </div>
      </div>
    </div>
  </form>
</div>