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>
IT is more important than ever in the world of higher education, and yet with…
If you’re here for the top tips, we assume you’re ahead of the “how to…
The world is progressing at unprecedented rates at the current moment, especially in terms of…
This article will highlight the Top 20 Opensource Python Tkinter Projects which we believe will…
With their numerous applications in streamlining the data flow, securing both the servers and the…
In this article, We will be looking at some of the top Node.js dashboard templates.…