Social Register Form¶
The <social-register-form> webcomponent is used to render a registration form for users registering via social login. It adapts its fields based on the registration mode and settings, and can display both consumer and company registration options.
Children of the Social Register Form¶
This webcomponent requires exactly one child element with slot attribute to be inside it. This child must inculude all the needed form fields, such as inputs for user details. Inside the form, you must also include a container with company-fields-container class. Fields related to company registration should be placed inside this container, which will be shown or hidden based on the selected account type (consumer or company).
Attributes¶
none
Example¶
<social-register-form>
<div slot>
<control-connector
required
class="control"
>
<h-control>
<h-control-label class="control__label">
<label
class="label label_required"
for="firstname-1"
>
<span class="label__asterisk" aria-hidden="true">*</span>
First name
</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element">
<h-input
controlId="firstname-1"
controlName="firstname"
required
>
<h-input-control></h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector
required
class="control"
>
<h-control>
<h-control-label class="control__label">
<label
class="label label_required"
for="lastname-1"
>
<span class="label__asterisk" aria-hidden="true">*</span>
Last name
</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element">
<h-input
controlId="lastname-1"
controlName="lastname"
required
>
<h-input-control></h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector
required
class="control"
>
<h-control>
<h-control-label class="control__label">
<label
class="label label_required"
for="phone-1"
>
<span class="label__asterisk" aria-hidden="true">*</span>
Phone number
</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element">
<h-input
controlId="phone-1"
controlName="phone"
required
>
<h-input-control type="tel"></h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<div class="company-fields-container">
<control-connector
required
class="control"
>
<h-control>
<h-control-label class="control__label">
<label
class="label label_required"
for="tax_id"
>
<span class="label__asterisk" aria-hidden="true">*</span>
Taxpayer Identification Number (TIN)
</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element">
<h-input
controlId="tax_id"
controlName="tax_id"
required
>
<h-input-control></h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector
required
class="control"
>
<h-control>
<h-control-label class="control__label">
<label
class="label label_required"
for="company_name"
>
<span class="label__asterisk" aria-hidden="true">*</span>
Company name
</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element">
<h-input
controlId="company_name"
controlName="company_name"
required
>
<h-input-control></h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
</div>
</div>
</social-register-form>
<social-register-form>
<form action="" method="post" enctype="multipart/form-data" data-turbo="false">
<!-- Optionally, account type selection (consumer/company) -->
<fieldset class="mb-xs-2 account-type">
<legend class="sr-only">Account type</legend>
<control-connector requiredInGroup class="control control_row">
<!-- Consumer radio -->
<h-control-content class="control__content_auto">
<h-control-element class="control__element">
<div class="radio-box">
<input type="radio" id="account-type-consumer" name="isCompany" value="false" class="radio-box__input" />
<label class="radio-box__label" for="account-type-consumer">Consumer</label>
</div>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
<!-- Company radio -->
<h-control-content class="control__content_auto">
<h-control-element class="control__element">
<div class="radio-box">
<input type="radio" id="account-type-company" name="isCompany" value="true" class="radio-box__input" />
<label class="radio-box__label" for="account-type-company">Company</label>
</div>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</control-connector>
</fieldset>
<control-connector
required
class="control"
>
<h-control>
<h-control-label class="control__label">
<label
class="label label_required"
for="firstname-1"
>
<span class="label__asterisk" aria-hidden="true">*</span>
First name
</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element">
<h-input
controlId="firstname-1"
controlName="firstname"
required
>
<h-input-control></h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector
required
class="control"
>
<h-control>
<h-control-label class="control__label">
<label
class="label label_required"
for="lastname-1"
>
<span class="label__asterisk" aria-hidden="true">*</span>
Last name
</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element">
<h-input
controlId="lastname-1"
controlName="lastname"
required
>
<h-input-control></h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector
required
class="control"
>
<h-control>
<h-control-label class="control__label">
<label
class="label label_required"
for="phone-1"
>
<span class="label__asterisk" aria-hidden="true">*</span>
Phone number
</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element">
<h-input
controlId="phone-1"
controlName="phone"
required
>
<h-input-control type="tel"></h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
</form>
</social-register-form>