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

Choose HTTPS Monitor

Select HTTPS monitoring to track website uptime, SSL expiry, redirects, and response codes from global locations.

Enter Site URL & Options

Type your website URL, add optional headers or auth tokens, then pick the check interval you prefer.

Activate & Get Instant Status

We run the first check instantly and alert on downtime, SSL errors, or failed HTTPS responses.

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. A minimal form reset css is included that should work with most sites. A minimal form reset css is included that should work with most sites.