add people n heor
This commit is contained in:
134
docs/gmail-setup-guide.md
Normal file
134
docs/gmail-setup-guide.md
Normal file
@@ -0,0 +1,134 @@
|
||||
# Gmail Contact Form Setup Guide
|
||||
|
||||
This guide will help you configure your contact form to send emails to your company Gmail inbox.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- A Gmail account for your company
|
||||
- Access to Google Account settings
|
||||
- Basic understanding of environment variables
|
||||
|
||||
## Step 1: Enable 2-Factor Authentication
|
||||
|
||||
1. Go to [Google Account Settings](https://myaccount.google.com/)
|
||||
2. Navigate to **Security** → **2-Step Verification**
|
||||
3. Follow the prompts to enable 2FA if not already enabled
|
||||
4. **Note**: App passwords require 2FA to be enabled
|
||||
|
||||
## Step 2: Generate Gmail App Password
|
||||
|
||||
1. Go to [Google Account Settings](https://myaccount.google.com/)
|
||||
2. Navigate to **Security** → **2-Step Verification** → **App passwords**
|
||||
3. Select **Mail** as the app and **Other** as the device
|
||||
4. Enter "OurWorld Contact Form" as the device name
|
||||
5. Click **Generate**
|
||||
6. **Important**: Copy the 16-character app password immediately (you won't see it again)
|
||||
|
||||
## Step 3: Configure Environment Variables
|
||||
|
||||
1. Open the `.env.local` file in your project root
|
||||
2. Replace the placeholder values with your actual credentials:
|
||||
|
||||
```env
|
||||
# Your Gmail address (the one that will send emails)
|
||||
GMAIL_USER=your-company-email@gmail.com
|
||||
|
||||
# The 16-character app password you generated (no spaces)
|
||||
GMAIL_APP_PASSWORD=abcdabcdabcdabcd
|
||||
|
||||
# Email address where contact form submissions will be sent
|
||||
COMPANY_EMAIL=info@ourworld.tf
|
||||
```
|
||||
|
||||
## Step 4: Security Considerations
|
||||
|
||||
### Environment Variables
|
||||
- **Never commit `.env.local` to version control**
|
||||
- The `.env.local` file is already in `.gitignore`
|
||||
- Use different environment variables for production deployment
|
||||
|
||||
### Production Deployment
|
||||
For production (Vercel, Netlify, etc.), add these environment variables in your hosting platform's dashboard:
|
||||
- `GMAIL_USER`
|
||||
- `GMAIL_APP_PASSWORD`
|
||||
- `COMPANY_EMAIL`
|
||||
|
||||
## Step 5: Testing the Setup
|
||||
|
||||
1. Start your development server:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
2. Navigate to `/contact` page
|
||||
3. Fill out and submit the contact form
|
||||
4. Check your Gmail inbox for the contact form submission
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
**"Authentication failed" error:**
|
||||
- Verify 2FA is enabled on your Google account
|
||||
- Double-check the app password (no spaces, 16 characters)
|
||||
- Ensure you're using the app password, not your regular Gmail password
|
||||
|
||||
**"Invalid credentials" error:**
|
||||
- Verify the `GMAIL_USER` email address is correct
|
||||
- Check that the app password is correctly copied
|
||||
|
||||
**Emails not being received:**
|
||||
- Check your spam/junk folder
|
||||
- Verify the `COMPANY_EMAIL` address is correct
|
||||
- Test with a different recipient email
|
||||
|
||||
**"Module not found" error:**
|
||||
- Ensure nodemailer is installed: `npm install nodemailer @types/nodemailer`
|
||||
|
||||
### Email Format
|
||||
|
||||
The contact form sends emails with:
|
||||
- **Subject**: "New Contact Form Submission from [First Name] [Last Name]"
|
||||
- **From**: Your Gmail address (GMAIL_USER)
|
||||
- **To**: Company email address (COMPANY_EMAIL)
|
||||
- **Content**: Formatted HTML and plain text versions
|
||||
|
||||
## Security Best Practices
|
||||
|
||||
1. **Use App Passwords**: Never use your main Gmail password
|
||||
2. **Limit Access**: Only share credentials with necessary team members
|
||||
3. **Regular Rotation**: Consider rotating app passwords periodically
|
||||
4. **Monitor Usage**: Check Gmail's security activity regularly
|
||||
5. **Environment Separation**: Use different credentials for development/production
|
||||
|
||||
## Alternative Solutions
|
||||
|
||||
If you prefer not to use Gmail directly, consider these alternatives:
|
||||
|
||||
1. **EmailJS**: Client-side email service
|
||||
2. **Formspree**: Form handling service
|
||||
3. **SendGrid**: Professional email API
|
||||
4. **Mailgun**: Email delivery service
|
||||
5. **Resend**: Modern email API
|
||||
|
||||
## Support
|
||||
|
||||
If you encounter issues:
|
||||
1. Check the browser console for error messages
|
||||
2. Review the server logs for API errors
|
||||
3. Verify all environment variables are set correctly
|
||||
4. Test with a simple email first
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
project/
|
||||
├── .env.local # Environment variables (not in git)
|
||||
├── src/app/api/contact/ # API route for form submission
|
||||
├── src/components/ContactHero.tsx # Contact form component
|
||||
└── docs/gmail-setup-guide.md # This guide
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Important**: Keep your app password secure and never share it publicly. If compromised, revoke it immediately in your Google Account settings and generate a new one.
|
||||
Reference in New Issue
Block a user