How to build a quote request form in Flutter

This tutorial builds a quote request screen in Flutter: the customer picks a service, a budget and a deadline, describes the project and taps Send. You get a neatly formatted email, the customer gets an automatic confirmation.

You need: a free Frontmail account, a Flutter 3.24+ project and about twenty minutes.

1. Connect your mailbox and create the templates

1. Email services → Add service: connect your mailbox or provider, tick Make default, Verify & save.
2. Templates → From gallery → Quote request (category Business) → Use template.
3. Add the confirmation: From gallery → Auto-reply: thanks for your message → Use template, set defaults for company_name and response_time on its Parameters tab, then select it in the quote template under Settings → Delivery → Auto-reply template.

The quote template expects name, email, service and details (required) and phone, company, budget, deadline (optional). service and budget accept only the values listed on the Parameters tab – adjust the lists to what you sell and use the same strings in the app.

2. Allow mobile apps and turn on the CAPTCHA

• Security → Mobile apps → Allow mobile apps → Save. Without it, requests without a website Origin are refused with origin_not_allowed.
• Quote template → Settings → Protection → Require CAPTCHA (Turnstile). Apps use Frontmail’s shared widget – no Cloudflare account needed.

3. Install

flutter pub add frontmail webview_flutter url_launcher

Copy TurnstileView from the Turnstile section of the Flutter SDK documentation into lib/turnstile_view.dart.

4. Build the form

import 'package:flutter/material.dart';
import 'package:frontmail/frontmail.dart';

import 'turnstile_view.dart';

final frontmail = Frontmail(publicKey: 'pk_…');

const services = ['Website', 'E-shop', 'Mobile app', 'Consulting', 'Other'];
const budgets = ['Under \$5k', '\$5k–20k', '\$20k–50k', 'Over \$50k'];

class QuoteScreen extends StatefulWidget {
  const QuoteScreen({super.key});

  @override
  State<QuoteScreen> createState() => _QuoteScreenState();
}

class _QuoteScreenState extends State<QuoteScreen> {
  final _name = TextEditingController();
  final _email = TextEditingController();
  final _details = TextEditingController();
  String _service = services.first;
  String? _budget;
  DateTime? _deadline;
  TurnstileSite? _site;
  String? _token;
  int _resetId = 0;
  String _info = '';

  @override
  void initState() {
    super.initState();
    Turnstile.site(client: frontmail).then((site) => setState(() => _site = site));
  }

  Future<void> _pickDeadline() async {
    final now = DateTime.now();
    final picked = await showDatePicker(context: context, firstDate: now, lastDate: DateTime(now.year + 2));
    if (picked != null) setState(() => _deadline = picked);
  }

  Future<void> _send() async {
    final site = _site, token = _token;
    if (site == null || token == null) return;
    setState(() {
      _token = null; // a token works only once
      _resetId++;
    });
    try {
      final deadline = _deadline;
      await frontmail.send(
        templateId: 'tpl_…',
        params: {
          'name': _name.text,
          'email': _email.text,
          'service': _service,
          'budget': _budget,
          'deadline': deadline == null ? null : deadline.toIso8601String().substring(0, 10),
          'details': _details.text,
        },
        options: SendOptions(turnstileToken: token, turnstileKey: site.turnstileKey),
      );
      setState(() => _info = 'Thanks! We’ve emailed you a confirmation.');
    } on FrontmailException catch (e) {
      setState(() => _info = e.message);
    }
  }

  @override
  Widget build(BuildContext context) {
    final site = _site;
    return Scaffold(
      appBar: AppBar(title: const Text('Request a quote')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          TextField(controller: _name, decoration: const InputDecoration(labelText: 'Name')),
          TextField(controller: _email, decoration: const InputDecoration(labelText: 'Email'), keyboardType: TextInputType.emailAddress),
          DropdownButtonFormField<String>(
            value: _service,
            decoration: const InputDecoration(labelText: 'What do you need?'),
            items: [for (final s in services) DropdownMenuItem(value: s, child: Text(s))],
            onChanged: (v) => setState(() => _service = v ?? services.first),
          ),
          DropdownButtonFormField<String>(
            value: _budget,
            decoration: const InputDecoration(labelText: 'Budget (optional)'),
            items: [for (final b in budgets) DropdownMenuItem(value: b, child: Text(b))],
            onChanged: (v) => setState(() => _budget = v),
          ),
          ListTile(
            contentPadding: EdgeInsets.zero,
            title: Text(_deadline == null ? 'Deadline (optional)' : 'Deadline: ${MaterialLocalizations.of(context).formatMediumDate(_deadline!)}'),
            trailing: const Icon(Icons.calendar_today),
            onTap: _pickDeadline,
          ),
          TextField(controller: _details, decoration: const InputDecoration(labelText: 'Project details'), maxLines: 5),
          const SizedBox(height: 16),
          if (site != null)
            TurnstileView(
              site: site,
              resetId: _resetId,
              onMessage: (m) => setState(() => _token = m is TurnstileToken ? m.token : null),
            ),
          FilledButton(onPressed: _token == null ? null : _send, child: const Text('Request a quote')),
          Text(_info),
        ],
      ),
    );
  }
}

null values (no budget, no deadline) are treated as empty, so those rows simply don’t appear in the email. The deadline is sent as YYYY-MM-DD; the email shows it as a formatted date.

5. Test it

Send a request with your own address as the customer email. You receive the request and, right after it, the confirmation. Both are listed in History.

Every email uses one credit – a request plus its confirmation costs two. Out of credits in a busy week? Requests wait in the hold queue and go out once you top up; the result’s status is held.

Next steps

• Turn on Contact collection in the template settings to keep a list of everyone who asked for a quote (email, name and company are mapped already).
• Send SendOptions(locale: Localizations.localeOf(context).toLanguageTag()) to use the template’s language variant for the user’s language.