Laravel 11

Laravel 11 Form Handling Tutorial – Create and Submit Forms Without Database

Laravel 11 Form Creation and Submission (Without Database)

June 24, 2025 by admin

📌 Introduction

Laravel 11 makes it incredibly easy to create and handle HTML forms. This tutorial walks you through building a simple form using Blade templates and displaying submitted data without saving it to the database.

✅ Prerequisites

  • Laravel 11 installed
  • Composer and PHP 8.3+
  • A browser or Postman to test locally

✅ Step 1: Create Laravel Project

composer create-project laravel/laravel laravel11-form
cd laravel11-form

✅ Step 2: Create Route and Controller

Generate a controller:

php artisan make:controller FormController

Then, update routes/web.php:

use App\Http\Controllers\FormController;

Route::get('/form', [FormController::class, 'showForm'])->name('form.show');
Route::post('/form', [FormController::class, 'handleForm'])->name('form.submit');

✅ Step 3: Add Controller Logic

Update app/Http/Controllers/FormController.php:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormController extends Controller
{
    public function showForm()
    {
        return view('form');
    }

    public function handleForm(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required',
            'email' => 'required|email',
            'message' => 'required'
        ]);

        return view('form_result', ['data' => $validated]);
    }
}

✅ Step 4: Create Blade Views

📝 resources/views/form.blade.php

@extends('layouts.app')

@section('title', 'Contact Form')

@section('content')
<h2>Contact Us</h2>

@if ($errors->any())
    <div style="color:red;">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('form.submit') }}">
    @csrf
    <label>Name:</label><br>
    <input type="text" name="name"><br><br>

    <label>Email:</label><br>
    <input type="email" name="email"><br><br>

    <label>Message:</label><br>
    <textarea name="message"></textarea><br><br>

    <button type="submit">Submit</button>
</form>
@endsection

📝 resources/views/form_result.blade.php

@extends('layouts.app')

@section('title', 'Form Result')

@section('content')
<h2>Submitted Data</h2>

<ul>
    <li><strong>Name:</strong> {{ $data['name'] }}</li>
    <li><strong>Email:</strong> {{ $data['email'] }}</li>
    <li><strong>Message:</strong> {{ $data['message'] }}</li>
</ul>

<a href="{{ route('form.show') }}">Back to form</a>
@endsection

✅ Step 5: Layout File

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <div style="width: 600px; margin: auto; padding: 20px;">
        @yield('content')
    </div>
</body>
</html>

✅ Assignment

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>London Travel Guide</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f8f9fa;
    }

    header {
      background: #007bff;
      color: white;
      padding: 20px;
      text-align: center;
    }

    .container {
      display: flex;
      min-height: 80vh;
    }

    .sidebar {
      width: 200px;
      background: #343a40;
      padding: 20px;
    }

    .sidebar ul {
      list-style: none;
    }

    .sidebar li {
      margin-bottom: 15px;
    }

    .sidebar a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    .sidebar a:hover {
      color: #ffc107;
    }

    .content {
      flex: 1;
      padding: 30px;
      background: white;
    }

    footer {
      background: #343a40;
      color: white;
      text-align: center;
      padding: 15px;
    }
  </style>
</head>

<body>

  <header>
    <h1>London Travel Guide</h1>
  </header>

  <div class="container">
    <aside class="sidebar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">London</a></li>
        <li><a href="#">Visiting Places</a></li>
        <li><a href="#">Book Now</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </aside>

    <main class="content">
      <h2>Welcome to London</h2>
      <p>Explore the beauty, culture, and history of London. Start planning your journey today!</p>
    </main>
  </div>

  <footer>
    <p>&copy; 2025 London Travel. All rights reserved.</p>
  </footer>

</body>
</html>

✅ Conclusion

You’ve now built a simple Laravel 11 form that takes user input and displays it—no database required. This is a great starting point for handling forms, validation, and working with Blade templates.

Leave a Reply

Your email address will not be published. Required fields are marked *