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="you@email.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>