How To Add A Contact Form To Astro

In this tutorial I will show you how you can easely add a contact for to your Astro website, you can use the tutorial to add a contact form to any static website like NextJS or Nuxt,etc, but in this tutorial we are going to use Astro.

With static websites is more difficult to integrate a contact form that is sending emails and most of the time you need something external. We are going to use OpnForms to create our form and add it to Astro contact page.

You don’t need any special skils to do this, get notified via email and not receive spam.

How To Add A Contact Form To Astro

1. Create a form in OpnForm

If you don’t have an account you just need to go to OpnForm and create a free account. After you should go and create a new form. OpnForm is allowing you to add a basic form easy and change the structure and make fiels as required, in the video you will have all the details. You can change the colours for your button and add a logo if you want, change the message and enable the notification via EMAIL or slack/discord.

In the Security and privacy activate the Captcha.

2. Get The enbed Code and Insert it to Astro

I am using a free Astro theme for this demonstration that as a contact page with a form that is not sending any email. I will go into form share and grab the enbed code and just add it there, it will be bunder src/pages/contact.astro :

<iframe
  style="border:none;width:100%;"
  height="410px"
  src="https://opnform.com/forms/contact-form-test-vmak0b"
></iframe>

You can alter the height to look nicer in function of the theme. In the video you have the details.

Conclusions

And that’s about it with this simple steps you have a contact form added to your Astro static website in 2 minutes and ready to receive notifications. Hope you enjoy the article, if you have something to say just go to the video and drop a comment.