Flutter Integration

Flutter Contact Form with only Frontend Code

Start collecting form submissions from your Flutter app with FormAPI in 2 minutes. Create your form in FormAPI and paste your unique URL inside your form. Check out the code examples and detailed tutorial below to get started.

VS Code

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

class HttpForm extends StatefulWidget {
  @override
  _HttpFormState createState() => _HttpFormState();
}

class _HttpFormState extends State<HttpForm> {
  final _emailController = TextEditingController();
  final _messageController = TextEditingController();
  String? error;
  bool submitted = false;

  Future<void> _handleSubmit() async {
    setState(() { error = null; });
    try {
      final response = await http.post(
        Uri.parse('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]'),
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: jsonEncode({
          'email': _emailController.text,
          'message': _messageController.text,
        }),
      );

      final data = jsonDecode(response.body);
      if (data['code'] == 200) {
        setState(() => submitted = true);
      } else {
        setState(() => error = data['message'] ?? 'Something went wrong');
      }
    } catch (e) {
      setState(() => error = e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextField(
            controller: _emailController,
            decoration: InputDecoration(labelText: 'Email'),
          ),
          TextField(
            controller: _messageController,
            decoration: InputDecoration(labelText: 'Message'),
          ),
          ElevatedButton(onPressed: _handleSubmit, child: Text('Send')),
          if (submitted) Text('Form submitted successfully!'),
          if (error != null) Text(error!, style: TextStyle(color: Colors.red)),
        ],
      ),
    );
  }
}

How to Integrate Code

What is Flutter?

Flutter is an open-source UI software development toolkit by Google for building natively compiled applications for mobile, web, and desktop from a single codebase. FormAPI works seamlessly with Flutter, and this guide will show you how to use it.

FormAPI Setup with Flutter using HTTP Package

The `http` package is a simple and effective way to send HTTP requests in Flutter. Below is an example of how to send form data to FormAPI using the HTTP package. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your unique mockapi URL.

VS Code

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

class HttpFormExample extends StatefulWidget {
  @override
  _HttpFormExampleState createState() => _HttpFormExampleState();
}

class _HttpFormExampleState extends State<HttpFormExample> {
  final TextEditingController emailController = TextEditingController();
  final TextEditingController messageController = TextEditingController();
  String responseText = '';

  Future<void> submitForm() async {
    final response = await http.post(
      Uri.parse('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]'),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({
        'email': emailController.text,
        'message': messageController.text
      }),
    );

    setState(() {
      responseText = response.statusCode == 200 ? 'Form submitted successfully!' : 'Error submitting form';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(controller: emailController, decoration: InputDecoration(labelText: 'Email')),
        TextField(controller: messageController, decoration: InputDecoration(labelText: 'Message')),
        ElevatedButton(onPressed: submitForm, child: Text('Submit')),
        Text(responseText)
      ],
    );
  }
}

FormAPI Setup with Flutter using Dio Package

Dio is a powerful HTTP client for Dart that supports interceptors, global configuration, and more. Below is an example of how to use Dio to send form data to FormAPI. Make sure to replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your unique mockapi URL.

VS Code

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

class DioForm extends StatefulWidget {
  @override
  _DioFormState createState() => _DioFormState();
}

class _DioFormState extends State<DioForm> {
  final _emailController = TextEditingController();
  final _messageController = TextEditingController();
  String? error;
  bool submitted = false;

  Future<void> _handleSubmit() async {
    setState(() { error = null; });
    try {
      final dio = Dio();
      final response = await dio.post('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', data: {
        'email': _emailController.text,
        'message': _messageController.text,
      });

      if (response.data['code'] == 200) {
        setState(() => submitted = true);
      } else {
        setState(() => error = response.data['message'] ?? 'Something went wrong');
      }
    } catch (e) {
      setState(() => error = e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextField(
            controller: _emailController,
            decoration: InputDecoration(labelText: 'Email'),
          ),
          TextField(
            controller: _messageController,
            decoration: InputDecoration(labelText: 'Message'),
          ),
          ElevatedButton(onPressed: _handleSubmit, child: Text('Send')),
          if (submitted) Text('Form submitted successfully!'),
          if (error != null) Text(error!, style: TextStyle(color: Colors.red)),
        ],
      ),
    );
  }
}

FormAPI Setup for File Uploads in Flutter

To upload files in Flutter using FormAPI, you can use either the HTTP or Dio package. The example below demonstrates how to handle file uploads in Flutter. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your own unique mockapi URL.

VS Code

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

class FileUploadExample extends StatefulWidget {
  @override
  _FileUploadExampleState createState() => _FileUploadExampleState();
}

class _FileUploadExampleState extends State<FileUploadExample> {
  String responseText = '';

  Future<void> pickAndUploadFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();
    if (result != null) {
      File file = File(result.files.single.path!);
      var request = http.MultipartRequest(
        'POST',
        Uri.parse('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]'),
      );
      request.files.add(await http.MultipartFile.fromPath('file', file.path));

      var response = await request.send();
      setState(() {
        responseText = response.statusCode == 200 ? 'File uploaded successfully!' : 'Upload failed';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(onPressed: pickAndUploadFile, child: Text('Upload File')),
        Text(responseText)
      ],
    );
  }
}

Set Up FormAPI in 60 Seconds

1

Create Your Form

Sign up and create a form in FormAPI — no backend code required.

2

Get Your Endpoint

FormAPI gives you a unique endpoint. Point your form's action attribute (or a fetch/axios call) at it.

3

Start Receiving Submissions

Submissions land instantly in your dashboard inbox, with spam filtering and alerts built in.

Get Started Now

USE CASES

Need templates? Say less.

A collection of example HTML forms with code that you can edit live, then download or copy/paste. A minimal form reset css is included that should work with most sites.

Simple Contact Form

Survey Form

Book a Demo Form

News Letter Form

Registration Form & more...

Learn More

Ready to Experience Zunoy?

Start your journey with Zunoy's powerful suite of tools, designed for startups, developers, and growing teams alike.

Sign Up Now

All our products come with a lifetime free tier.