Formzillion Logo
Get Started

Guides

/

Vuejs

logo
app-logo

Add a form to your Vue.js

Initiate the collection of form submissions from your Vue.js form using formzillion.
Simply create your form in formzillion and insert your form-id into your form.

Building forms with Vue.js and Formzillion

Vue.js is a JavaScript framework for building dynamic and interactive user interfaces with a component-based architecture and reactive data binding. It provides developers with an effortless and intuitive development experience, enabling the creation of scalable and maintainable web applications.

This guide will demonstrate the quick process of adding a contact form to your Vue.js project and connecting it to Formzillion for submission handling.

How to create a Vue.js Contact Form

Step 1 — Create new form endpoint on Formzillion

Sign in to your Formzillion account and create a new form with name Vue.js Contact Form or a similar identifier. Formzillion will assign a unique form ID specifically for identifying your Vue.js form.

Step 2 — Create a new VueJS project

To initiate the project setup, let's follow the instructions provided in the Vue.js Getting Started documentation. Open your terminal and execute the following command to create a new site:

npm init vue@latest

Copy

To initialize a Vue project, execute the "create-vue" command, which is the official Vue project scaffolding tool. During the setup process, you will be presented with prompts to configure various optional features, including TypeScript and testing support:

1. Project name: … <your-project-name>
2. Add TypeScript? … No / Yes
3. Add JSX Support? … No / Yes
4. Add Vue Router for Single Page Application development? … No / Yes
5. Add Pinia for state management? … No / Yes
6. Add Vitest for Unit testing? … No / Yes
7. Add an End-to-End Testing Solution? … No / Cypress / Playwright
8. Add ESLint for code quality? … No / Yes
9. Add Prettier for code formatting? … No / Yes

Copy

If you're uncertain about an option, you can simply press Enter to choose the default, which is usually "No" for now. After successfully creating the project, refer to the provided instructions to install the necessary dependencies and initiate the development server.

cd <your-project-name>
npm install

Copy

Run the development server

npm run dev

Copy

You can now access the site in your browser by visiting https://localhost:3000. Below observe the sample site displayed on the screen:

vuejs site

Great job! You have successfully created a new Vue.js site. Now, let's proceed to learn how to add a contact form into your project.

Step 3 — Create a Contact Form

<form action="https://app.formzillion.com/f/{form_id}">
<input type="text" name="name" placeholder="Your Name">
<input type="email" name="email" placeholder="Your Email">
<input type="text" name="message" placeholder="Your Message">
<button type="submit">Send</button>
</form>

Copy

To incorporate a contact form into your Vue.js site, you can either add it to the existing src/App.vue file.

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.

Thank you

Congratulations! Your Vue.js site now has the contact form powered by Formzillion!

Ready to send your first form submission?

Formzillion Logo Formzillion Cloud

The fastest way to organize and manage your forms

Get started for free
Formzillion Logo Formzillion Self-hosted

The optimal solution for teams that want absolute control of their forms data.

Read Docs
Follow us

Copyright © 2023 Zillionstack Inc. All rights reserved.

PrivacyTerms