#Setting up Email Contact Form

To enable the Contact Form functionality on product pages, you need to configure the SMTP settings in your environment variables.

Route:

  • /{locale}/{product}/contact

#1. Environment Variables

Create or update your .env.local file in the root directory and add the following variables:

# Email Configuration (Nodemailer)
SMTP_HOST=smtp.gmail.com
SMTP_PORT=465
SMTP_USER=your-email@gmail.com
SMTP_PASS=your-app-password
CONTACT_EMAIL=developer@example.com

#Variable Details

  • SMTP_HOST: The hostname of your SMTP provider (e.g., smtp.gmail.com for Gmail).
  • SMTP_PORT: The port to connect to. Common ports are 465 (SSL) or 587 (TLS).
  • SMTP_USER: Your email address used for authentication.
  • SMTP_PASS: The password for authentication. Note: For Gmail, you MUST use an App Password, not your login password.
  • CONTACT_EMAIL: The email address where you want to receive inquiries. If omitted, emails will be sent to SMTP_USER.

#2. Using Gmail (Recommended for Free Setup)

If you are using Gmail, you cannot use your regular password. You must generate an App Password:

  1. Go to your Google Account.
  2. Navigate to Security.
  3. Under "Signing in to Google", make sure 2-Step Verification is turned ON.
  4. Search for App passwords (or go to App Passwords).
  5. Create a new app name (e.g., "Pabal Web Contact Form").
  6. Copy the generated 16-character password and paste it into SMTP_PASS (spaces are ignored, but it's safer to remove them).

#3. Important Notes

  • Security: Never commit .env.local to Git. It contains sensitive credentials.
  • Availability: The contact page is only accessible for products with store identifiers (appStoreAppId, packageName, or bundleId).
  • Fallback behavior: If SMTP is not configured, users will see a direct mailto: button instead of the form.
Product PagesGoogle Search Console Indexing