Building a Contact Form in Nuxt + Strapi: Backend

Now that we built the ContactForm Component in Vue + Nuxt, we need to make sure that there is an API endpoint to submit the form data to.

That is where we can dive into the Strapi Admin panel.

For me, I decided to call the content type "Message" for storing messages sent from the contact form.

In the Strapi Admin panel, I went to the Content-Types Builder plugin and added a new Content-Type called message.

Then, I added the fields for the message:

• name (Text field type)
• email (Email field type)
• phone (Text field type)
• message (Long text field type)

For now, that is all the information needed to collect from my form, but I could always add more details later.

Here is a screenshot of the Message Content Type in the Content Type Builder Plugin panel

Now, the only step left to do is make sure that anyone can submit a message to that endpoint.

To do that, we need to go to the Roles & Permissions panel in Strapi, and make sure that an unauthenticated user can "create" a message.

To do that, click the pencil icon on the "Public" Role, find the message content type, and make sure that the create option is selected.

Above you can see a screenshot of what the public permissions should look like for message.

You will want to make sure that none of the other options are selected because you do not want to expose the messages submitted to your app to the public.

That is it! Once you save your settings, your contact forms in the frontend will be able to submit to your API via a POST request to /messages.

Please note, that permissions will have to be set again in the production environment.