Flutter contact form

Collect feedback and support requests from your Flutter app with one HTTP call. The widget posts JSON to Formclick using the http package.

Get your free access key Jump to the code

Set it up in 3 steps

1
Get your access key
Create a free Formclick account and copy the access key for your form from the dashboard. Submissions sent with that key are delivered to your inbox.
2
Add the widget
Run flutter pub add http, copy ContactForm into your lib folder and replace YOUR_ACCESS_KEY_HERE.
3
Run and test
Place ContactForm on a screen, send a test message and check your inbox.

The code

Replace YOUR_ACCESS_KEY_HERE with the key from your dashboard. Before you start: Add the http package: flutter pub add http.

contact_form.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class ContactForm extends StatefulWidget {
  const ContactForm({super.key});
  @override
  State<ContactForm> createState() => _ContactFormState();
}

class _ContactFormState extends State<ContactForm> {
  final _name    = TextEditingController();
  final _email   = TextEditingController();
  final _message = TextEditingController();
  String _result = '';

  Future<void> _submit() async {
    setState(() => _result = 'Sending...');
    final res = await http.post(
      Uri.parse('https://api.formclick.io/submit'),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({
        'access_key': 'YOUR_ACCESS_KEY_HERE',
        'name':    _name.text,
        'email':   _email.text,
        'message': _message.text,
      }),
    );
    final data = jsonDecode(res.body) as Map;
    setState(() => _result = data['message']);
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      TextField(controller: _name,
        decoration: const InputDecoration(labelText: 'Name')),
      TextField(controller: _email,
        decoration: const InputDecoration(labelText: 'Email')),
      TextField(controller: _message, maxLines: 4,
        decoration: const InputDecoration(labelText: 'Message')),
      const SizedBox(height: 12),
      ElevatedButton(
        onPressed: _submit, child: const Text('Submit')),
      if (_result.isNotEmpty) Text(_result),
    ]);
  }
}

Tips

Dispose the TextEditingControllers in dispose() when you use this in a real screen.
Wrap the fields in a Form with validators to check the email before sending.
On Android, make sure the INTERNET permission is in your release AndroidManifest.xml.

Flutter contact form FAQ

Can I use Dio instead of the http package?

Yes. Any HTTP client works. Send a JSON POST with the same body.

Is it safe to ship my access key in client code?

Yes. The access key only allows submissions to be sent to your account. It cannot read your data, open your dashboard or change your settings, and you can restrict it to specific domains.

Do I need my own server or backend?

No. Formclick receives the submission, filters spam, stores it in your dashboard and emails it to you. Your app only makes one POST request.

How much does it cost?

Core features are free forever. Paid plans add higher submission limits and extras like file uploads. See the pricing page for details.

Other stacks

HTML JavaScript React React Native Ionic Expo More examples →

Your Flutter form, live in minutes

Free forever on core features. No credit card required.

Create your form