CINXE.COM
Backpack for Laravel
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="csrf-token" content="pL1HNoxppAYga4fEVetSOWYMDo9wYpXek8FAtC1k" /> <meta name="google-site-verification" content="NfSJhLH4VVEn1n1Db6oV10MIF-9wCSny4LSvkD5CrB8" /> <link rel="canonical" href="https://backpackforlaravel.com/register"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#7451c3"> <meta name="msapplication-TileColor" content="#7451c3"> <meta name="theme-color" content="#161c2d"> <title> Backpack for Laravel</title> <!-- General --> <meta name="keywords" content="backpack for laravel, laravel, admin panel"> <meta name="robots" content="index, follow"> <!-- Twitter Cards --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Backpack for Laravel"> <meta name="twitter:description" content=""> <meta name="twitter:image" content="https://backpackforlaravel.com/presentation/img/backpack/socials/backpack_og_image_general.jpg"> <meta name="twitter:creator" content="@laravelbackpack"/> <meta name="twitter:site" content="@laravelbackpack"/> <!-- Open Graph --> <meta property="og:site_name" content="Backpack for Laravel"> <meta property="og:title" content="Backpack for Laravel"> <meta property="og:description" content=""> <meta property="og:image" content="https://backpackforlaravel.com/presentation/img/backpack/socials/backpack_og_image_general.jpg"> <meta property="og:url" content="https://backpackforlaravel.com/register"> <meta property="og:locale" content="en"> <meta property="og:type" content="website"> <!-- JSON-LD --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebPage", "name": "Backpack for Laravel", "description": "", "image": ["https://backpackforlaravel.com/presentation/img/backpack/socials/backpack_og_image_general.jpg"], "url": "https://backpackforlaravel.com/register" } </script> <!-- CSS for libraries needed on all static pages --> <link rel="stylesheet" href="https://backpackforlaravel.com/presentation/css/theme.css"> <link rel="stylesheet" href="https://backpackforlaravel.com/presentation/css/theme-overwrites.css?v=3"> <link rel="stylesheet" href="https://backpackforlaravel.com/presentation/css/noty.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.12.0/jarallax.css"> <!-- Non-critical CSS - their loading is deferred --> <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <link rel="preload" href="https://backpackforlaravel.com/presentation/fonts/Feather/feather.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <!-- But fall back to standard CSS loading if JavaScript is not enabled --> <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css"></noscript> <noscript><link rel="stylesheet" href="https://backpackforlaravel.com/presentation/fonts/Feather/feather.css"></noscript> <style >[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {display:none;}[wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {animation-duration: 50000s;animation-name: livewireautofill;}@keyframes livewireautofill { from {} }</style> <script defer data-domain="backpackforlaravel.com" src="https://sweet-surf-fd04.dhcfw.workers.dev/js/script.pageview-props.js"></script> <script> window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) } // mark this pageview as logged in or not plausible('pageview', {props: {logged_in: 'false'}}); </script> </head> <body class="bg-light"> <nav id="secondaryNavbar" class="bg-light d-none d-print-none" aria-label="breadcrumb"> <div class="container"> <div class="row"> <div class="col-12"> <!-- WHEN NOT LOGGEN IN --> <div class="text-muted font-size-sm pt-3 float-left d-none d-sm-block">Create custom Laravel admin panels. Fast!</div> <ul class="nav font-size-sm float-right mt-1 mb-0"> <li class="nav-item"> <a class="nav-link text-muted" href="https://backpackforlaravel.com/login">Sign In</a> </li> <li class="nav-item"> <a class="nav-link text-muted" href="https://backpackforlaravel.com/register">Sign Up</a> </li> </ul> </div> </div> </div> </nav> <nav id="primaryNavbar" class="navbar navbar-expand-lg border-top navbar-light bg-white border-bottom d-none"> <div class="container"> <!-- Brand --> <a class="navbar-brand" href="https://backpackforlaravel.com"> <img src="https://backpackforlaravel.com/presentation/img/backpack/logos/backpack_logo.svg" class="navbar-brand-img" alt="..." style="min-width: 200px; max-height: 2.8rem; height: 80px;"> </a> <!-- Toggler --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- Collapse --> <div class="collapse navbar-collapse" id="navbarCollapse"> <!-- Toggler --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <i class="fe fe-x"></i> </button> <!-- Navigation --> <ul class="navbar-nav ml-auto "> <li class="nav-item"> <a class="nav-link" href="https://backpackforlaravel.com/docs/6.x"> Documentation </a> </li> <li class="nav-item"> <a class="nav-link" href="https://backpackforlaravel.com/pricing"> Pricing </a> </li> <li class="nav-item"> <a class="nav-link" href="https://backpackforlaravel.com/addons"> Add-Ons </a> </li> <li class="nav-item"> <a class="nav-link" href="https://backpackforlaravel.com/need-freelancer-or-development-team"> Services </a> </li> <li class="nav-item"> <a class="nav-link" style="padding-right: 0" href="https://backpackforlaravel.com/articles"> Blog <span class="badge text-danger" style="position: relative; left: -10px; top: -10px; padding: 0">New!</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://backpackforlaravel.com/contact"> Contact </a> </li> <li class="nav-item"> <a href="https://github.com/laravel-backpack/crud" title="See on Github" class="d-block pt-1 ml-1 mr-1" style="padding-top: 0.28rem!important;" target="_blank"> <svg width="23" height="21" viewBox="0 0 45 43" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M22.4781 0.254117C10.4847 0.254117 0.760742 9.97812 0.760742 21.9741C0.760742 31.5701 6.98341 39.7101 15.6141 42.5834C16.7007 42.7821 17.0967 42.1114 17.0967 41.5354C17.0967 41.0208 17.0781 39.6541 17.0674 37.8421C11.0261 39.1541 9.75141 34.9301 9.75141 34.9301C8.76341 32.4221 7.33941 31.7541 7.33941 31.7541C5.36741 30.4061 7.48874 30.4328 7.48874 30.4328C9.66874 30.5874 10.8154 32.6714 10.8154 32.6714C12.7527 35.9901 15.8994 35.0314 17.1367 34.4768C17.3341 33.0728 17.8941 32.1154 18.5154 31.5728C13.6927 31.0248 8.62207 29.1608 8.62207 20.8381C8.62207 18.4674 9.46874 16.5288 10.8581 15.0101C10.6341 14.4608 9.88874 12.2528 11.0701 9.26212C11.0701 9.26212 12.8941 8.67812 17.0434 11.4888C18.7754 11.0075 20.6341 10.7661 22.4807 10.7581C24.3247 10.7661 26.1834 11.0075 27.9181 11.4888C32.0647 8.67812 33.8847 9.26212 33.8847 9.26212C35.0701 12.2528 34.3247 14.4608 34.1007 15.0101C35.4927 16.5288 36.3341 18.4674 36.3341 20.8381C36.3341 29.1821 31.2554 31.0181 26.4167 31.5554C27.1967 32.2261 27.8914 33.5514 27.8914 35.5781C27.8914 38.4808 27.8647 40.8234 27.8647 41.5354C27.8647 42.1168 28.2554 42.7928 29.3581 42.5808C37.9821 39.7021 44.1994 31.5675 44.1994 21.9741C44.1994 9.97812 34.4741 0.254117 22.4781 0.254117Z" fill="#525252"></path> </svg> </a> </li> </ul> <!-- Button --> <!-- <a class="navbar-btn btn btn-sm btn-info shadow ml-auto lift" href="docs/index.html" target="_blank"> Hire Us </a> --> </div> </div> </nav> <!-- CONTENT ================================================== --> <section class="section-border border-info min-vh-100"> <div class="container d-flex flex-column"> <div class="row"> <div class="col-12"> <a class="d-block mt-6 mb-6 text-center" href="https://backpackforlaravel.com"> <img src="https://backpackforlaravel.com/presentation/img/backpack/logos/backpack_logomark.svg" class="navbar-brand-img" alt="Backpack for Laravel" style="max-height: 4.8rem; margin-bottom: -100px;"> </a> </div> </div> <div class="row align-items-center justify-content-center no-gutters"> <div class="col-12 col-md-5 col-lg-4 py-8 py-md-11"> <!-- Heading --> <h2 class="mb-0 font-weight-bold text-center text-gray-800" id="backpackLoginModalTitle"> Sign Up </h2> <!-- Text --> <p class="mb-6 text-center text-muted mt-4"> To receive security notices, buy or apply for licenses and publish articles or add-ons. </p> <!-- Submit --> <a class="btn btn-block btn-dark" href="https://backpackforlaravel.com/auth/github"> Sign up with Github <i class="fe fe-github"></i> </a> <hr data-title="OR" class="bg-light"> <!-- Form --> <form class="mb-6" role="form" method="POST" action="https://backpackforlaravel.com/register"> <input type="hidden" name="_token" value="pL1HNoxppAYga4fEVetSOWYMDo9wYpXek8FAtC1k"> <div id="my_name_cgFxR0prp9EYdEV6_wrap" style="display: none" aria-hidden="true"> <input id="my_name_cgFxR0prp9EYdEV6" name="my_name_cgFxR0prp9EYdEV6" type="text" value="" autocomplete="nope" tabindex="-1"> <input name="valid_from" type="text" value="eyJpdiI6Ik05Ylo4d2FZcjJyV005RjRQUW9QU0E9PSIsInZhbHVlIjoiUWRuSzNaUlN2cnlGRnVUS3R5ME9TUT09IiwibWFjIjoiMDE5Nzc0ODQ3NTcyMzVkYjY4ZDExODFiNzg2NzFmZjRhNzZjOGIxOGUzMmFjNTU1YTEwNTJhY2U1NjY4OTA3YSIsInRhZyI6IiJ9" autocomplete="off" tabindex="-1"> </div> <!-- Name --> <div class="form-group"> <label class="sr-only" for="backpackLoginModalName"> Name </label> <input type="text" class="form-control " id="backpackLoginModalName" name="name" placeholder="Name" value="" required > </div> <!-- Email --> <div class="form-group"> <label class="sr-only" for="backpackLoginModalEmail"> Email </label> <input type="email" class="form-control " id="backpackLoginModalEmail" name="email" placeholder="Email" value="" required > </div> <!-- Password --> <div class="form-group mb-5"> <label class="sr-only" for="backpackLoginModalPassword"> Password </label> <input type="password" class="form-control " id="backpackLoginModalPassword" name="password" placeholder="Password" required > </div> <!-- Confirm Password --> <div class="form-group mb-5"> <label class="sr-only" for="backpackLoginModalConfirmPassword"> Confirm Password </label> <input type="password" class="form-control " id="backpackLoginModalConfirmPassword" name="password_confirmation" placeholder="Confirm Password" required > </div> <!-- Submit --> <button class="btn btn-block btn-info" type="submit"> Register </button> </form> <!-- Text --> <p class="mb-0 font-size-sm text-center text-muted"> Already have an account? <a class="text-info" href="https://backpackforlaravel.com/login">Log in</a>. </p> </div> </div> <!-- / .row --> </div> <!-- / .container --> </section> <footer class="py-8 py-md-11 border-gray-200 d-none d-print-none"> <div class="container"> <div class="row"> <div class="d-none d-lg-block col-md-6 col-lg-4"> <!-- Brand --> <img src="https://backpackforlaravel.com/presentation/img/backpack/logos/backpack_logo.svg" alt="..." class="footer-brand img-fluid mb-2" style="max-width: 80%; filter: none!important;"> <!-- Text --> <p class="text-gray-600 mb-2 font-size-sm"> Build admin panels for your clients, the easy way. </p> <!-- Social --> <ul class="list-unstyled list-inline list-social mb-6 mb-md-0"> <li class="list-inline-item list-social-item mr-3"> <a href="https://github.com/laravel-backpack" class="text-decoration-none"> <i class="fe fe-github"></i> </a> </li> <li class="list-inline-item list-social-item mr-3"> <a href="https://www.twitter.com/laravelbackpack/" class="text-decoration-none"> <i class="fe fe-twitter"></i> </a> </li> <li class="list-inline-item list-social-item mr-3"> <a href="https://www.facebook.com/BackpackForLaravel/" class="text-decoration-none"> <i class="fe fe-facebook"></i> </a> </li> <li class="list-inline-item list-social-item mr-3"> <a href="https://stackoverflow.com/questions/tagged/backpack-for-laravel" class="text-decoration-none"> <i class="fe fe-layers"></i> </a> </li> </ul> </div> <div class="col-6 col-md-3 col-lg-2"> <!-- Heading --> <div class="h6 font-weight-bold text-uppercase text-gray-700"> First time? </div> <!-- List --> <ul class="list-unstyled text-muted mb-6 mb-md-8 mb-lg-0"> <li class="mb-3"> <a href="https://backpackforlaravel.com/docs/6.x/getting-started-basics" class="text-reset"> Text Tutorial </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/docs/6.x/getting-started-videos" class="text-reset"> Video Tutorial </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/docs/6.x" class="text-reset"> Documentation </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/docs/features-free-vs-paid" class="text-reset"> Free vs Paid </a> </li> </ul> </div> <div class="col-6 col-md-3 col-lg-2 offset-lg-0"> <!-- Heading --> <div class="h6 font-weight-bold text-uppercase text-gray-700"> Features </div> <!-- List --> <ul class="list-unstyled text-muted mb-0"> <li class="mb-3"> <a href="https://backpackforlaravel.com/laravel-crud" class="text-reset"> CRUDs </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/laravel-forms" class="text-reset"> Forms </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/laravel-dashboard" class="text-reset"> Dashboards </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/laravel-crud-generator" class="text-reset"> Generators </a> </li> <!-- <li class="mb-3"> <a href="https://backpackforlaravel.com/newsletter" class="text-reset"> Newsletter </a> </li> --> </ul> </div> <div class="col-6 col-md-3 col-lg-2 offset-lg-0"> <!-- Heading --> <div class="h6 font-weight-bold text-uppercase text-gray-700"> Community </div> <!-- List --> <ul class="list-unstyled text-muted mb-0"> <li class="mb-3"> <a href="https://github.com/Laravel-Backpack/community-forum/discussions" class="text-reset"> Forum </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/articles" class="text-reset"> Articles </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/addons" class="text-reset"> Add-ons </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/newsletter" class="text-reset"> Newsletter </a> </li> <!-- <li class="mb-3"> <a href="" class="text-reset"> Github </a> </li> --> <!-- <li class="mb-3"> <a href="https://backpackforlaravel.com/newsletter" class="text-reset"> Newsletter </a> </li> --> </ul> </div> <div class="col-6 col-md-3 col-lg-2"> <!-- Heading --> <div class="h6 font-weight-bold text-uppercase text-gray-700"> Legal </div> <!-- List --> <ul class="list-unstyled text-muted mb-0"> <li class="mb-3"> <a href="https://backpackforlaravel.com/eula" class="text-reset"> EULA </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/cookie-policy" class="text-reset"> Cookie Policy </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/privacy-policy" class="text-reset"> Privacy Policy </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/rewards-policy" class="text-reset"> Rewards T&C </a> </li> </ul> </div> </div> <!-- / .row --> </div> <!-- / .container --> </footer> <!-- JS needed on all static pages --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/loadCSS/2.1.0/cssrelpreload.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/3.0.0-beta.6/aos.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.12.0/jarallax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.12.0/jarallax-video.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.12.0/jarallax-element.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> <!-- Theme JS --> <!-- build:js @webRoot/assets/js/theme.min.js --> <script src="https://backpackforlaravel.com/presentation/js/aos.js"></script> <script src="https://backpackforlaravel.com/presentation/js/fancybox.js"></script> <script src="https://backpackforlaravel.com/presentation/js/navbar.js"></script> <script src="https://backpackforlaravel.com/presentation/js/polyfills.js"></script> <script src="https://backpackforlaravel.com/presentation/js/popovers.js"></script> <script src="https://backpackforlaravel.com/presentation/js/smooth-scroll.js"></script> <script src="https://backpackforlaravel.com/presentation/js/theme.js"></script> <script src="https://backpackforlaravel.com/presentation/js/tooltips.js"></script> <script src="https://backpackforlaravel.com/presentation/js/dropdown.js"></script> <!-- endbuild --> <script> // Scroll to hash on page load document.addEventListener("DOMContentLoaded", function () { if (window.location.hash) { const targetElement = document.querySelector(window.location.hash); if (targetElement) { setTimeout(() => { targetElement.scrollIntoView({ behavior: "smooth" }); }, 500); // Small delay to ensure the page is fully rendered } } }); // Set active state on navbar links jQuery(document).ready(function($) { var current_url = "https://backpackforlaravel.com/register"; var full_url = current_url+location.search; var $navLinks = $("#primaryNavbar li a"); // Don't do that on homepage if (current_url == "https://backpackforlaravel.com") { return ; } // First look for an exact match including the search string var $curentPageLink = $navLinks.filter( function() { return $(this).attr('href') === full_url; } ); // If not found, look for the link that starts with the url if(!$curentPageLink.length > 0){ $curentPageLink = $navLinks.filter( function() { return $(this).attr('href').startsWith(current_url) || current_url.startsWith($(this).attr('href')); } ); } if($curentPageLink.length > 0) { $curentPageLink.addClass('active'); } }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js"></script> <script> $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); </script> <script type="text/javascript"> Noty.overrideDefaults({ layout : 'topRight', theme : 'sunset', timeout : 2500, closeWith: ['click', 'button'], }); </script> <script src="/livewire/livewire.js?id=90730a3b0e7144480175" data-turbo-eval="false" data-turbolinks-eval="false" ></script><script data-turbo-eval="false" data-turbolinks-eval="false" >window.livewire = new Livewire();window.Livewire = window.livewire;window.livewire_app_url = '';window.livewire_token = 'pL1HNoxppAYga4fEVetSOWYMDo9wYpXek8FAtC1k';window.deferLoadingAlpine = function (callback) {window.addEventListener('livewire:load', function () {callback();});};let started = false;window.addEventListener('alpine:initializing', function () {if (! started) {window.livewire.start();started = true;}});document.addEventListener("DOMContentLoaded", function () {if (! started) {window.livewire.start();started = true;}});</script> </body> </html>