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.
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)),
],
),
);
}
}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.
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.
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)
],
);
}
}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.
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)),
],
),
);
}
}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.
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)
],
);
}
}Select HTTPS monitoring to track website uptime, SSL expiry, redirects, and response codes from global locations.
Type your website URL, add optional headers or auth tokens, then pick the check interval you prefer.
We run the first check instantly and alert on downtime, SSL errors, or failed HTTPS responses.
USe CAses
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.
Copyright © 2025 - Mentcube Innovations Pvt Ltd. All Rights Reserved.
FormAPI