<h3 class="headline headline--headline-1">
    Gleich ausfüllen und mehr Infos bekommen
</h3>
<form class="form">
    <div class="form__inner">
        <fieldset class="form-group form-group--fullwide">
            <legend class="label u-hidden-visually">Mitgliedschaft</legend>
            <div class="form-group__inner">
                <label class="radio radio--nextline">
  <input class="radio__input" type="radio" value="membership" required="required" id="radio-a0d6" name="subject"/><span class="radio__indicator"></span><span class="radio__label">Ja, ich möchte Mitglied der Krankenkasse hkk werden.</span>
</label>
                <label class="radio radio--nextline">
  <input class="radio__input" type="radio" value="info" required="required" id="radio-b79b" name="subject"/><span class="radio__indicator"></span><span class="radio__label">Ja, ich möchte mehr über die Krankenkasse hkk wissen. Senden Sie mir bitte Infomaterial zu.</span>
</label>
            </div>
        </fieldset>
        <fieldset class="form-group form-group--fullwide">
            <legend class="label label--required label--large">Ich bin</legend>
            <div class="form-group__inner">
                <label class="radio radio--nextline">
  <input class="radio__input" type="radio" value="employee" required="required" id="radio-f1d2" name="status"/><span class="radio__indicator"></span><span class="radio__label">Arbeitnehmer oder selbstständig tätig.</span>
</label>
                <label class="radio radio--nextline">
  <input class="radio__input" type="radio" value="student" required="required" id="radio-1b7f" name="status"/><span class="radio__indicator"></span><span class="radio__label">Student oder sonstiges (z.B. Künstler, Beamter).</span>
</label>
            </div>
        </fieldset>
        <fieldset class="form-group form-group--fullwide">
            <legend class="label label--required label--large">Persönliche Informationen</legend>
            <div class="form-group__inner">
                <label class="radio">
  <input class="radio__input" type="radio" value="female" id="radio-99ce" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Frau</span>
</label>
                <label class="radio">
  <input class="radio__input" type="radio" value="male" id="radio-7452" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Herr</span>
</label>
            </div>
        </fieldset>
        <fieldset class="form-group form-group--fullwide form-group--inline">
            <legend class="label u-hidden-visually">Name</legend>
            <div class="form-group__inner">
                <input class="input input--text" type="text" placeholder="Vorname*" required="required" autocomplete="fname" id="input-4a86" name="name" />
                <input class="input input--text" type="text" placeholder="Nachname*" required="required" autocomplete="lname" id="input-5f8b" name="name" />
            </div>
        </fieldset>
        <div class="form-group form-group--fullwide">
            <label class="label" for="birthdate">Geburtsdatum</label>
            <div class="form-group__inner">
                <input class="input input--date" type="date" placeholder="Geburtsdatum*" required="required" autocomplete="birthdate" id="birthdate" name="birthdate" />
            </div>
        </div>
        <div class="form-group form-group--fullwide">
            <label class="label u-hidden-visually" for="address-1">Straße, Hausnummer</label>
            <div class="form-group__inner">
                <input class="input input--text" type="text" placeholder="Straße, Nr.*" required="required" autocomplete="address-line1" id="address-1" name="address-1" />
            </div>
        </div>
        <fieldset class="form-group form-group--fullwide form-group--inline">
            <legend class="label u-hidden-visually">PLZ und Ort</legend>
            <div class="form-group__inner">
                <input class="input input--text input--25" type="text" placeholder="PLZ*" required="required" autocomplete="zipcode" id="input-e6e5" name="address-2" />
                <input class="input input--text input--75" type="text" placeholder="Ort*" required="required" autocomplete="city" id="input-b731" name="address-2" />
            </div>
        </fieldset>
        <fieldset class="form-group form-group--fullwide form-group--inline">
            <legend class="label u-hidden-visually">E-Mail-Addresse und Telefonnummer</legend>
            <div class="form-group__inner">
                <input class="input input--email" type="email" placeholder="E-Mail-Adresse" autocomplete="email" id="input-51d5" name="contact" />
                <input class="input input--tel" type="tel" placeholder="Telefonnummer" autocomplete="telephone" id="input-8ae3" name="contact" />
            </div>
        </fieldset>
        <div class="form-group form-group--fullwide">
            <label class="label u-hidden-visually" for="privacy-policy">Datenschutzerklärung</label>
            <div class="form-group__inner">
                <label class="checkbox">
  <input class="checkbox__input" type="checkbox" value="1" required="required" id="privacy-policy" name="privacy-policy"/><span class="checkbox__indicator"></span><span class="checkbox__label"><span class="formatted-text">Ich akzeptiere die <a href="#">Datenschutzerklärung</a>.*</span></span>
</label>
            </div>
        </div>
        <div class="form__submit">
            <input class="button button--blue" type="submit" value="Abschicken" />
        </div>
    </div>
</form>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  if (id) attr.id = id;
  if (action) attr.action = action;

  //- Process options
  if (inline) attr.class.push('form--inline');
  if (multiline) attr.class.push('form--multiline');
  if (hasInfo) attr.class.push('form--has-info');
  if (centered) attr.class.push('form--centered');
  if (wide) attr.class.push('form--wide');

//- Show title of form
if title
  != include('@headline--headline-1', {level: titleLevel || 3, text: title})

//- Render form
form.form&attributes(attr)
  .form__inner
    if errorExample
      .has-error.has-feedback
        .validation-summary-errors
          ul.list-group
            li.list-group-item.list-group-item-danger
              span(role='alert') Das Feld X ist erforderlich. Geben Sie einen Wert ein.
    //- Render form groups
    if elements

      //- Multiline
      if multiline
        .form__elements
          for element in elements
            != include('@form-group', element)

      //- Default
      else
        for element in elements
          != include('@form-group', element)

    //- Render submit button
    if submit
      -
        //- Submit attributes
        submitAttr = submitAttr || {}
        submitAttr.class = classList(submitAttr.class);

        //- Submit options
        submitOptions = submitOptions || {};
        submitOptions.text = submit;

        //- Multiline submit
        if (submitOptions.nextLine) submitAttr.class.push('form__submit--nextline');

        //- Hideable
        if (submitOptions.hideable) submitAttr['data-hideable'] = true;

      .form__submit&attributes(submitAttr)
        input.button.button--blue(type='submit', value=submit)
        //- != include('@button--blue', submitOptions)

  //- Footer
  if footer
    footer.form__footer
      != renderPug(footer.content)
{
  "title": "Gleich ausfüllen und mehr Infos bekommen",
  "submit": "Abschicken",
  "elements": [
    {
      "label": "Mitgliedschaft",
      "name": "subject",
      "labelSettings": {
        "hidden": true
      },
      "fullwide": true,
      "group": [
        {
          "use": "radio",
          "settings": {
            "text": "Ja, ich möchte Mitglied der Krankenkasse hkk werden.",
            "value": "membership",
            "required": true,
            "nextline": true
          }
        },
        {
          "use": "radio",
          "settings": {
            "text": "Ja, ich möchte mehr über die Krankenkasse hkk wissen. Senden Sie mir bitte Infomaterial zu.",
            "value": "info",
            "required": true,
            "nextline": true
          }
        }
      ]
    },
    {
      "label": "Ich bin",
      "labelSettings": {
        "required": true,
        "modifier": "large"
      },
      "name": "status",
      "fullwide": true,
      "group": [
        {
          "use": "radio",
          "settings": {
            "required": true,
            "nextline": true,
            "text": "Arbeitnehmer oder selbstständig tätig.",
            "value": "employee"
          }
        },
        {
          "use": "radio",
          "settings": {
            "required": true,
            "nextline": true,
            "text": "Student oder sonstiges (z.B. Künstler, Beamter).",
            "value": "student"
          }
        }
      ]
    },
    {
      "label": "Persönliche Informationen",
      "name": "gender",
      "labelSettings": {
        "required": true,
        "modifier": "large"
      },
      "fullwide": true,
      "group": [
        {
          "use": "radio",
          "settings": {
            "text": "Frau",
            "value": "female"
          }
        },
        {
          "use": "radio",
          "settings": {
            "text": "Herr",
            "value": "male"
          }
        }
      ]
    },
    {
      "label": "Name",
      "name": "name",
      "labelSettings": {
        "hidden": true
      },
      "inline": true,
      "fullwide": true,
      "group": [
        {
          "use": "input--text",
          "settings": {
            "placeholder": "Vorname*",
            "required": true,
            "attr": {
              "autocomplete": "fname"
            }
          }
        },
        {
          "use": "input--text",
          "settings": {
            "placeholder": "Nachname*",
            "required": true,
            "attr": {
              "autocomplete": "lname"
            }
          }
        }
      ]
    },
    {
      "label": "Geburtsdatum",
      "id": "birthdate",
      "use": "input--text",
      "fullwide": true,
      "settings": {
        "placeholder": "Geburtsdatum*",
        "required": true,
        "type": "date",
        "attr": {
          "autocomplete": "birthdate"
        }
      }
    },
    {
      "label": "Straße, Hausnummer",
      "labelSettings": {
        "hidden": true
      },
      "id": "address-1",
      "use": "input--text",
      "fullwide": true,
      "settings": {
        "placeholder": "Straße, Nr.*",
        "required": true,
        "attr": {
          "autocomplete": "address-line1"
        }
      }
    },
    {
      "label": "PLZ und Ort",
      "name": "address-2",
      "labelSettings": {
        "hidden": true
      },
      "inline": true,
      "fullwide": true,
      "group": [
        {
          "use": "input--text",
          "settings": {
            "placeholder": "PLZ*",
            "required": true,
            "size": 25,
            "attr": {
              "autocomplete": "zipcode"
            }
          }
        },
        {
          "use": "input--text",
          "settings": {
            "placeholder": "Ort*",
            "required": true,
            "size": 75,
            "attr": {
              "autocomplete": "city"
            }
          }
        }
      ]
    },
    {
      "label": "E-Mail-Addresse und Telefonnummer",
      "name": "contact",
      "labelSettings": {
        "hidden": true
      },
      "inline": true,
      "fullwide": true,
      "group": [
        {
          "use": "input--text",
          "settings": {
            "placeholder": "E-Mail-Adresse",
            "type": "email",
            "attr": {
              "autocomplete": "email"
            }
          }
        },
        {
          "use": "input--text",
          "settings": {
            "placeholder": "Telefonnummer",
            "type": "tel",
            "attr": {
              "autocomplete": "telephone"
            }
          }
        }
      ]
    },
    {
      "label": "Datenschutzerklärung",
      "labelSettings": {
        "hidden": true
      },
      "id": "privacy-policy",
      "use": "checkbox",
      "fullwide": true,
      "settings": {
        "text": null,
        "html": "span.formatted-text Ich akzeptiere die #[a(href='#') Datenschutzerklärung].*\n",
        "required": true
      }
    }
  ]
}
  • Content:
    .form {
      margin-bottom: 2rem;
      margin-top: 2rem;
    }
    
    .form__submit {
      height: 4.5rem;
      margin: 3rem 0 4.5rem;
    
      @include mq($from: m) {
        margin: 4.5rem 0;
      }
    }
    
    .form__footer {
      border-top: 1px solid rgba($color-anthracite, 0.2);
      margin-top: 1rem;
      padding-top: 2rem;
    
      @include mq($from: m) {
        .form__footer-headline {
          margin-bottom: 0;
        }
      }
    }
    
    .form__footer-icon-list {
      font-size: 1.5rem;
      margin-top: -0.5rem;
    }
    
    .form--has-info {
      padding-right: 3rem;
    }
    
    .form--centered {
      margin: 2rem auto;
      max-width: 54rem;
    
      &.form--has-info {
        max-width: 57rem;
      }
    
      &.form--wide {
        max-width: 74rem;
      }
    }
    
    .form--inline {
      margin: 0;
    
      .form__inner {
        align-content: stretch;
        align-items: flex-end;
        display: flex;
        flex-wrap: wrap;
        margin-left: -1rem;
        margin-right: -1rem;
      }
    
      .form__submit {
        margin-bottom: 2rem;
        margin-top: 0;
        padding-left: 1rem;
        padding-right: 1rem;
      }
    
      .form__submit--nextline {
        margin-bottom: 0;
        width: 100%;
      }
    
      .form__submit--right {
        @include mq($from: m) {
          text-align: right;
        }
      }
    }
    
    .form--multiline {
      margin: 0;
    
      .form__inner {
        display: flex;
    
        @include mq($until: m) {
          flex-wrap: wrap;
        }
      }
    
      .form__elements {
        width: 100%;
      }
    
      .form__submit {
        align-self: flex-end;
        margin-bottom: 2rem;
        margin-top: 0;
    
        @include mq($from: m) {
          margin-left: 2rem;
        }
      }
    }
    
    .validation-summary-errors {
      .list-group-item-danger {
        color: $color-red;
      }
    }
    
  • URL: /components/raw/form/form.scss
  • Filesystem Path: src/components/organisms/form/form.scss
  • Size: 1.5 KB

There are no notes for this item.