In this blog, I am going to explain how to create a login & register popup form in Laravel? So, before creating a Project like below- In this blog, Project Name “Model_form” but you can change as you want to create

“$ composer create-project –prefer-dist laravel/laravel Model_form”

“$ cd Model_form”

“$ php artisan make:auth”

“$ composer require laravel/ui”

“$ php artisan serve”

For after this step open your project in editor and let’s create this file: resources/views/partials/login.blade.php

	<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title" id="loginModal">{{ __('Login') }}</h5>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	<span aria-hidden="true">&times;</span>
	</button>
	</div>
	<div class="modal-body">
	<form method="POST" action="{{ route('login') }}">
	@csrf
	<div class="form-group row">
	<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
	<div class="col-md-6">
	<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
	@error('email')
	<span class="invalid-feedback" role="alert">
	<strong>{{ $message }}</strong>
	</span>
	@enderror
	</div>
	</div>
	<div class="form-group row">
	<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
	<div class="col-md-6">
	<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
	@error('password')
	<span class="invalid-feedback" role="alert">
	<strong>{{ $message }}</strong>
	</span>
	@enderror
	</div>
	</div>
	<div class="form-group row">
	<div class="col-md-6 offset-md-4">
	<div class="form-check">
	<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
	<label class="form-check-label" for="remember">
	{{ __('Remember Me') }}
	</label>
	</div>
	</div>
	</div>
	<div class="form-group row mb-0">
	<div class="col-md-8 offset-md-4">
	<button type="submit" class="btn btn-primary">
	{{ __('Login') }}
	</button>
	@if (Route::has('password.request'))
	<a class="btn btn-link" href="{{ route('password.request') }}">
	{{ __('Forgot Your Password?') }}
	</a>
	@endif
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>
	@section('scripts')
	@parent
	@if($errors->has('email') || $errors->has('password'))
	<script>
	$(function() {
	$('#loginModal').modal({
	show: true
	});
	});
	</script>
	@endif
	@endsection

view raw login.blade.php hosted with by GitHub

This is almost default resources/views/auth/login.blade.php file.

After that create this file resources/views/partials/register.blade.php and paste below code

	<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModal" aria-hidden="true">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title" id="registerModal">{{ __('Register') }}</h5>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	<span aria-hidden="true">&times;</span>
	</button>
	</div>
	<div class="modal-body">
	<form method="POST" id="registerForm">
	@csrf
	<div class="form-group row">
	<label for="nameInput" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
	<div class="col-md-6">
	<input id="nameInput" type="text" class="form-control" name="name" value="{{ old('name') }}" autocomplete="name" autofocus>
	<span class="invalid-feedback" role="alert" id="nameError">
	<strong></strong>
	</span>
	</div>
	</div>
	<div class="form-group row">
	<label for="emailInput" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
	<div class="col-md-6">
	<input id="emailInput" type="email" class="form-control" name="email" value="{{ old('email') }}" required autocomplete="email">
	<span class="invalid-feedback" role="alert" id="emailError">
	<strong></strong>
	</span>
	</div>
	</div>
	<div class="form-group row">
	<label for="passwordInput" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
	<div class="col-md-6">
	<input id="passwordInput" type="password" class="form-control" name="password" required autocomplete="new-password">
	<span class="invalid-feedback" role="alert" id="passwordError">
	<strong></strong>
	</span>
	</div>
	</div>
	<div class="form-group row">
	<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
	<div class="col-md-6">
	<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
	</div>
	</div>
	<div class="form-group row mb-0">
	<div class="col-md-6 offset-md-4">
	<button type="submit" class="btn btn-primary">
	{{ __('Register') }}
	</button>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>
	@section('scripts')
	@parent
	<script>
	$(function () {
	$('#registerForm').submit(function (e) {
	e.preventDefault();
	let formData = $(this).serializeArray();
	$(".invalid-feedback").children("strong").text("");
	$("#registerForm input").removeClass("is-invalid");
	$.ajax({
	method: "POST",
	headers: {
	Accept: "application/json"
	},
	url: "{{ route('register') }}",
	data: formData,
	success: () => window.location.assign("{{ route('home') }}"),
	error: (response) => {
	if(response.status === 422) {
	let errors = response.responseJSON.errors;
	Object.keys(errors).forEach(function (key) {
	$("#" + key + "Input").addClass("is-invalid");
	$("#" + key + "Error").children("strong").text(errors[key][0]);
	});
	} else {
	window.location.reload();
	}
	}
	})
	});
	})
	</script>
	@endsection

view raw register.blade.php hosted with by GitHub

This is also almost default like resources/views/auth/register.blade.php

After that open this file resources/views/layouts/app.blade.php we make this change in login section like below.

	<!doctype html>
	<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- CSRF Token -->
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<title>{{ config('app.name', 'Laravel') }}</title>
	<!-- Fonts -->
	<link rel="dns-prefetch" href="//fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
	<!-- Styles -->
	<link href="{{ asset('css/app.css') }}" rel="stylesheet">
	</head>
	<body>
	<div id="app">
	<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
	<div class="container">
	<a class="navbar-brand" href="{{ url('/') }}">
	{{ config('app.name', 'Laravel') }}
	</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<!-- Left Side Of Navbar -->
	<ul class="navbar-nav mr-auto">
	</ul>
	<!-- Right Side Of Navbar -->
	<ul class="navbar-nav ml-auto">
	<!-- Authentication Links -->
	@guest
	<li class="nav-item">
	<a class="nav-link" style="cursor: pointer" data-toggle="modal" data-target="#loginModal">{{ __('Login') }}</a>
	</li>
	@if (Route::has('register'))
	<li class="nav-item">
	<a class="nav-link" style="cursor: pointer" data-toggle="modal" data-target="#registerModal">{{ __('Register') }}</a>
	</li>
	@endif
	@else
	<li class="nav-item dropdown">
	<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
	{{ Auth::user()->name }} <span class="caret"></span>
	</a>
	<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
	<a class="dropdown-item" href="{{ route('logout') }}"
	onclick="event.preventDefault();
	document.getElementById('logout-form').submit();">
	{{ __('Logout') }}
	</a>
	<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
	@csrf
	</form>
	</div>
	</li>
	@endguest
	</ul>
	</div>
	</div>
	</nav>
	<main class="py-4">
	@yield('content')
	</main>
	</div>
	@include('partials.login')
	@include('partials.register')
	<script src="{{ asset('js/app.js') }}"></script>
	@yield('scripts')
	</body>
	</html>

view raw app.blade.php hosted with by GitHub

After that open this file resources/views/welcome.blade.php and change below like

	@extends('layouts.app')
	@section('content')
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-md-8">
	<div class="card">
	<div class="card-header">Welcome</div>
	<div class="card-body">
	Welcome to the website!
	</div>
	</div>
	</div>
	</div>
	</div>
	@endsection

view raw welcome.blade.php hosted with by GitHub

And open this file resources/views/home.blade.php and change like belo

	@extends('layouts.app')
	@section('content')
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-md-8">
	<div class="card">
	<div class="card-header">Dashboard</div>
	<div class="card-body">
	@if (session('status'))
	<div class="alert alert-success" role="alert">
	{{ session('status') }}
	</div>
	@endif
	You are logged in!
	</div>
	</div>
	</div>
	</div>
	</div>
	@endsection

view raw home.blade.php hosted with by GitHub

After that your popup forms are ready like below.

«

Prev

1

/

1

Next

»

Laravel 5.5 CRUD Tutorial, Introduction And Agenda Overview, Laravel Training Part – 1 DevopsSchool

«

Prev

1

/

1

Next

»

Rajesh Kumar

I’m a DevOps/SRE/DevSecOps/Cloud Expert passionate about sharing knowledge and experiences. I am working at Cotocus. I blog tech insights at DevOps School, travel stories at Holiday Landmark, stock market tips at Stocks Mantra, health and fitness guidance at My Medic Plus, product reviews at I reviewed , and SEO strategies at Wizbrand. 

Please find my social handles as below;

Rajesh Kumar Personal Website
Rajesh Kumar at YOUTUBE
Rajesh Kumar at INSTAGRAM
Rajesh Kumar at X
Rajesh Kumar at FACEBOOK
Rajesh Kumar at LINKEDIN
Rajesh Kumar at PINTEREST
Rajesh Kumar at QUORA
Rajesh Kumar at WIZBRAND