Skip to main content

​
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

GitHub Repository

View the full source code

Pica MCP Server

Learn more about the MCP Server

Gmail Integration

Connect your Gmail account

Get Started

New to Pica? Start here