@mysugr/spring-forms

Spring Forms

Form typography

The headings are different than in on the landing page typography. (Zeplin, Dropbox)

<div class="ms-form">
  <div class="ms-form-item">
    <h2>Angebot freischalten</h2>
    <p>mySugr kooperiert mit Versicherungen, die deine Kosten übernehmen.</p>
  </div>
</div>

Text input

Text input and on lose focus an error state. Also a simple example of using JavaScript packaged in the spring-forms component to validate the field when it loses focus. Select the field, tab to the next one and see the error state. (Zeplin, Dropbox)

<div class="ms-form">
  <div class="ms-form-item">
    <label for="insurance-number" class="control-label">Versicherungsnummer:</label>
    <input type="text" id="insurance-number" value="" placeholder="KK-1234-1234" onblur="ms.textInputValidate(event);" onfocus="ms.textInputFocus(event);">
    <div class="error-message" id="insurance-number-error">Ungültige Versicherungsnummer</div>
  </div>
</div>

Select

Here's an example of a new select component styled without Bootstrap. (Zeplin, Dropbox)

<div class="ms-form">
  <div class="ms-form-item">
    <label for="edit-insurance" class="control-label">Deine Versicherung:</label>
    <select required id="edit-insurance">
      <option disabled selected value>Versicherung</option>
      <option value="gothaer">Gothaer</option>
      <option value="barmenia">Barmenia</option>
      <option value="vkb">VKB (Versicherungskammer Bayern)</option>
      <option value="ukv">UKV (Union Krankenversicherung)</option>
      <option value="other">Andere Versicherung</option>
    </select>
  </div>
</div>

Form Buttons

Form buttons can be different than buttons on the main page (can they really? 🤔). (Zeplin, Dropbox)

<div class="ms-form">
  <div class="ms-form-item">
    <button type="submit" class="ms-btn" id="edit-submit">
      Los geht´s
    </button>
    <div class="small-print">
      Sieh <u><a href="/de/unterstuetzte-smartphones">hier</a></u> ob dein Smartphone mit dem Accu-Chek<sup>®</sup> Guide kompatibel ist.
    </small>
  </div>
</div>

Complete form

Here is an example of how you could compose several elements shown so far into a small, yet complete form.

<div class="ms-form">
  <div class="ms-form-item">
    <h2>Angebot freischalten</h2>
    <p>mySugr kooperiert mit Versicherungen, die deine Kosten übernehmen.</p>
  </div>
  <div class="ms-form-item">
    <label for="edit-insurance" class="control-label">Deine Versicherung:</label>
    <select required id="edit-insurance">
      <option disabled selected value>Versicherung</option>
      <option value="gothaer">Gothaer</option>
      <option value="barmenia">Barmenia</option>
      <option value="vkb">VKB (Versicherungskammer Bayern)</option>
      <option value="ukv">UKV (Union Krankenversicherung)</option>
      <option value="other">Andere Versicherung</option>
    </select>
  </div>
  <div class="ms-form-item">
    <label for="insurance-number2" class="control-label">Versicherungsnummer:</label>
    <input type="text" id="insurance-number2" value="" placeholder="KK-1234-1234" onblur="ms.textInputValidate(event);" onfocus="ms.textInputFocus(event);">
    <div class="error-message" id="insurance-number2-error">Ungültige Versicherungsnummer</div>
  </div>
  <div class="ms-form-item">
    <button type="submit" class="ms-btn" id="edit-submit">
      Los geht´s
    </button>
    <div class="small-print">
      Sieh <u><a href="/de/unterstuetzte-smartphones">hier</a></u> ob dein Smartphone mit dem Accu-Chek<sup>®</sup> Guide kompatibel ist.
    </small>
  </div>
</div>