React Native Integration

React Native Contact Form with only Frontend Code

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

VS Code

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';

const FetchForm = () => {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    setError('');
    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ email, message }),
      });
      const data = await res.json();
      if (data.code === 200) setSubmitted(true);
      else setError(data.message || 'Something went wrong');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <TextInput style={styles.input} value={email} onChangeText={setEmail} keyboardType='email-address' />

      <Text>Message:</Text>
      <TextInput style={[styles.input, styles.textarea]} value={message} onChangeText={setMessage} multiline />

      <Button title='Send' onPress={handleSubmit} />
      {submitted && <Text>Form submitted successfully!</Text>}
      {error ? <Text style={{ color: 'red' }}>{error}</Text> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  input: { borderWidth: 1, marginBottom: 10, padding: 8, borderRadius: 4 },
  textarea: { height: 80 },
});

export default FetchForm;

How to Integrate Code

What is React Native?

React Native is a JavaScript framework for building mobile applications using React. It allows you to create native-like mobile experiences for both iOS and Android. FormAPI works seamlessly with React Native, and this guide will show you how to use it.

FormAPI Setup with React Native using Fetch

Fetch is a native API, so every React Native app can use it without any installation. The steps are simple. Please make sure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your own unique mockapi URL.

VS Code

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';

const FetchForm = () => {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    setError('');
    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ email, message }),
      });
      const data = await res.json();
      if (data.code === 200) setSubmitted(true);
      else setError(data.message || 'Something went wrong');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <TextInput style={styles.input} value={email} onChangeText={setEmail} keyboardType='email-address' />

      <Text>Message:</Text>
      <TextInput style={[styles.input, styles.textarea]} value={message} onChangeText={setMessage} multiline />

      <Button title='Send' onPress={handleSubmit} />
      {submitted && <Text>Form submitted successfully!</Text>}
      {error ? <Text style={{ color: 'red' }}>{error}</Text> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  input: { borderWidth: 1, marginBottom: 10, padding: 8, borderRadius: 4 },
  textarea: { height: 80 },
});

export default FetchForm;

FormAPI Setup with React Native using Axios

Below you will see the code that works using Axios, which is a library to perform HTTP requests. It's simple and effective. The code will show a success or error message and is ready to work. Please make sure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your own unique mockapi URL..

VS Code

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import axios from 'axios';

const AxiosForm = () => {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    setError('');
    try {
      const response = await axios.post('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', { email, message });
      if (response.data.code === 200) setSubmitted(true);
      else setError(response.data.message || 'Something went wrong');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <TextInput style={styles.input} value={email} onChangeText={setEmail} keyboardType='email-address' />

      <Text>Message:</Text>
      <TextInput style={[styles.input, styles.textarea]} value={message} onChangeText={setMessage} multiline />

      <Button title='Send' onPress={handleSubmit} />
      {submitted && <Text>Form submitted successfully!</Text>}
      {error ? <Text style={{ color: 'red' }}>{error}</Text> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  input: { borderWidth: 1, marginBottom: 10, padding: 8, borderRadius: 4 },
  textarea: { height: 80 },
});

export default AxiosForm;

FormAPI Setup for File Uploads in React Native

Below is an example of how to upload files in React Native using FormAPI. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your own unique mockapi URL.

VS Code

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import * as DocumentPicker from 'expo-document-picker';

const FileUploadForm = () => {
  const [email, setEmail] = useState('');
  const [file, setFile] = useState(null);
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

  const pickFile = async () => {
    try {
      const result = await DocumentPicker.getDocumentAsync({ type: '*/*' });
      if (result.type === 'success') {
        setFile(result);
      }
    } catch (err) {
      setError(err.message);
    }
  };

  const handleSubmit = async () => {
    if (!file) return setError('Please select a file');
    setError('');

    const formData = new FormData();
    formData.append('email', email);
    formData.append('file', { uri: file.uri, name: file.name, type: 'application/octet-stream' });

    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        body: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
      });
      const data = await res.json();
      if (data.code === 200) setSubmitted(true);
      else setError(data.message || 'Something went wrong');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <TextInput style={styles.input} value={email} onChangeText={setEmail} keyboardType='email-address' />

      <Button title='Pick File' onPress={pickFile} />
      {file && <Text>Selected: {file.name}</Text>}

      <Button title='Upload' onPress={handleSubmit} />
      {submitted && <Text>Form submitted successfully!</Text>}
      {error ? <Text style={{ color: 'red' }}>{error}</Text> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  input: { borderWidth: 1, marginBottom: 10, padding: 8, borderRadius: 4 },
});

export default FileUploadForm;

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.