TikTok Tutorial #82 - How to create a Sign Up Form

Learn with us how to create a simple Sign Up Form!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim

♬ Standout - Kid Dean

Contents:
1. HTML Code
2. CSS Code
3. Javascript Code

Get your code ⬇️

1. HTML Code

<div class="container">

  <header>
    <h2>Sign Up Form (Coded)</h2>
    <p>Based on <a href="https://drc8llcc7rqy7.cloudfront.net/shots/2409898/24-sign-up-large" target="blank">Sign Up Design #39</a> by <a href="https://dribbble.com/deab" target="blank">Denis Abdullin</a>.</p>
  </header>
  
  <div id="app" class="signup">
    <transition name="fade" mode="out-in">
      <component :is="compname" @change_comp="swapcomp($event)"></component>
    </transition>
  </div>
  
  <template id="signup-form">
      <form>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" v-model="email" />
          <span v-if="email.length > 1">{{ email_msg }}</span>
        </div>
        <div class="form-group">
          <label for="psw1">Password <span id="characters">(6 or more characters required)</span></label>
          <input type="password" v-model="password1" />
          <span v-show="msg1">{{ pwd1_msg }}</span>
        </div>
        <div class="form-group">
          <label for="psw2">Repeat Password</label>
          <input type="password" v-model="password2" />
          <span v-show="msg2">{{ pwd2_msg }}</span>
        </div>
        <div class="form-group">
          <button :class="{active: disable_btn}":disabled="disable_btn" @click.prevent="on_signup()">Sign Up</button>
          <a href="#0" @click="show_terms()">terms & conditions</a>
        </div>
      </form>
    </template>
  
    <template id="results">
      <div class="results">
        <h4>FORM SUBMIT SUCCESSFUL</h4>
        <p>Form data gets saved and/or sent to server. There could also be a confirmation sent to email address</p>
        <p>Button would take you to some sort of after signup page.<br>In this case it just shows the form again</p>
        <button @click="back_to_signup()">Continue</button>
      </div>
    </template>
  
    <template id="terms">
      <div class="terms">
        <h4>TERMS & CONDITIONS</h4>
        <p>A list of terms, conditions, and policies.</p>
        <button @click="back_to_signup()">Back</button>
      </div>
    </template>
  
</div>

2. CSS Code

@import url('https://fonts.googleapis.com/css?family=Roboto');

$green-dark: #79CB0A;
$green-light: #B5D020;
$orange-dark: #FF8700;
$orange-light: #FFB100;
$red: #FF3400;
$grey: #8F949B;

* {
  box-sizing: border-box;
}

body {
  height: 100%;
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(to left, $green-dark , $green-light);
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header {
  margin: 30px 0;
  text-align: center;
  
  h2 {
    text-transform: uppercase;
    margin: 0;
  }
  
  p {
    font-size: 1em;
  }
  
  a {
    text-decoration: none;
    border-bottom: 2px dotted $orange-dark;
    color: inherit;
  }
  
}

.signup {
  width: 700px;
  height: 460px;
  position: relative;
  overflow: hidden;
  box-shadow: 10px 10px 60px rgba(0, 0, 0, .4);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-radius: 5px;
}
.signup:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
  z-index: -1;
  background: url(https://source.unsplash.com/Qmox1MkYDnY/900x500) no-repeat;
}

form {
  width: 50%;
  height: 80%;
  padding: 20px 50px 20px 20px;;
}
form .form-group {
  display: flex;
  flex-direction: column;
  margin: 0 0 20px 0;
  color: $grey;
  font-size: .9em;
  
  label {
    margin: 0 0 16px 0;
  }
  
  span {
    font-size: .8em;
    color: $red;
  }
  
  span#characters {
    font-size: .8em;
    color: $grey;
  }
}
.form-group input[type="text"], 
.form-group input[type="password"] {
  border: none;
  outline: none;
  background: transparent;
  padding: 0 0 10px 0;
  font-size: 1em;
  border-bottom: 1px dotted $grey;
}
.form-group input[type="password"] {
  color: $red;
}
form .form-group:last-child {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0 0 0;
  
  button {
    border: none;
    background: linear-gradient(to left, $orange-dark , $orange-light);
    padding: 10px 30px;
    border-radius: 20px;
    color: #FFFFFF;
    font-size: .8em;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
  }
  button.active {
    opacity: .5;
    cursor: default;
  }
  
  a {
    color: $grey;
    text-decoration: dotted;
    font-size: .8em;
  }
}

.results, .terms {
  width: 50%;
  height: 80%;
  padding: 20px 50px 20px 20px;
}

.fade-enter-active, .fade-leave-active {
  transition: all .8s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
  transform: translateX(-40px);
}

3. Javascript Code

var SignupForm = Vue.component('signup-form', {
  
  // TEMPLATE
  template: '#signup-form',
  
  // DATA
  data() {
    return {
      email: '',
      email_msg: '',
      password1: '',
      pwd1_msg: '',
      password2: '',
      pwd2_msg: '',
      disable_btn: true,
      msg1: true,
      msg2: true
    }
  },
  
  // WATCH
  watch: {
    email: function(value) {
      this.valid_email(value, 'email_msg');
    },
    password1: function(value) {
      if(this.check_password_length(value, 'pwd1_msg', 6)) {
        this.check_passwords_match();
      }
    },
    password2: function(value) {
      if(this.check_password_length(value, 'pwd2_msg', 6)) {
        this.check_passwords_match();
      }
    }
  },
  
  // METHODS
  methods: {
    
    valid_email(email, msg) {
      if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
        this[msg] = '';
        return true;
      } else {
        this[msg] = 'Keep typing...waiting for a valid email';
        return false;
      } 
    },
    
    check_password_length(value, msg, total) {
      var length = value.length;
      var sum = 0;
      var display;
      
      sum = (total - length);
      
      switch(sum) {
        case 0:
          display = '';
          break;
        case 1:
          display = 'Keep going - just need '+ sum + ' more character.';
          break;
        default:
          display = 'Keep going - just need '+ sum + ' more characters';
      }
      
      if(length >= total) {
        this[msg] = '';
        return true;
      } else {
        this[msg] = display;
        return false;
      }
      
    },
    
    check_passwords_match() {
      if(this.password1.length > 5 && this.password2.length > 5) {
          if(this.password2 != this.password1) {
            this.pwd2_msg = 'Passwords do not match';
            this.disable_btn = true;
            return true;
          } else {
            this.pwd2_msg = '';
            this.disable_btn = false;
            return false;
          }
        }
    },
    
    on_signup() {
      this.email = '';
      this.password1 = '';
      this.password2 = '';
      this.email_msg = '';
      this.pwd1_msg = '';
      this.pwd2_msg = '';
      this.msg1 = false;
      this.msg2 = false;
      this.disable_btn = true;
      this.$emit('change_comp', 'results');
    }, 
    
    show_terms() {
      this.$emit('change_comp', 'terms');
    }
  }
  
});

var Results = Vue.component('results', {
  
  // TEMPLATE
  template: '#results',
  
  // METHODS
  methods: {
    back_to_signup() {
      this.$emit('change_comp', 'signup-form');
    }
  }
  
});

var Terms = Vue.component('terms', {
  
  // TEMPLATE
  template: '#terms',
  
  // METHODS
  methods: {
    back_to_signup() {
      this.$emit('change_comp', 'signup-form');
    }
  }
  
});


new Vue({
  
  // ELEMENT
  el: '#app',
  
  // DATA 
  data: {
    compname: 'signup-form'
  },
  
  // COMPONENTS
  components: {
    'signup-form': SignupForm,
    'results': Results,
    'terms': Terms
  },
  
  methods: {
    swapcomp: function(comp) {
      this.compname = comp;
    }
  }
  
});

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

• TikTok
• Instagram
• Twitter
• Facebook
• Blog

Other useful resources:

• Free Resources (UI Kits, Admin, and Mobile Templates)
• UI/UX Design Book
• Tailwind CSS UI/UX Design Course - Code Included
• The Ultimate UI/UX Design Course