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.

Get The best In Web dev

Get The best In Web dev

Join dunebook and recieve best in Angular, React, Vue, Python, Java & more. Directly to your inbox once a week FREE !

You have Successfully Subscribed!

Pin It on Pinterest