Formclick

React Native contact form

Send in-app feedback or support requests straight to your inbox. The component posts JSON to Formclick with fetch, which is built into React Native.

Get your free access key Jump to the code

Set it up in 3 steps

  1. 1

    Get your access key

    Create a free Formclick account and copy the access key for your form from the dashboard. Submissions sent with that key are delivered to your inbox.

  2. 2

    Add the component

    Copy ContactForm into your app and replace YOUR_ACCESS_KEY_HERE. It only uses core React Native components, so there is nothing to install.

  3. 3

    Run and test

    Open the screen on a device or simulator, send a test message and check your inbox.

The code

Replace YOUR_ACCESS_KEY_HERE with the key from your dashboard.

ContactForm.tsx
import { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

export default function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [result, setResult] = useState('');

  async function handleSubmit() {
    setResult('Sending...');
    const res = await fetch(
      'https://api.formclick.io/submit',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
        body: JSON.stringify({
          access_key: 'YOUR_ACCESS_KEY_HERE',
          name,
          email,
          message,
        }),
      }
    );
    const data = await res.json();
    setResult(data.message);
  }

  return (
    <View>
      <TextInput placeholder="Name"
        onChangeText={setName} value={name} />
      <TextInput placeholder="Email"
        onChangeText={setEmail} value={email} />
      <TextInput placeholder="Message"
        onChangeText={setMessage} value={message}
        multiline />
      <Button title="Submit" onPress={handleSubmit} />
      {result ? <Text>{result}</Text> : null}
    </View>
  );
}

Tips

  • Send JSON as shown. It is the simplest body to build from component state.
  • Add keyboardType="email-address" and autoCapitalize="none" to the email input for a better keyboard.
  • Include extra context such as app version or platform as additional fields. They appear in your notification email.

React Native contact form FAQ

Do I need to install any packages?

No. The example uses fetch and core React Native components only.

Is it safe to ship my access key in client code?

Yes. The access key only allows submissions to be sent to your account. It cannot read your data, open your dashboard or change your settings, and you can restrict it to specific domains.

Do I need my own server or backend?

No. Formclick receives the submission, filters spam, stores it in your dashboard and emails it to you. Your app only makes one POST request.

How much does it cost?

Core features are free forever. Paid plans add higher submission limits and extras like file uploads. See the pricing page for details.

Other stacks

HTMLJavaScriptReactIonicFlutterExpoMore examples →

Your React Native form, live in minutes

Free forever on core features. No credit card required.

Create your form