Nuxas4.6.2
Get Nuxas
Content Editing

Setting Up the Contact Page with Formspree

A complete, beginner-friendly guide to setting up the contact form in Nuxas. Learn how to create a Formspree account, get your form ID, and connect it to your site through Decap CMS or by editing files directly.

Setting Up the Contact Page with Formspree

In the previous chapter, we configured the blog and product listing pages. Now we will set up the Contact Page — the page where visitors can send you messages directly.

Nuxas uses Formspree to handle contact form submissions. Formspree is a free service that receives form data and forwards it to your email inbox. It requires no backend, no database, and no server maintenance. You create a form on Formspree, get a unique ID, and paste that ID into Nuxas. That is all.

This chapter walks you through the entire process, from creating a Formspree account to testing the form on your local site.

Why Formspree?

There are many ways to handle contact forms. Some developers build a custom backend with Node.js or PHP. Others use a service like Netlify Forms, Google Forms, or Formspree.

Formspree is the best choice for Nuxas for three reasons:

  1. No backend required. Formspree handles everything on their servers. You only need to add an ID to your config.
  2. Free tier is generous. The free plan allows up to 50 submissions per month, which is enough for most small to medium sites.
  3. Spam protection built in. Formspree includes honeypot fields and optional reCAPTCHA to block bots.

If you ever outgrow the free tier, Formspree offers paid plans with higher limits and additional features. But for most Nuxas users, the free tier is more than enough.

Part 1 — Creating a Formspree Account

Before you can get a form ID, you need an account.

  1. Open your browser and go to https://formspree.io/register.
  2. Fill in your name, email address, and a password.
  3. Click Sign Up.
  4. Check your email inbox. Formspree will send you a verification email. Click the link in that email to verify your account.
  5. Once verified, log in to the Formspree dashboard.

You will land on the dashboard, which shows a list of your forms (initially empty). If you see a "New Form" button or a plus sign, you are in the right place.

Part 2 — Creating Your First Form

Now let us create the form that will receive contact messages from Nuxas.

  1. In the Formspree dashboard, click the plus sign in the top left corner, then click New Form .
  2. Formspree will ask for a form name. Type something like Nuxas Contact Form. This name is for your own reference; it does not appear on the site.
  3. Formspree will also ask for the email address where submissions should be sent. Use the email address where you want to receive contact messages. This can be the same as your account email, or a different one.
  4. Click Create Form.

Formspree will create the form and take you to its settings page. You will see a section labeled "Your form's endpoint is:" followed by a URL that looks like this:

https://formspree.io/f/xjvdzdbo

The last part of that URL — xjvdzdbo in this example — is your form ID (also called a "hash ID" by Formspree) .

Copy that ID. You will need it in the next step.

Part 3 — Adding the Formspree ID to Nuxas

Now that you have your Formspree ID, you need to add it to Nuxas. The way you do this depends on your edition.

If You Purchased the Code + Decap CMS Edition

  1. Open your browser and go to http://localhost:3000/admin.
  2. In the left sidebar, click Site Settings, then Global Site Config.
  3. Scroll down to the Contact section. You will see a field labeled Contact Formspree ID.
  4. Paste your Formspree ID into that field. For example, if your endpoint is https://formspree.io/f/xjvdzdbo, paste xjvdzdbo.
  5. Click Save in the top right corner.

The change is written to content/data/site.yml immediately.

If You Purchased the Code Only Edition

  1. Open content/data/site.yml in VS Code.
  2. Find the contact section near the bottom of the file:
contact:
  formspreeId: YOUR_FORMSPREE_ID
  1. Replace YOUR_FORMSPREE_ID with your actual Formspree ID. For example:
contact:
  formspreeId: xjvdzdbo
  1. Save the file with Ctrl + S.

The Nuxt development server will reload the page automatically.

Part 4 — Testing the Contact Form

Now that your Formspree ID is configured, let us test the form.

  1. Open your browser and go to http://localhost:3000/contact.
  2. Scroll down to the contact form. You should see fields for Full Name, Work Email Address, Inquiry Subject, and Your Message.
  3. Fill in the form with test data. For example:
    • Full Name: Test User
    • Work Email Address: test@example.com
    • Inquiry Subject: Testing the contact form
    • Your Message: This is a test message to verify that Formspree is working correctly.
  4. Click Send Message.

If everything is configured correctly, you will see a success message: "Thank you! Your message has been sent. We will reply within 24 hours."

Now check the email inbox you configured in Formspree. You should receive an email with the test submission data. If you do not see it, check your spam folder.

Understanding How the Form Works

The contact form in Nuxas is a client-side form. When you click Send Message, the following happens:

  1. The form data is validated in the browser. If any field is empty or invalid, an error message appears and the form is not submitted.
  2. If validation passes, the form data is sent to Formspree's servers using a fetch request.
  3. Formspree receives the data, stores it, and forwards it to your email address.
  4. Formspree returns a success response, and Nuxas shows the success message.

No data passes through your own server. This means you do not need to worry about server-side validation, database storage, or email delivery. Formspree handles all of that.

Customizing the Form Fields

The contact form fields are defined in content/contact.md, not in the component. This means you can customize the form labels, placeholders, and error messages without touching any Vue code.

If you are using Decap CMS, open the Contact Page collection and edit the fields directly. If you are using the Code Only edition, edit content/contact.md in VS Code.

The form.fields section looks like this:

form:
  fields:
    - name: name
      label: Full Name
      placeholder: e.g. Linus Torvalds
      type: text
      required: true
      errorMessage: Please enter your full name (minimum 2 characters).

Each field has:

  • name — the internal name of the field. This is what Formspree receives.
  • label — the text shown above the input.
  • placeholder — the hint text inside the input.
  • type — text, email, or textarea.
  • required — whether the field is mandatory.
  • errorMessage — the message shown if validation fails.

To add a new field, add a new item to the list. To remove a field, delete its item. Keep in mind that Formspree will receive whatever fields you define, so make sure the name values are meaningful.

Customizing the Success and Error Messages

The success message, validation error message, and network error message are also defined in content/contact.md:

form:
  alerts:
    success: Thank you! Your message has been sent. We will reply within 24 hours.
    validationError: Please resolve the highlighted errors before submitting.
    networkError: Network error. Please check your connection or contact us directly via email.

You can change these messages to match your brand voice. For example, if you want a more casual tone:

form:
  alerts:
    success: Got it! We will get back to you within a day.
    validationError: Almost there — please fix the highlighted fields.
    networkError: Something went wrong. Please try again or email us directly.

A Note on Spam Protection

Formspree includes built-in spam protection. The Nuxas contact form already includes a honeypot field (_gotcha) that is hidden from real users but visible to bots. If a bot fills it in, Formspree will reject the submission.

If you want additional protection, you can enable reCAPTCHA in your Formspree dashboard. This requires a Google reCAPTCHA site key, which you can get for free from Google. The process is beyond the scope of this chapter, but Formspree's documentation explains it clearly.

Troubleshooting

Issue: "Contact form is not configured"

This message appears if the formspreeId field is empty or still set to YOUR_FORMSPREE_ID. Check content/data/site.yml or the CMS Global Site Config, and make sure your actual Formspree ID is saved.

Issue: The form submits but no email arrives

Check the following:

  1. The email address in your Formspree form settings is correct.
  2. The submission appears in your Formspree dashboard. If it does, Formspree received the data but failed to forward it. Check your spam folder.
  3. Your Formspree account is verified. Unverified accounts cannot receive submissions.

Issue: The form shows an error on submission

Check the browser's developer console for error details. Common causes include:

  • A typo in the Formspree ID.
  • A network issue.
  • Formspree's free tier limit exceeded (50 submissions per month).

What to Expect in the Next Chapter

In the next chapter, we will customize the 404 Error Page — the page visitors see when they land on a URL that does not exist. This is a small but important detail that improves the user experience and keeps visitors on your site.

See you in the next chapter.