Add a Privacy Policy note below registration form

Solved
Highlighted
Excursionist
17 0 3

Hi,

I would like to add a note below the form and before the button, something like this: "By continuing you agree to our Privacy Policy".

How could I achieve that?

This is the code of my registration page:

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">

      <div class="form-vertical">

        <h1 class="text-center">{{ 'customer.register.title' | t }}</h1>

        {%- assign formId = 'RegisterForm' -%}
        {% form 'create_customer', id: formId, novalidate: 'novalidate' %}
          {% include 'form-status', form: form, form_id: formId %}

          <label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
          <input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">

          <label for="{{ formId }}-LastName">{{ 'customer.register.last_name' | t }}</label>
          <input type="text" name="customer[last_name]" id="{{ formId }}-LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocomplete="family-name">

          <label for="{{ formId }}-email">{{ 'customer.register.email' | t }}</label>
          <input
            type="email"
            name="customer[email]"
            id="{{ formId }}-email"
            class="{% if form.errors contains 'email' %} input--error{% endif %}"
            {% if form.email %} value="{{ form.email }}"{% endif %}
            autocorrect="off"
            autocapitalize="off"
            autocomplete="email"
            aria-required="true"
            {%- if form.errors contains 'email' -%}
              class="input--error"
              aria-invalid="true"
              aria-describedby="{{ formId }}-email-error"
            {%- endif -%}
          >
          {%- if form.errors contains 'email' -%}
            <span id="{{ formId }}-email-error" class="input-error-message">
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
              {% include 'icon-error' %}
              <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
            </span>
          {%- endif -%}

          <label for="{{ formId }}-password">{{ 'customer.register.password' | t }}</label>
          <input
            type="password"
            name="customer[password]"
            id="{{ formId }}-password"
            class="{% if form.errors contains 'password' %} input--error{% endif %}"
            aria-required="true"
            {%- if form.errors contains 'password' -%}
              class="input--error"
              aria-invalid="true"
              aria-describedby="{{ formId }}-password-error"
            {%- endif -%}
          >
          {%- if form.errors contains 'password' -%}
            <span id="{{ formId}}-password-error" class="input-error-message">
              {% include 'icon-error' %}
              <span>{{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.</span>
            </span>
          {%- endif -%}

          <p class="text-center">
            <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
          </p>

        {% endform %}
      </div>
    </div>
  </div>
</div>
0 Likes
Highlighted
Shopify Partner
148 23 30

@plantyeco Hi,

You can try to use next one code:

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">

      <div class="form-vertical">

        <h1 class="text-center">{{ 'customer.register.title' | t }}</h1>

        {%- assign formId = 'RegisterForm' -%}
        {% form 'create_customer', id: formId, novalidate: 'novalidate' %}
          {% include 'form-status', form: form, form_id: formId %}

          <label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
          <input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">

          <label for="{{ formId }}-LastName">{{ 'customer.register.last_name' | t }}</label>
          <input type="text" name="customer[last_name]" id="{{ formId }}-LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocomplete="family-name">

          <label for="{{ formId }}-email">{{ 'customer.register.email' | t }}</label>
          <input
            type="email"
            name="customer[email]"
            id="{{ formId }}-email"
            class="{% if form.errors contains 'email' %} input--error{% endif %}"
            {% if form.email %} value="{{ form.email }}"{% endif %}
            autocorrect="off"
            autocapitalize="off"
            autocomplete="email"
            aria-required="true"
            {%- if form.errors contains 'email' -%}
              class="input--error"
              aria-invalid="true"
              aria-describedby="{{ formId }}-email-error"
            {%- endif -%}
          >
          {%- if form.errors contains 'email' -%}
            <span id="{{ formId }}-email-error" class="input-error-message">
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
              {% include 'icon-error' %}
              <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
            </span>
          {%- endif -%}

          <label for="{{ formId }}-password">{{ 'customer.register.password' | t }}</label>
          <input
            type="password"
            name="customer[password]"
            id="{{ formId }}-password"
            class="{% if form.errors contains 'password' %} input--error{% endif %}"
            aria-required="true"
            {%- if form.errors contains 'password' -%}
              class="input--error"
              aria-invalid="true"
              aria-describedby="{{ formId }}-password-error"
            {%- endif -%}
          >
          {%- if form.errors contains 'password' -%}
            <span id="{{ formId}}-password-error" class="input-error-message">
              {% include 'icon-error' %}
              <span>{{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.</span>
            </span>
          {%- endif -%}

          <p class="text-center">
            By continuing you agree to our Privacy Policy
          </p>

          <p class="text-center">
            <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
          </p>

        {% endform %}
      </div>
    </div>
  </div>
</div>

 

1 Like
Highlighted
Excursionist
17 0 3

@Sasha2 

thanks Sasha.

I have added a URL to Privacy Policy, but when I mouse over on it, it doesn't change color, do you know why?

<p class="text-center">
            By continuing you agree to our <a href="https://plantyeco.com/pages/privacy-policy">Privacy Policy</a>.
          </p>

This is the registration page:

https://plantyeco.com/account/register

0 Likes
Highlighted
Shopify Partner
148 23 30

@plantyeco 

For me, a color is changed once mouse in over of the link, just like on the Footer links.

Are you prefer to use another hover color, not a theme's native links hover color?

1 Like
Highlighted
Excursionist
17 0 3

@Sasha2 right, I can see it slightly changes. What if I would like to make it of a blue color on mouse over?

0 Likes
Highlighted
Shopify Partner
148 23 30

This is an accepted solution.

@plantyeco,

Kindly use the next one code with a style present for "Privacy Policy" link hover color:

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">

      <div class="form-vertical">

        <h1 class="text-center">{{ 'customer.register.title' | t }}</h1>

        {%- assign formId = 'RegisterForm' -%}
        {% form 'create_customer', id: formId, novalidate: 'novalidate' %}
          {% include 'form-status', form: form, form_id: formId %}

          <label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
          <input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">

          <label for="{{ formId }}-LastName">{{ 'customer.register.last_name' | t }}</label>
          <input type="text" name="customer[last_name]" id="{{ formId }}-LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocomplete="family-name">

          <label for="{{ formId }}-email">{{ 'customer.register.email' | t }}</label>
          <input
            type="email"
            name="customer[email]"
            id="{{ formId }}-email"
            class="{% if form.errors contains 'email' %} input--error{% endif %}"
            {% if form.email %} value="{{ form.email }}"{% endif %}
            autocorrect="off"
            autocapitalize="off"
            autocomplete="email"
            aria-required="true"
            {%- if form.errors contains 'email' -%}
              class="input--error"
              aria-invalid="true"
              aria-describedby="{{ formId }}-email-error"
            {%- endif -%}
          >
          {%- if form.errors contains 'email' -%}
            <span id="{{ formId }}-email-error" class="input-error-message">
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
              {% include 'icon-error' %}
              <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
            </span>
          {%- endif -%}

          <label for="{{ formId }}-password">{{ 'customer.register.password' | t }}</label>
          <input
            type="password"
            name="customer[password]"
            id="{{ formId }}-password"
            class="{% if form.errors contains 'password' %} input--error{% endif %}"
            aria-required="true"
            {%- if form.errors contains 'password' -%}
              class="input--error"
              aria-invalid="true"
              aria-describedby="{{ formId }}-password-error"
            {%- endif -%}
          >
          {%- if form.errors contains 'password' -%}
            <span id="{{ formId}}-password-error" class="input-error-message">
              {% include 'icon-error' %}
              <span>{{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.</span>
            </span>
          {%- endif -%}

          <p class="text-center privacy-note">
            By continuing you agree to our <a href="https://plantyeco.com/pages/privacy-policy">Privacy Policy</a>
          </p>

          <p class="text-center">
            <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
          </p>

        {% endform %}
      </div>
    </div>
  </div>
</div>

<style>
  .privacy-note a:hover {
     color: #0645ad !important;
  }
</style>
1 Like
Highlighted
Excursionist
17 0 3

thanks @Sasha2 it's perfect now.

0 Likes