# How to Create a Custom Contact Us Screen for Your FlutterFlow App

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: FlutterFlow Free+ (email notification requires Cloud Functions)
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `FlutterFlow Contact Us Setup`

```text
PAGE: ContactPage

WIDGET TREE:
  SingleChildScrollView
    Column (padding: 16)
      ├── Text "Contact Us" (Headline Large)
      ├── SizedBox (24)
      ├── COMPANY INFO SECTION:
      │     ├── Row: Icon(phone) + Text "+1 234 567 890" → Launch URL tel:
      │     ├── Row: Icon(email) + Text "support@company.com" → Launch URL mailto:
      │     ├── Row: Icon(location) + Text "123 Main St, City"
      │     └── Row: Social icons (Twitter, Instagram, LinkedIn) → Launch URLs
      ├── SizedBox (16)
      ├── EMBEDDED MAP:
      │     Container (h: 200, borderRadius: 12)
      │       FlutterFlowGoogleMap (office coords, zoom: 15, marker)
      ├── SizedBox (24)
      ├── FORM SECTION:
      │     ├── TextField "Name" (required)
      │     ├── TextField "Email" (required, email validation)
      │     ├── DropDown "Subject" (General/Support/Sales/Partnership)
      │     ├── TextField "Message" (maxLines: 5, required)
      │     └── Button "Send Message" (Primary)
      │           On Tap:
      │             1. Validate all fields
      │             2. Create Doc: contact_messages/
      │             3. Show Snackbar "Sent!"
      │             4. Clear form
      └── SUCCESS STATE (Conditional: messageSent)
            Icon(check, green) + "Message Sent!" + "We'll respond in 24h"
```

## Common mistakes

- **Not validating email format before submission** — Firestore accepts any string. Invalid emails mean the Cloud Function's reply-to fails and you cannot respond to the inquiry. Fix: Validate the email field with a regex pattern that checks for @ and domain. Show an inline error for invalid format.
- **Making the embedded map interactive at full screen** — Users accidentally scroll the map instead of the page content, getting stuck and frustrated. Fix: 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.
- **Not adding a reply-to header on the notification email** — The support team receives the email but has to manually copy the user's email to reply. This slows response time. Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-contact-us-screen-for-your-flutterflow-app
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-contact-us-screen-for-your-flutterflow-app