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="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>
Deven Rathore

Deven is an Entrepreneur, and Full-stack developer, Constantly learning and experiencing new things. He currently runs CodeSource.io and Dunebook.com.

Published by
Deven Rathore

Recent Posts

3 Ways to Get the Most Out of Your University’s Virtual Computer Lab

IT is more important than ever in the world of higher education, and yet with…

20 hours ago

Top Tips for Learning Java Programming

If you’re here for the top tips, we assume you’re ahead of the “how to…

1 day ago

Neural Networks for Creating Blog Texts

The world is progressing at unprecedented rates at the current moment, especially in terms of…

2 days ago

Top 20 Opensource Python Tkinter Projects

This article will highlight the Top 20 Opensource Python Tkinter Projects which we believe will…

4 days ago

Beginners guide to Sneaker Proxies

With their numerous applications in streamlining the data flow, securing both the servers and the…

1 week ago

Top 20 Node.js dashboard templates

In this article, We will be looking at some of the top Node.js dashboard templates.…

1 week ago