Contact Us Form Backend

[ney927]

Status: progress has been halted until email domain permissions are set up

Task Steps

File Setup

1. create ContactForm component in src/components
2. create the contact page in src/pages
   • in the contact page use the PageLayout component
   • inside that PageLayout add a element and inside that element add ContactForm
   • use this page to test the ContactForm component
3. don't worry about adding any stylings- this is just setting up the backend functionality of the form

HTML Form and Typescript Form Handling

follow this. I have linked the specific steps from that article in that steps below:

4. Add email utilities
   • Conigure Hybrid Rendering
   • this allows the page to use Server Side Rendering (SSR)

• important: we have already installed an adapter (netlify)- so you can skip that step

5. in ContactForm component create a form with HTML
   • Fields: First Name, Last name, Email, Subject, Content.
   • example
   • check out the Helpful Resources section below
6. add email sending action to the form
7. implement nodemailer
   • see below section: where to send contact form
8. add environment variables -> for this the .env file already exists- just add to it
   - resend account info: (@ me if I haven't updated this by then)
9. add success page -> don't do this!!! stay on the same page just add a message on the page that confirms the email has been sent (or add a javascript popup, just something simple we will change it when we get the official page design)

• done! do not complete any of the article steps after this

where to send the contact form

• in Contenful there is a contentModel called 'content' with an entry called 'email'
• get the email from contentful (this video shows an example of how to make a query in Astro to get contentful content)
• currently the value of email is tg.cu.blueprint@gmail.com so that you can test the form
• reminder: the password for the email is CUBPisaw3some$ , login to the email to test the form

Helpful Resources

• Form Handling in Typescript
• Building Forms with Astro