Formzillion Self-hostedThe optimal solution for teams that want absolute control of their forms data.
Initiate the collection of form submissions from your Nuxt form using formzillion.
Simply create your form in formzillion and insert your form-id into your form.
This guide will demonstrate the quick process of adding a contact form to your NuxtJS project and connecting it to Formzillion for submission handling.
How to create a Nuxt JS Contact Form
Sign in to your Formzillion account and create a new form with name NuxyJS Contact Form or a similar identifier. Formzillion will assign a unique form ID specifically for identifying your NuxyJs form.
To initiate the project setup, let's follow the instructions provided in the Nuxt JS Getting Started documentation. Open your terminal and execute the following command to create a new site:
Copy
Navigate to the newly created directory for your website:
Copy
Run the development server:
Copy
You can now access the site in your browser by visiting https://localhost:4000. Below observe the sample site displayed on the screen:
Great job! You have successfully created a new NuxtJS site. Now, let's proceed to learn how to add a contact form into your project.
To integrate the Formzillion form endpoint with your NuxtJS project's contact form, follow these steps:
In order to integrate the form endpoint from Formzillion into Nuxt.js, we will create a new file named contact.vue in the /pages directory of your Nuxt.js application. This file will contain the bellow code to add the form functionality to your Nuxt.js app.
Copy
To enhance the appearance of the form, you can apply custom CSS. Add the following code snippet to the bottom of the contact.vue file located in /pages:
Copy
Now, with the applied styling, the form has an appealing visual design that appears as follows:
To successfully submit your form to Formzillion, ensure that you include the 'FORM_ID' in the provided form code. This 'FORM_ID' should correspond to the ID assigned to your specific Formzillion form.
And there you have it! Once you fill out and submit the form, you will be able to view the default submission thank you page.
Congratulations! Your NuxtJS site now has the contact form powered by Formzillion!
