Create A Contact Form With VueJS And Laravel

Table of Contents

In this tutorial we're going to learn how we can create a VueJS component for a contact form and create a Laravel API Endpoint that will send the message from the contact form.

VueJS Contact Component

First we're going to build our VueJS component, this goes into your resources/assets/js/components/ directory. The HTML for the contact form is very simple we just have a name, email, message and a submit button. You'll notice on the form tag we have a submit event to run the submitForm method v-on:submit.prevent="submitForm". The second thing you'll notice is that on each of the form elements we want to collect data on we have a v-model attribute. In the script section of our component we need to define the form element we want to collect data from in the data section of the component.


Above we said on the submit of form we call the submitForm method, this will collect the form data and send a post request to the route api/contact using axios which in turn will send an email on the back-end.

    methods: {
            let formData = {

            return'/api/contact', formData).then(data => {
              // Change to notify the user
              console.log('Message sent');

Below is the full contact form component.