CREATE A FULL SCREEN SIGNUP FORM INTERFACE WITH LARAVEL

In this tutorial we will use laravel built in auth function for our sign up form ! what we are going to make is a full-screen signup form interface.  Actually, i has created this video 2 years back. I hope you will find it Helpful 😉

 

download this form folder  and add this to your public folder as shown in the video

and then add this code in resources/views/auth/register.blade.php


<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Register at hyguyz its free</title>
    <meta name="description" content="REgistration at hyguyz is free and always will be" />
    <meta name="keywords" content="hyguyz , register" />

     <link rel="stylesheet" type="text/css" href="/form/demo.css">
          <link rel="stylesheet" type="text/css" href="/form/component.css">
                    <link rel="stylesheet" type="text/css" href="/form/cs-select.css">



        <script src="/form/modernizr.custom.js"></script>

  <body>
    <div class="container">

      <div class="fs-form-wrap" id="fs-form-wrap">


        <div class="fs-title">
        <h1> Register at Hyguyz </h1>
          <div class="codrops-top">
            <a class="codrops-icon codrops-icon-prev" href="/"><span>Go Back</span></a>
            <a class="codrops-icon codrops-icon-drop" href="#"><span>See terms & conditions</span></a>
            <a class="codrops-icon codrops-icon-info" href="#"><span>See privacy info</span></a>
          </div>
        </div>
        
          <form id="myform" action="/auth/register"   <form method="POST"  class="fs-form fs-form-full" autocomplete="off"> {!! csrf_field() !!}

<base target="_parent">
 <ol class="fs-fields">
             <li> <label class="fs-field-label fs-anim-upper" for="Name">What's your name?</label>
              <input class="fs-anim-lower" <input type="text" name="name" value="{{ old('name') }}" placeholder="Your Name" required/>
            </li>

            <li> <label class="fs-field-label fs-anim-upper" for="username">What's your username?</label>
   <input class="fs-anim-lower" <input type="text" name="username" value="{{ old('username') }}" placeholder="username" required/>
            </li>


  <li> <label class="fs-field-label fs-anim-upper" for="username">What's your dunebook?</label>
   <input class="fs-anim-lower" <input type="text" name="dunebook" value="dunebook" placeholder="hello" required/>
            </li>


            <li>
              <label class="fs-field-label fs-anim-upper" for="Email" data-info="We won't send you spam, we promise..."> your email address?</label>
              <input class="fs-anim-lower"   <input type="email" name="email" value="{{ old('email') }}"placeholder="[email protected].com" required/>
  </li>

            <li>
              <label class="fs-field-label fs-anim-upper" for="password">Your password !</label>
              <input class="fs-anim-lower" <input type="password" name="password" placeholder="Must be strong" required/>
            </li>
 


 <li>



              <label class="fs-field-label fs-anim-upper" for="password">Confirm password !</label>
              <input class="fs-anim-lower" <input type="password" name="password_confirmation" placeholder="Must be strong" required/>
            </li>
  </ol>
          <button class="fs-submit" type="submit">Register</button>


  </div>  
  @foreach ($errors->all() as $error)
    <p style="background:#E33631; comor:#fff; font-size:16px; display:block;" class="alert alert-danger">{{ $error }}</p>
@endforeach
 
<!-- /fs-form-wrap -->

        <script src="/js/all.js"></script>

    <script>
      (function() {
        var formWrap = document.getElementById( 'fs-form-wrap' );

        [].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
          new SelectFx( el, {
            stickyPlaceholder: false,
            onChange: function(val){
              document.querySelector('span.cs-placeholder').style.backgroundColor = val;
            }
          });
        } );

        new FForm( formWrap, {
          onReview : function() {
            classie.add( document.body, 'overview' );
          }
        } );
      })();
    </script>
  </body>
</html>

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares