Building a Contact Form with Gmail

In this guide, we'll build a contact form that sends submissions directly to your email via Gmail. With Bolt and Pica, you can create a production-ready contact form in minutes—no backend servers or complex email configuration required.

What You'll Build

By the end of this tutorial, you'll have:

• A beautiful contact form with name, email, and message fields
• Gmail integration to receive form submissions
• Customizable email templates for your brand
• Production-ready error handling

Let's get started! 🚀

Step 1: Build the Contact Form UI

First, let's create a clean, professional contact form using Shadcn components.

Prompt Bolt:

"Build me the UI for a contact form that has fields for a name, email and message. Use Shadcn components."

Bolt will generate a beautiful, responsive contact form with proper validation and styling.

Step 2: Create a Gmail Connection in Pica

You need to connect your Gmail account to Pica so your form submissions can be sent to your email.

How to Connect Gmail:

1. Go to the Pica dashboard at: app.picaos.com/connections
2. Click on + Add Connection
3. Select Gmail from the list of integrations
4. Authenticate with your Google account
5. Save your connection key - you'll need this later!

Step 3: Generate Your Code with BuildKit

Now we'll use Pica BuildKit to generate the perfect prompt for handling form submissions and sending emails.

Using BuildKit:

1. Go to the BuildKit page at: app.picaos.com/buildkit
2. Type: "Send an email via Gmail"
3. BuildKit will generate an optimized prompt for you

Or copy the prompt here:

Important: Replace [YOUR_RECIPIENT_EMAIL] in the prompt with the email address where you want to receive form submissions (e.g., contact@yourcompany.com).

What BuildKit Does:

BuildKit automatically generates a prompt that includes:

• ✅ Proper API authentication setup
• ✅ Base64url encoding for email content
• ✅ Error handling best practices
• ✅ Environment variable configuration
• ✅ Integration with your Pica Gmail connection

Simply copy the generated prompt and paste it into Bolt.new to create your backend logic!

Step 4: Add Your Secrets to Bolt

Once Bolt generates your application, you'll need to add your API keys as environment variables.

Required Environment Variables:

1. PICA_SECRET_KEY

• Get it from: app.picaos.com/settings/api-keys
• This authenticates your application with Pica

2. PICA_GMAIL_CONNECTION_KEY

• Get it from: app.picaos.com/connections
• This is the connection key you saved in Step 2

How to Add Secrets in Bolt:

1. Click on the Settings icon in Bolt
2. Navigate to Secrets
3. Add both keys with their respective values
4. Save and restart your application

Now your contact form is connected to Gmail and will send submissions to your recipient email from the address of the connected integration in Pica! 🎉

Step 5: Customize Your Email Design

Now that your backend is set up, you can customize the email template to match your brand! Bolt makes it easy to modify the email design with simple instructions.

Example Customization:

Try telling Bolt:

"Please update the email design. Add a header section with a gradient background from #c31432 to #240b36, and include a white heading inside that header that reads 'Contact Form Submission'."

Bolt will automatically update the HTML email template with your brand colors!

Troubleshooting

Form not sending emails?

1. Check your environment variables - Make sure both keys are set correctly in your Bolt secret settings
2. Verify your Gmail connection - Go to app.picaos.com/connections and ensure it's active
3. Check the recipient email - Make sure you replaced [YOUR_RECIPIENT_EMAIL] in the code
4. Check Pica logs - View execution logs in your Pica dashboard

Conclusion

Congratulations! 🎉 You've just built a production-ready contact form in minutes. No email server configuration, no complex API setup—just clean, working code.

Ready to add more integrations? Explore other Bolt use cases to supercharge your application with Pica.

Get Help

Questions or need support?

• 📅 Schedule a call with our team
• 📚 Check out the Pica documentation
• 🎥 Watch our video tutorials

Happy building! 🚀