Building A Form Component In Laravel Using Livewire

Now that your system is setup with Livewire, let’s work on creating a component.

Step 1: Generate a Livewire Component

Open the Terminal on your Mac and navigate to your livewire_practice directory by using the following command:

cd [your livewire_project path]

Make sure to replace [your livewire_practice path] with the actual path of your livewire_practice folder path. Now, you have to generate a Livewire component by running the following command in your terminal:

php artisan make:livewire ContactForm

This command will create a new Livewire component named ContactForm. You can find the component in the “livewire” directory of your Laravel application, located in the “resources/views/” directory.

Step 2: Add a Form to the Livewire Component View

Next, open the contact-form.blade.php file in your code editor. You’ll find this file in the livewire_practiceresourcesviewslivewire folder. Open the file in the editor and you’ll find that the file contains some basic HTML code.

<div> 
... 
</div>

Between the html tags, paste in the following html form.

<form class="form-control mx-auto my-5 w-50 p-5">
    <div class="row mb-3">
        <label for="name" class="form-label">Name</label> 
        <input id="name" type="text" class="form-control">
    </div>
    <div class="row mb-3">
        <label for="email" class="form-label">Name</label> 
        <input id="email" type="email" class="form-control">
    </div>
    <div class="row mb-3">
        <label for="subject" class="form-label">Subject</label> 
        <input id="subject" type="text" class="form-control">
    </div>
    <div class="row mb-3">
        <label for="message" class="form-label">Subject</label> 
        <textarea class="form-control" id="message" cols="30" rows="6"></textarea>
    </div>
    <div class="row">
        <button class="btn btn-primary">Send Message</button>
    </div>
</form>

So that the code looks like:

<div>
    <form class="form-control mx-auto my-5 w-50 p-5">
        <div class="row mb-3">
            <label for="name" class="form-label">Name</label> 
            <input id="name" type="text" class="form-control">
        </div>
        <div class="row mb-3">
            <label for="email" class="form-label">Name</label> 
            <input id="email" type="email" class="form-control">
        </div>
        <div class="row mb-3">
            <label for="subject" class="form-label">Subject</label> 
            <input id="subject" type="text" class="form-control">
        </div>
        <div class="row mb-3">
            <label for="message" class="form-label">Subject</label> 
            <textarea class="form-control" id="message" cols="30" rows="6"></textarea>
        </div>
        <div class="row">
            <button class="btn btn-primary">Send Message</button>
        </div>
    </form>
</div>

(note: a livewire component must always have a single html element as the top most parent element.)

Step 3: Add the Livewire Component to a blade View

In this file, you can add the Livewire component to your view by adding the following code in between the <body> tags. If you want, you can also replace it with the “Some Text here” text written there:

<livewire:contact-form />

Now open the welcome.blade.php file in your text editor. You’ll find this file in the livewire_practiceresourcesviews folder.

This directive represents a basic HTML form. To preview what this looks like in the browser:

In the terminal type: php artisan serve
In the browser, open: http://localhost:8000

You should then see:

In the next step we will validate our data and save it to the database.

Cart review

Building a Form Component in Laravel using Livewire

Step 1: Generate a Livewire Component

Step 2: Add a Form to the Livewire Component View

Step 3: Add the Livewire Component to a blade View