Nuxt
Learn how to integrate your Formbox form with Nuxt.
What is Nuxt?
Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.
Prerequisites
Before you begin, you’ll need to have a Formbox form. If you don’t have one yet, you can create a new form by following the steps in the Introduction guide. Once you have your form, make a note of the form’s endpoint url in the setup tab of your form page, as you’ll need it later.
Creating a new Nuxt project
To get up and running quickly, we will follow the official Nuxt installation guide to create a new Nuxt project. In your terminal, run the following command:
npx nuxi@latest init nuxt-with-formbox
After the prompts, the nuxi command will create a folder with your project name and install the required dependencies.
Go to the new directory for the new website:
cd nuxt-with-formbox
Start the development server:
npm run dev
Open your browser and navigate to http://localhost:3000
. You should see a new Nuxt application running.
Adding your Formbox form to your Nuxt project
Now that we have a new Nuxt project set up, let’s add our Formbox form to it.
For styling purposes, we’ll use Tailwind CSS. You can learn how to add Tailwind CSS to your project by following the Nuxt installation guide.
Once you have Tailwind CSS set up, let’s add our form.
Open up the app.vue
file within the root of the root
directory and replace everything in the file with the following code block:
<template>
<div class="max-w-md mx-auto py-20 bg-white">
<h2 class="text-2xl font-semibold mb-6">Get in Touch</h2>
<form action="https://api.formbox.app/s/{your-form-id}" method="POST">
<div class="mb-4">
<label for="name" class="block text-gray-700 text-sm font-bold mb-2">
Name
</label>
<input
type="text"
id="name"
name="name"
placeholder="John Doe"
required
class="
w-full
px-3
py-2
border
rounded-md
focus:outline-none focus:border-blue-500
"
/>
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">
Email
</label>
<input
type="email"
id="email"
name="email"
placeholder="john@example.com"
required
class="
w-full
px-3
py-2
border
rounded-md
focus:outline-none focus:border-blue-500
"
/>
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 text-sm font-bold mb-2">
Message
</label>
<textarea
id="message"
name="message"
rows="4"
placeholder="How can we help you?"
class="
w-full
px-3
py-2
border
rounded-md
focus:outline-none focus:border-blue-500
"
></textarea>
</div>
<button
type="submit"
class="
bg-blue-500
text-white
px-4
py-2
rounded-md
hover:bg-blue-600
focus:outline-none focus:shadow-outline-blue
"
>
Send Message
</button>
</form>
</div>
</template>
Paste the form endpoint url you copied from Formbox into your form’s action
attribute as shown in the code block above.
Save the file and navigate to http://localhost:3000
in your browser. You should see a form that you can fill out and submit.
And that’s it! Now after filling out and submitting the form you should see the default submission success page displayed.