How to transform a radio button into this in registration form?

Highlighted
Explorer
167 2 8

Hi,

I found a website that has some kind of selection box as radio buttons on their registration form:

Knipsel.PNG

 

Website url: www.bodyandfit.com

 

I thought this was a cool feature and I wanted to add this to my website aswell:

This is how far i got:

 

1.PNG

 

With just this code:


 

<label class="label" style="color: #00205a; font-size: 10px;">* AANHEF</label>
<span style="border: 1px solid #00205a;"> <input type="radio" value="female" name="customer[note][gender]" id="gender">female
<span style="border: 1px solid #00205a;"><input type="radio" value="male" name="customer[note][gender]" id="gender">male </span>


Can anyone help me design some cool feature? I prefer something like this but if you have something cool in mind let me know!

Thanks in advance!

Niels

0 Likes
Highlighted

@NielsSchutte 

You need to use CSS or JS to convert those radio into nicely design button or something else.

 

https://codepen.io/gabrielferreira/pen/oYxNVy/

https://codepen.io/stefanzweifel/pen/RNvGwz

https://codepen.io/AngelaVelasquez/pen/Eypnq

https://codepen.io/JiveDig/pen/jbdJXR/

Shopify Expert - https://experts.shopify.com/lucentinnovation
0 Likes
Highlighted
Explorer
167 2 8

Hi,

That are some cool examples however I can not get this to work on my website:

I've added the code and my form looks like this now:

    {% form 'create_customer' %}

      {% include 'form-errors-custom' %}
          
          {% comment %}
          
          <label class="label" style="color: #00205a; font-size: 10px;">* AANHEF</label>
          <span style="border: 1px solid #00205a;"> <input type="radio" value="female" name="customer[note][gender]" id="gender">female
          
          <span style="border: 1px solid #00205a;"><input type="radio" value="male" name="customer[note][gender]" id="gender">male </span>
            
          {% endcomment %}
            
          <div class="middle">
            <h1>CSS Radio Button</h1>
            <label>
            <input type="radio" name="radio" checked/>
            <div class="front-end box">
              <span>Front-end</span>
            </div>
          </label>

            <label>
            <input type="radio" name="radio"/>
            <div class="back-end box">
              <span>Back-end</span>
            </div>
          </label>
            <p>Made <span></span> by <a href="https://github.com/gabrielferreiraa" target="_blank">@gabrielferreiraa</a></p>
          </div>
          
  
	  <label class="label" style="color: #00205a; font-size: 10px;">* VOORNAAM</label>
      <label for="first_name" class="hidden-label">{{ 'customer.register.first_name' | t }}</label>
      <input type="text" value="" name="customer[first_name]" id="first_name" {% if form.errors contains "first_name" %} class="error"{% endif %} autofocus>

      <label class="label" style="color: #00205a; font-size: 10px;">* ACHTERNAAM</label>
      <label for="last_name" class="hidden-label">{{ 'customer.register.last_name' | t }}</label>
      <input type="text" value="" name="customer[last_name]" id="last_name" {% if form.errors contains "last_name" %} class="error"{% endif %}>

      <label class="label" style="color: #00205a; font-size: 10px;">* E-MAILADRES</label>
      <label for="email" class="hidden-label">{{ 'customer.register.email' | t }}</label>
      <input type="email" value="" name="customer[email]" id="email" {% if form.errors contains "email" %} class="error"{% endif %} autocorrect="off" autocapitalize="off">
          
      <label class="label" style="color: #00205a; font-size: 10px;">* WACHTWOORD</label>
      <label for="password" class="hidden-label">{{ 'customer.register.password' | t }}</label>
      <input type="password" value="" name="customer[password]" id="create_password" {% if form.errors contains "password" %} class="error"{% endif %}>
          
      <p style="color: #00205a; font-size: 10px; margin-top: 12px;">Kies een wachtwoord van tenminste 6 karakters, we adviseren een wachtwoord van 8 karakters met tenminste 1 hoofdletter en 1 cijfer</p>
      
      <label class="label" style="color: #00205a; font-size: 10px;">* BEVESTIG WACHTWOORD</label>
      <input type="password" value="" name="customer[password_confirmation]" id="confirm-password" class="password-text" size="30" />
      <p class="password-notamatch"style="color: red; font-size: 12px; margin-top: 10px; visibility: hidden;">Wachtwoord en wachtwoord-bevestiging komen niet overeen</p>
      {% comment %}
    	{{ 'customer.register.submit' | t }}
      {% endcomment %}
          <p>
        <input type="submit" value="REGISTREREN" class="btn" style="width: 100%; background-image: radial-gradient(circle farthest-side at center bottom, #071435, #00205a 125%);">
      </p>
    {% endform %}

And I've added the css above in "<style>"


<style>
    html, body { padding: 0; margin: 0;}
    .grid {
        display: grid;
    }
    .grid-gap-lg {
        grid-gap: 45px;
    }
    @media(min-width: 768px) {
        .md\:grid-cols-2 {
            grid-template-columns: repeat(2,1fr);
        }
    }
    .border-2 {
        border: solid 1px;
    }
    .border-blue-dark {
        border-color: #00205a;
    }
    .p-5 {
        padding: 2.5rem;
    }
  
  .a:hover{
  	text-decoration: underline;
  }
  
  
  
  .middle {
  width: 100%;
  text-align: center;
  h1 {
    font-family: $font;
    color: $white;
  }
  input[type="radio"] {
    display: none;
    &:checked {
      + .box {
        background-color: $green;
        span {
          color: white;
          transform: translateY(70px);
          &:before {
            transform: translateY(0px);
            opacity: 1;
          }
        }
      }
    }
  }
  .box {
    width: 200px;
    height: 200px;
    background-color: $white;
    transition: all 250ms ease;
    will-change: transition;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-family: $font;
    font-weight: 900;
    &:active{
      transform: translateY(10px);
    }
    span {
      position: absolute;
      transform: translate(0, 60px);
      left: 0;
      right: 0;
      transition: all 300ms ease;
      font-size: 1.5em;
      user-select: none;
      color: $green;
      &:before {
        font-size: 1.2em;
        font-family: FontAwesome;
        display: block;
        transform: translateY(-80px);
        opacity: 0;
        transition: all 300ms ease-in-out;
        font-weight: normal;
        color: white;
      }
    }
  }
  .front-end {
    span {
      &:before {
        content: '\f121';
      }
    }
  }
  .back-end {
    span {
      &:before {
        content: '\f0f4';
      }
    }
  }
  
  /* Made by */
  p {
    color: $white;
    font-family: $font;
    font-weight: 400;
    a {
      text-decoration: underline;
      font-weight: bold;
      color: #FFF;
    }
    span {
      &:after {
        content: '\f0e7';
        font-family: FontAwesome;
        color: yellow;
      }
    }
  }
}
  
</style>

And still getting this result:


Knipsel.PNG

 

Could you take a look?


Store url: smartsnutrition.myshopify.com

Password: plazay

 

Click on "Inloggen" link in top-right corner of header.


Niels:)

0 Likes
Highlighted

Hey @NielsSchutte 

 

I am not able to see anything as radio button, it looks like you are doing development in other themes.

 

https://prnt.sc/s80lqf

Shopify Expert - https://experts.shopify.com/lucentinnovation
0 Likes
Highlighted
Explorer
167 2 8

No, some links are incorrect. You clicked on "registreren" instead of "Inloggen". Try clicking on "Inloggen".

0 Likes
Highlighted
Explorer
167 2 8

Did you manage to find it?

0 Likes
Highlighted

I will review and update you

Shopify Expert - https://experts.shopify.com/lucentinnovation
0 Likes
Highlighted
Explorer
167 2 8

Many thanks:)

0 Likes