<form class="register-form">
<div class="dynamic-form">
<fieldset class="dynamic-form__fieldset--full-width-horizontal">
<legend class="dynamic-form__fieldset-legend">Registrieren</legend>
<div class="dynamic-form__element">
<div class="radio--light is-initialized is-filled-in">
<div class="radio__wrapper">
<input class="radio__input" id="b2b-register" type="radio" name="register-type" value="b2b" required checked data-form-type="b2b" />
<label class="radio__label" for="b2b-register">Geschäftskunde
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="radio--light is-initialized is-filled-in">
<div class="radio__wrapper">
<input class="radio__input" id="b2c-register" type="radio" name="register-type" value="b2c" required data-form-type="b2c" />
<label class="radio__label" for="b2c-register">Privatkunde
*
</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="register-form__form-switch is-visible">
<div class="dynamic-form">
<fieldset class="dynamic-form__fieldset--full-width">
<legend class="dynamic-form__fieldset-legend">Adresse</legend>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-company" type="text" name="b2b-company" required />
<label class="text-field__label" for="b2b-company">Firma
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-addition" type="text" name="b2b-addition" />
<label class="text-field__label" for="b2b-addition">Zusatz
</label>
</div>
</div>
</div>
<div class="dynamic-form__element--street-number">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-street" type="text" name="b2b-street" required />
<label class="text-field__label" for="b2b-street">Strasse
*
</label>
</div>
</div>
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-street-number" type="text" name="b2b-street-number" required />
<label class="text-field__label" for="b2b-street-number">Nr.
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-po-box" type="text" name="b2b-po-box" />
<label class="text-field__label" for="b2b-po-box">Postfach
</label>
</div>
</div>
</div>
<div class="dynamic-form__element--zip-city">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-zip" type="text" name="b2b-zip" required />
<label class="text-field__label" for="b2b-zip">PLZ
*
</label>
</div>
</div>
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-city" type="text" name="b2b-city" required />
<label class="text-field__label" for="b2b-city">Ort
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-mail-central" type="email" name="b2b-mail-central" />
<label class="text-field__label" for="b2b-mail-central">E-Mail Zentrale
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-telephone-central" type="tel" name="b2b-telephone-central" />
<label class="text-field__label" for="b2b-telephone-central">Telefon Zentrale
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-employees-amount" type="number" name="b2b-employees-amount" required />
<label class="text-field__label" for="b2b-employees-amount">Anzahl Mitarbeiter
*
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="dynamic-form__fieldset--full-width">
<legend class="dynamic-form__fieldset-legend">Benutzer</legend>
<div class="dynamic-form__element">
<div class="select--light is-initialized with-label">
<div class="select__wrapper">
<select class="select__select" id="b2b-salutation" name="b2b-salutation" required>
<option value="" disabled selected>Bitte wählen</option>
<option value="mr">Herr</option>
<option value="ms">Frau</option>
</select>
<label class="select__label" for="b2b-salutation">Anrede
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="select--light is-initialized with-label">
<div class="select__wrapper">
<select class="select__select" id="b2b-title" name="b2b-title">
<option value="" disabled selected>Bitte wählen</option>
<option value="dr">Dr.</option>
<option value="profdr">Prof. Dr.</option>
</select>
<label class="select__label" for="b2b-title">Titel
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-firstName" type="text" name="b2b-firstName" required />
<label class="text-field__label" for="b2b-firstName">Vorname
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-lastName" type="text" name="b2b-lastName" required data-form-type="b2c" />
<label class="text-field__label" for="b2b-lastName">Nachname
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-mail" type="email" name="b2b-mail" required />
<label class="text-field__label" for="b2b-mail">E-Mail Adresse
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2b-telephone" type="tel" name="b2b-telephone" />
<label class="text-field__label" for="b2b-telephone">Telefon
</label>
</div>
</div>
</div>
</fieldset>
<button class="button--primary-small" type="submit">Registrieren</button>
</div>
</div>
<div class="register-form__form-switch">
<div class="dynamic-form">
<fieldset class="dynamic-form__fieldset--full-width">
<div class="dynamic-form__element">
<div class="select--light is-initialized with-label">
<div class="select__wrapper">
<select class="select__select" id="b2c-salutation" name="b2c-salutation" required>
<option value="" disabled selected>Bitte wählen</option>
<option value="mr">Herr</option>
<option value="ms">Frau</option>
</select>
<label class="select__label" for="b2c-salutation">Anrede
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="select--light is-initialized with-label">
<div class="select__wrapper">
<select class="select__select" id="b2c-title" name="b2c-title">
<option value="" disabled selected>Bitte wählen</option>
<option value="dr">Dr.</option>
<option value="profdr">Prof. Dr.</option>
</select>
<label class="select__label" for="b2c-title">Titel
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2c-firstName" type="text" name="b2c-firstName" required />
<label class="text-field__label" for="b2c-firstName">Vorname
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2c-lastName" type="text" name="b2c-lastName" required />
<label class="text-field__label" for="b2c-lastName">Nachname
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2c-addition" type="text" name="b2c-addition" />
<label class="text-field__label" for="b2c-addition">Zusatz
</label>
</div>
</div>
</div>
<div class="dynamic-form__element--street-number">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2c-street" type="text" name="b2c-street" required />
<label class="text-field__label" for="b2c-street">Strasse
*
</label>
</div>
</div>
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2c-street-number" type="text" name="b2c-street-number" required />
<label class="text-field__label" for="b2c-street-number">Nr.
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2c-po-box" type="text" name="b2c-po-box" />
<label class="text-field__label" for="b2c-po-box">Postfach
</label>
</div>
</div>
</div>
<div class="dynamic-form__element--zip-city">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2c-zip" type="text" name="b2c-zip" required />
<label class="text-field__label" for="b2c-zip">PLZ
*
</label>
</div>
</div>
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2c-city" type="text" name="b2c-city" required />
<label class="text-field__label" for="b2c-city">Ort
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2c-mail" type="email" name="b2c-mail" required />
<label class="text-field__label" for="b2c-mail">E-Mail Adresse
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="b2c-telephone" type="tel" name="b2c-telephone" />
<label class="text-field__label" for="b2c-telephone">Telefon
</label>
</div>
</div>
</div>
</fieldset>
<button class="button--primary-small" type="submit">Registrieren</button>
</div>
</div>
</form>
{% include '@SharedComponents/modules/account-auth/components/register-form/register-form.twig' %}
{
"registerFormTypeSwitch": {
"variant": "full-width-horizontal",
"fieldsets": [
{
"legend": "Registrieren",
"fields": [
{
"component": "radio",
"variant": "light",
"id": "b2b-register",
"name": "register-type",
"label": "Geschäftskunde",
"value": "b2b",
"required": true,
"checked": true,
"disabled": false,
"error": "",
"helper": "",
"attributes": {
"data-form-type": "b2b"
}
},
{
"component": "radio",
"variant": "light",
"id": "b2c-register",
"name": "register-type",
"label": "Privatkunde",
"value": "b2c",
"required": true,
"checked": false,
"disabled": false,
"error": "",
"helper": "",
"attributes": {
"data-form-type": "b2c"
}
}
]
}
]
},
"registerFormB2B": {
"variant": "full-width",
"fieldsets": [
{
"legend": "Adresse",
"fields": [
{
"component": "text-field",
"variant": "light",
"id": "b2b-company",
"name": "b2b-company",
"label": "Firma",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "b2b-addition",
"name": "b2b-addition",
"label": "Zusatz",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field-street-number",
"variant": "light",
"id": "b2b-street",
"name": "b2b-street",
"label": "Strasse",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field-street-number",
"variant": "light",
"id": "b2b-street-number",
"name": "b2b-street-number",
"label": "Nr.",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "b2b-po-box",
"name": "b2b-po-box",
"label": "Postfach",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field-zip-city",
"variant": "light",
"id": "b2b-zip",
"name": "b2b-zip",
"label": "PLZ",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field-zip-city",
"variant": "light",
"id": "b2b-city",
"name": "b2b-city",
"label": "Ort",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "b2b-mail-central",
"name": "b2b-mail-central",
"label": "E-Mail Zentrale",
"required": false,
"value": "",
"disabled": false,
"type": "email",
"autocomplete": false
},
{
"component": "text-field",
"variant": "light",
"id": "b2b-telephone-central",
"name": "b2b-telephone-central",
"label": "Telefon Zentrale",
"required": false,
"value": "",
"disabled": false,
"type": "tel",
"autocomplete": false
},
{
"component": "text-field",
"variant": "light",
"id": "b2b-employees-amount",
"name": "b2b-employees-amount",
"label": "Anzahl Mitarbeiter",
"required": true,
"value": "",
"disabled": false,
"type": "number",
"autocomplete": false
}
]
},
{
"legend": "Benutzer",
"fields": [
{
"component": "select",
"variant": "light",
"id": "b2b-salutation",
"name": "b2b-salutation",
"label": "Anrede",
"required": true,
"disabled": false,
"selected": false,
"options": {
"mr": "Herr",
"ms": "Frau"
},
"choose": "Bitte wählen",
"error": ""
},
{
"component": "select",
"variant": "light",
"id": "b2b-title",
"name": "b2b-title",
"label": "Titel",
"required": false,
"disabled": false,
"selected": false,
"options": {
"dr": "Dr.",
"profdr": "Prof. Dr."
},
"choose": "Bitte wählen",
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "b2b-firstName",
"name": "b2b-firstName",
"label": "Vorname",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "b2b-lastName",
"name": "b2b-lastName",
"label": "Nachname",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": "",
"attributes": {
"data-form-type": "b2c"
}
},
{
"component": "text-field",
"variant": "light",
"id": "b2b-mail",
"name": "b2b-mail",
"label": "E-Mail Adresse",
"required": true,
"value": "",
"disabled": false,
"type": "email",
"autocomplete": false
},
{
"component": "text-field",
"variant": "light",
"id": "b2b-telephone",
"name": "b2b-telephone",
"label": "Telefon",
"required": false,
"value": "",
"disabled": false,
"type": "tel",
"autocomplete": false
}
]
}
],
"submitButton": {
"type": "button",
"title": "Registrieren",
"variant": "primary-small"
}
},
"registerFormB2C": {
"variant": "full-width",
"fieldsets": [
{
"fields": [
{
"component": "select",
"variant": "light",
"id": "b2c-salutation",
"name": "b2c-salutation",
"label": "Anrede",
"required": true,
"disabled": false,
"selected": false,
"options": {
"mr": "Herr",
"ms": "Frau"
},
"choose": "Bitte wählen",
"error": ""
},
{
"component": "select",
"variant": "light",
"id": "b2c-title",
"name": "b2c-title",
"label": "Titel",
"required": false,
"disabled": false,
"selected": false,
"options": {
"dr": "Dr.",
"profdr": "Prof. Dr."
},
"choose": "Bitte wählen",
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "b2c-firstName",
"name": "b2c-firstName",
"label": "Vorname",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "b2c-lastName",
"name": "b2c-lastName",
"label": "Nachname",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "b2c-addition",
"name": "b2c-addition",
"label": "Zusatz",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field-street-number",
"variant": "light",
"id": "b2c-street",
"name": "b2c-street",
"label": "Strasse",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field-street-number",
"variant": "light",
"id": "b2c-street-number",
"name": "b2c-street-number",
"label": "Nr.",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "b2c-po-box",
"name": "b2c-po-box",
"label": "Postfach",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field-zip-city",
"variant": "light",
"id": "b2c-zip",
"name": "b2c-zip",
"label": "PLZ",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field-zip-city",
"variant": "light",
"id": "b2c-city",
"name": "b2c-city",
"label": "Ort",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "b2c-mail",
"name": "b2c-mail",
"label": "E-Mail Adresse",
"required": true,
"value": "",
"disabled": false,
"type": "email",
"autocomplete": false
},
{
"component": "text-field",
"variant": "light",
"id": "b2c-telephone",
"name": "b2c-telephone",
"label": "Telefon",
"required": false,
"value": "",
"disabled": false,
"type": "tel",
"autocomplete": false
}
]
}
],
"submitButton": {
"type": "button",
"title": "Registrieren",
"variant": "primary-small"
}
},
"links": [
{
"title": "Anmelden",
"href": "#"
},
{
"title": "Passwort vergessen",
"href": "#"
}
]
}
import './register-form.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/account-auth/components/register-form/register-form";
No notes defined.