Hello,
i have a very big problem, i need a registration form, where a B2B customer can registrate, but there has to be a field for the tax-id number and this field has to be checked or should be checken, if the tax-id number is correct or not it has to start with for example DE and then 9 numbers, it could also start with AT and than 9 numbers the letters in the front has to stand for the Country and than 9 numbers.
Also important is that the customer if everything is correct gets an automatically tag for example “B2B”
This is my registration form, i hope that someone could help me!
{% comment %}
Redirect logged in users back to the homepage
{% endcomment %}
{%- if customer.tags contains ‘b2b’ -%}
{% endif %}
{{ section.settings.title }}
{{ section.settings.intro_text }}
{% comment %}
Login form
{% endcomment %}
{{ 'customer.login_page.email' | t }}
{{ 'customer.login_page.password' | t }}
{{ 'customer.login_page.sign_in' | t }}
{% comment %}
Apply for an account
{% endcomment %}
{{ section.settings.open_account_title }}
{{ section.settings.open_account_text }}
{{ section.settings.open_account_button }}
{% comment %}
Application form
Use a custom form or use a standard Shopify contact form
{% endcomment %}
{% if section.settings.use_custom_form %}
{{ section.settings.open_account_form }}
{% else %}
{%- form ‘contact’, id: ‘ContactForm’ -%}
{%- if form.posted_successfully? -%}
{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}
{%- elsif form.errors -%}
{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}
{{ form.errors.translated_fields[‘email’] | capitalize }} {{ form.errors.messages[‘email’] }}
{%- endif -%}
{{ 'templates.contact.form.name' | t }}
{{ 'templates.contact.form.email' | t }} *
{%- if form.errors contains 'email' -%}
{{ 'accessibility.error' | t }}
{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
{%- endif -%}
{{ 'templates.contact.form.phone' | t }}
Company
Website
{{- form.body -}}
{{ 'templates.contact.form.comment' | t }}
{{ 'templates.contact.form.send' | t }}
{%- endform -%}
{% endif %}
{% if section.settings.show_faqs %}
{% comment %}
FAQs
{% endcomment %}
{{ section.settings.faq_title }}
{% for block in section.blocks limit:5 %}
{% endfor %}
{% endif %}
{% schema %}
{
“name”: “Login Page”,
“settings” : [
{
“type”: “image_picker”,
“id”: “featured_image”,
“label”: “Background Image”,
“info”: “The image should ideally be rectangular”
},
{
“type”: “color”,
“id”: “background_color”,
“label”: “Background color”,
“default”: “#f1f1f1”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “Welcome to our trade login”
},
{
“type”: “textarea”,
“id”: “intro_text”,
“label”: “Intoduction Text”,
“default”: “Sign in below to get instant access to your trade account and to start placing orders.”
},
{
“type”: “text”,
“id”: “open_account_title”,
“label”: “Open Account Title”,
“default”: “Interest in opening an account?”
},
{
“type”: “richtext”,
“id”: “open_account_text”,
“label”: “Open Account Text”,
“default”: “
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
”
},
{
“type”: “text”,
“id”: “open_account_button”,
“label”: “Open Account Button Title”,
“default”: “Apply for an account”
},
{
“type”: “checkbox”,
“id”: “use_custom_form”,
“label”: “Use custom contact form”,
“info”: “If enabled, you can paste in your HTML below. If disabled, the standard Shopify contact form will be used and the fields can be customised within the trade-application.liquid template”,
“default”: false
},
{
“type”: “html”,
“id”: “open_account_form”,
“label”: “Custom Account Application Form”,
“default”: “Paste in form HTML here”
},
{
“type”: “checkbox”,
“id”: “show_faqs”,
“label”: “Show FAQs”,
“info”: “If enabled, you can manually add FAQs”,
“default”: true
},
{
“type”: “text”,
“id”: “faq_title”,
“label”: “FAQs title”,
“default”: “Question & Answers”
}
],
“blocks”: [
{
“type”: “feature”,
“name”: “FAQs”,
“settings”: [
{
“type”: “text”,
“id”: “block_title”,
“label”: “Question”
},
{
“type”: “richtext”,
“id”: “block_text”,
“label”: “Answer”
}
]
}
],
“presets”: [
{
“name”: {
“en”: “Login Page”
},
“category”: {
“en”: “Wholesale & B2B”
}
}
]
}
{% endschema %}
/*================ B2B Login page ================*/
.b2b-login-wrapper {
display: flex;
margin: 2em 0;
}
/* Main image */
.b2b-login-wrapper .b2b-intro-image {
width: 50%;
padding: 8%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
min-height: 300px;
}
/* Login area */
.b2b-login-wrapper .b2b-login-area {
width: 50%;
padding: 7%;
}
.b2b-login-wrapper .b2b-login-area h1 {
margin-top: 0;
}
.b2b-login-wrapper .b2b-login-area .form-vertical {
position: relative;
}
.b2b-login-wrapper .b2b-login-area .form-vertical .intro-text {
padding: 0 0 1.5em;
}
.b2b-login-wrapper .b2b-login-area .form-vertical .field {
margin: 0 0 1em;
}
.b2b-login-wrapper .b2b-login-area .form-vertical input,
.b2b-login-wrapper .b2b-login-area .form-vertical textarea {
width: 100%;
background: #fff;
margin: 0 0 0;
}
.b2b-login-wrapper .b2b-login-area .form-vertical .password-container {
position: relative;
}
.b2b-login-wrapper .b2b-login-area .form-vertical .password-container a {
position: absolute;
right: 0;
top: 13px;
font-size: 14px;
line-height: 14px;
color: #999;
text-decoration: underline;
}
/* Apply for an account */
.b2b-apply-account {
padding: 3em 0 0;
scroll-behavior: smooth;
}
.b2b-apply-account h3 {
margin: 0
}
.b2b-apply-account ul li {
list-style: square;
}
.b2b-apply-account .form-status-list {
margin: 2rem 0 0;
background: #fff;
padding: 1em;
}
.b2b-apply-account .form__message {
display: block;
}
/* Registration form */
.b2b-registration-form {
transition: all 0.3s;
overflow: hidden;
padding: 0 1px;
margin: 0 -1px;
}
.b2b-registration-form form {
margin: 1em 0;
}
.b2b-registration-form .contact__fields {
margin: 1em 0 0;
}
.b2b-application-form-wrapper {
margin: 1em 0;
}
/* FAQs */
.b2b-faqs {
margin: 3em 0 0;
border-top: 1px solid #ccc;
padding: 3em 0 0;
}
.b2b-faqs h3 {
margin: 0 0 1.5em;
}
.faq-tab a.item-accordion {
display: block;
background: #fff;
padding: 1rem 3rem 1rem 1.5rem;
margin-bottom: 1em;
position: relative;
color: #333;
text-decoration: none;
cursor: pointer;
position: relative;
}
.faq-tab a.item-accordion svg {
width: 18px;
position: absolute;
right: 15px;
top: 19px;
transition: all 0.2s;
}
.faq-tab.active a.item-accordion svg {
transform: rotate(180deg);
}
.faq-tab .panel {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-in;
}
.faq-tab.active .panel {
max-height: 2500px;
}
.faq-tab .panel p {
padding: 1em 1em 1em;
margin: 0;
}
.faq-tab .panel p:last-of-type {
padding-bottom: 2em;
}
.faq-tab .panel p a {
text-decoration: underline;
color: #334fb4;
}
.faq-tab .panel ul {
margin: 0 0 0 2em;
}
.faq-tab .panel ul li {
list-style-type: square;
}
.faq-tab .panel ul li a {
text-decoration: underline;
}
/* Responsive */
@media only screen and (max-width: 850px) {
.b2b-login-wrapper {
display: block;
margin: 1em 0;
}
.b2b-login-wrapper .b2b-intro-image,
.b2b-login-wrapper .b2b-login-area {
width: 100%;
}
.b2b-login-wrapper .b2b-intro-image {
background-size: cover;
}
}