Build a contact page with two sections: company information (address, phone, email, social links) and a contact form (name, email, subject dropdown, message). Clickable phone number uses Launch URL with tel: protocol, email uses mailto:. Store form submissions in a Firestore contact_messages collection and trigger a Cloud Function that sends a notification email via SendGrid. Include a small embedded Google Map showing your office location.
Building a Contact Us Page in FlutterFlow
A contact page builds trust and provides support access. This tutorial creates a complete contact experience with both passive information display and active form submission with backend notification.
Prerequisites
- A FlutterFlow project with Firestore configured
- A Google Maps API key for the embedded map
- SendGrid or similar email service account for notifications (optional)
Step-by-step guide
Build the company information section with clickable contacts
Build the company information section with clickable contacts
At the top of your ContactPage, add a Container with Column. Add Rows for each contact detail: Row with phone Icon + Text showing your phone number, Row with email Icon + Text showing your email, Row with location_on Icon + Text showing your address. Wrap the phone Row in a GestureDetector with On Tap → Launch URL 'tel:+1234567890'. Wrap the email Row with On Tap → Launch URL 'mailto:support@company.com'. Add a Row of social media IconButtons (Twitter, Instagram, LinkedIn) each launching their profile URLs.
Expected result: Phone and email are tappable, opening the dialer and email app respectively. Social icons link to profiles.
Add a small embedded Google Map showing office location
Add a small embedded Google Map showing office location
Below the contact info, add a Container (height: 200, borderRadius: 12). Inside, place a FlutterFlowGoogleMap widget. Set Initial Location to your office coordinates, Initial Zoom to 15 (close-up), and add a single marker at your location with your company name. Disable map interaction (scrolling, zooming) if you want it as a static display — set zoomGesturesEnabled and scrollGesturesEnabled to false.
Expected result: A small non-interactive map shows your office location with a marker.
Create the contact form with subject dropdown and validated fields
Create the contact form with subject dropdown and validated fields
Below the map, add the form section. TextFields for Name (required) and Email (required, keyboardType: email, validate with regex). A DropDown for Subject with options: General Inquiry, Technical Support, Sales, Partnership. A TextField for Message (maxLines: 5, required, minLength: 10). Add a Submit button below. Validate all fields: name not empty, email valid format, message at least 10 characters. Show inline error text per field on validation failure.
Expected result: A validated form with name, email, subject dropdown, and message fields.
Submit the form to Firestore and trigger email notification
Submit the form to Firestore and trigger email notification
On Submit button tap: validate all fields → Create Document in contact_messages (name, email, subject, message, timestamp, status: 'new') → Show Snackbar 'Message sent successfully!' → Clear all form fields. Create a Firestore-triggered Cloud Function that fires on new contact_messages documents. The function formats the message and sends an email via SendGrid API to your support team email with the form data and a reply-to header set to the user's email.
Expected result: Form submits to Firestore and triggers an automatic email notification to the support team.
Add a success state with confirmation message
Add a success state with confirmation message
After successful submission, either show a Snackbar or toggle a Page State to show a success view replacing the form: Icon (check_circle, green, 60px), Text 'Message Sent!', Text 'We will get back to you within 24 hours.', Button 'Send Another Message' (resets the form). This confirms the submission and sets expectations for response time.
Expected result: Users see a clear confirmation after submitting with an expected response timeframe.
Complete working example
1PAGE: ContactPage23WIDGET TREE:4 SingleChildScrollView5 Column (padding: 16)6 ├── Text "Contact Us" (Headline Large)7 ├── SizedBox (24)8 ├── COMPANY INFO SECTION:9 │ ├── Row: Icon(phone) + Text "+1 234 567 890" → Launch URL tel:10 │ ├── Row: Icon(email) + Text "support@company.com" → Launch URL mailto:11 │ ├── Row: Icon(location) + Text "123 Main St, City"12 │ └── Row: Social icons (Twitter, Instagram, LinkedIn) → Launch URLs13 ├── SizedBox (16)14 ├── EMBEDDED MAP:15 │ Container (h: 200, borderRadius: 12)16 │ FlutterFlowGoogleMap (office coords, zoom: 15, marker)17 ├── SizedBox (24)18 ├── FORM SECTION:19 │ ├── TextField "Name" (required)20 │ ├── TextField "Email" (required, email validation)21 │ ├── DropDown "Subject" (General/Support/Sales/Partnership)22 │ ├── TextField "Message" (maxLines: 5, required)23 │ └── Button "Send Message" (Primary)24 │ On Tap:25 │ 1. Validate all fields26 │ 2. Create Doc: contact_messages/27 │ 3. Show Snackbar "Sent!"28 │ 4. Clear form29 └── SUCCESS STATE (Conditional: messageSent)30 Icon(check, green) + "Message Sent!" + "We'll respond in 24h"Common mistakes when creating a Custom Contact Us Screen for Your FlutterFlow App
Why it's a problem: Not validating email format before submission
How to avoid: Validate the email field with a regex pattern that checks for @ and domain. Show an inline error for invalid format.
Why it's a problem: Making the embedded map interactive at full screen
How to avoid: Disable scroll and zoom gestures on the small map, or set a fixed height with clear boundaries. Use the map only as a visual indicator.
Why it's a problem: Not adding a reply-to header on the notification email
How to avoid: Set the reply-to header to the user's email address in the Cloud Function email send. Clicking Reply in the email client automatically addresses the user.
Best practices
- Add clickable phone and email using Launch URL with tel: and mailto: protocols
- Include social media links as IconButtons for complete brand presence
- Validate email format before submission to ensure reachable responses
- Store form submissions in Firestore for record-keeping and analytics
- Trigger Cloud Function email notifications for immediate team awareness
- Set reply-to header to the user's email for easy support response
- Show a clear success confirmation with expected response timeframe
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
Build a contact us page in FlutterFlow with clickable phone/email, social links, a small Google Map, and a form that stores to Firestore and sends an email via Cloud Function with SendGrid.
Create a scrollable page with company info rows at top, a small map area, and a contact form below with name, email, subject dropdown, message, and submit button.
Frequently asked questions
Can I add a CAPTCHA to prevent spam?
FlutterFlow does not have built-in CAPTCHA. Add rate limiting in the Cloud Function (check IP or user for recent submissions) or use reCAPTCHA via a WebView Custom Widget.
What email service should I use for notifications?
SendGrid is popular with a free tier of 100 emails/day. Alternatives: Mailgun, AWS SES, or Resend. All work as API calls from Cloud Functions.
Can I create a ticketing system from contact messages?
Yes. Add status (new/in-progress/resolved) and assignedTo fields on the contact_messages documents. Build an admin page for your team to manage tickets.
Should the contact form require login?
No. Contact forms should be accessible to anyone, including potential customers who have not created an account yet. Use anonymous submissions.
Can I add a live chat widget instead?
Yes. Integrate Intercom, Crisp, or Zendesk via a WebView Custom Widget. See the support widget tutorial for implementation.
Can RapidDev help build customer support features?
Yes. RapidDev can build contact forms, ticketing systems, live chat integration, knowledge bases, and automated response workflows.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation