Flutter Integration

Flutter Contact Form with only Frontend Code

Start collecting form submissions from your Flutter app with Forms in 2 minutes. Create your form in Forms 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 {
  final _emailController = TextEditingController();
  final _messageController = TextEditingController();
  String? error;
  bool submitted = false;

  Future _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. Forms works seamlessly with Flutter, and this guide will show you how to use it.

Forms 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 Forms 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 {
  final TextEditingController emailController = TextEditingController();
  final TextEditingController messageController = TextEditingController();
  String responseText = '';

  Future 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)
      ],
    );
  }
}

Forms 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 Forms. 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 {
  final _emailController = TextEditingController();
  final _messageController = TextEditingController();
  String? error;
  bool submitted = false;

  Future _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)),
        ],
      ),
    );
  }
}

Forms Setup for File Uploads in Flutter

To upload files in Flutter using Forms, 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 {
  String responseText = '';

  Future 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 Forms in 60 Seconds

Create Your Form

Get Your Endpoint

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

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