Build a Contact Form with VueJS, Firebase & Postmark
By: Mat Wright
Tags: Vuejs, JavaScript, Vue, Firebase, Web Development

Saving to the Firestore Database

With the form built and validation implemented, we just need to add a submit handler to call our custom submit function. To do this, add a @ submit parameter to your form tag and set it's value to the name of your custom function.

<v-form ref="form" v-model="valid" method="POST" lazy-validation @submit="saveContactMessage" >

Now, add the following code to the methods: area of the export block in your page's script section.

methods: { saveContactMessage: function (e) { e.preventDefault() const messagesRef = this.$firebaseDatabase.collection('message') messagesRef.add( { name: this.name, email: this.email, message: this.message, time: new Date(), }, ) this.name= '' this.email = '' this.message = '' this.submitted = true this.snackbar = false }, }

When a user submits the form, the saveContactMessages() method is called automatically and the forms event object passed to it. Calling preventDefault() on the event object, prevents the default behaviour (submitting the form to the default target).

const messagesRef = this.$firebaseDatabase.collection('message')

The above section of code assigns a reference to a database collection with the name message. If you haven’t already created the collection manually, within the firebase cloud console, it will be created automatically when the first set of data is saved.

// Info

// Note that this.$firebaseDatabase is a reference to the instance // property that we set previously in the main.js file. The $ prefix // is a convention used by Vue to indicate a property that's

// available to all instances. This is primarly to avoid naming

// conflicts with local variables.

The add() method is called on the collection reference to which we pass an object containing the data we wish to save. In my example, we save the contents of the three input fields and a Date object, so we can refer to the time the message was added in the email that we are going to send out to the form's recipient.

Finally, we reset the form’s data to empty strings and trigger any further UI changes to indicate the form has been submitted. For example, it would be a good idea to implement a try/catch to pick up any errors during the database save process and show a snackbar alert to confirm success or failure to the user. A common reason why a database write might fail is because the database rules do not allow writes. To fix this, open the Firebase Cloud Console and select the Rules tab while in Database view.

/*

* Important

* Firestore security rules provide access control and validation in

* a code style format. For this example we are giving write

* permission to any successful database connection.

* When building a production app, it’s imperative to fully

* understand how firestore security rules work in order to keep

* your app secure. The above snippet is only an example for

* demonstration purposes.

*/

Submitting the form should now result in the form data being saved to the database. This will appear in the Data tab of the Database sections of the Cloud Console.