Skip to content

Contact Form

ContactForm is a simple contact form component which automatically detects and uses your environment variables for either SendGrid or EmailJS and will use those to send emails from your site!

index.mdx
import { ContactForm } from '@futurethemes/galaxy:components'
<ContactForm />

Theme Config

You must specify whether you’re using SendGrid or EmailJS in your GalaxyTheme config:

For more details, see the configuration option for emailProvider.

SendGrid

astro.config.mjs
GalaxyTheme({
emailProvider: 'SendGrid',
})

EmailJS

astro.config.mjs
GalaxyTheme({
emailProvider: 'EmailJS',
})

Environment Variables

These are the environment variables you’ll need to set for your contact form to work correctly.

They need to be prepended with PUBLIC_ because that’s what allows Astro to pick those variables up on the client side. Vite blocks all environment variables on the client side that don’t start with PUBLIC_.

SendGrid

.env
PUBLIC_SENDGRID_TO_ADDRESS=1234
PUBLIC_SENDGRID_FROM_ADDRESS=test@text.com
PUBLIC_SENDGRID_SUBJECT="Hello there"

EmailJS

.env
PUBLIC_EMAILJS_SERVICE_ID=1234
PUBLIC_EMAILJS_TEMPLATE_ID=1234

Props

ContactForm currently has no props.