Skip to main content

Build your own contact form with Gmail integration

Overview

Building contact forms typically requires paid services like Formspree or complex backend setups. With Pica’s MCP Server and Gmail integration, you can build a fully functional contact form that delivers messages straight to your Gmail inbox—completely free. This is perfect for:
  • 📄 Landing pages that need simple contact forms
  • 🚀 SaaS products requiring customer contact forms
  • 💼 Portfolio sites with inquiry forms
  • 🏢 Small business websites without expensive form tools

Prerequisites

Before you start, make sure you have:
  1. A Pica account (free)
  2. Pica MCP Server installed and configured
  3. Gmail connected in your Pica dashboard
  4. Node.js and npm installed

Getting Started

Step 1: Clone the Repository

git clone https://github.com/picahq/awesome-pica.git
cd awesome-pica/gmail-contact-form-submission

Step 2: Install Dependencies

npm install

Step 3: Configure Environment Variables

Create a .env.local file with your configuration:
PICA_SECRET_KEY=your_pica_secret_key
PICA_GMAIL_CONNECTION_KEY=your_gmail_connection_key
YOUR_EMAIL=your-email@gmail.com
VariableDescriptionRequired
PICA_SECRET_KEYYour Pica API secret keyYes
PICA_GMAIL_CONNECTION_KEYYour Gmail connection key from PicaYes
YOUR_EMAILThe Gmail address to receive form submissionsYes

Step 4: Run the Development Server

npm run dev
Open http://localhost:3000 in your browser to see your contact form! 🚀

Resources

I