Code Examples

Ready-to-use code snippets for integrating FormFeeder into your applications. Click any code block to copy.

HTML Forms

The simplest integration—just point your form to FormFeeder.

Basic Contact Form

<form action="https://api.formfeeder.io/v1/form/abcd1234" method="POST">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  
  <button type="submit">Send Message</button>
</form>

Form with File Upload

<form action="https://api.formfeeder.io/v1/form/abcd1234" method="POST" enctype="multipart/form-data">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div class="form-group">
    <label for="resume">Resume (PDF)</label>
    <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx">
  </div>
  
  <div class="form-group">
    <label for="portfolio">Portfolio Images</label>
    <input type="file" id="portfolio" name="portfolio" accept="image/*" multiple>
  </div>
  
  <button type="submit">Submit Application</button>
</form>

JavaScript / Fetch API

Modern JavaScript examples with error handling and user feedback.

Vanilla JavaScript with JSON

async function submitForm(event) {
  event.preventDefault();
  
  const submitButton = event.target.querySelector('button[type="submit"]');
  const originalText = submitButton.textContent;
  submitButton.textContent = 'Sending...';
  submitButton.disabled = true;
  
  try {
    const response = await fetch('https://api.formfeeder.io/v1/form/abcd1234', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: document.getElementById('name').value,
        email: document.getElementById('email').value,
        message: document.getElementById('message').value
      })
    });
    
    if (response.ok) {
      // Success! Show confirmation
      alert('Thank you! Your message has been sent.');
      event.target.reset();
    } else if (response.status === 429) {
      alert('Too many submissions. Please try again later.');
    } else {
      alert('Something went wrong. Please try again.');
    }
  } catch (error) {
    console.error('Error:', error);
    alert('Network error. Please check your connection.');
  } finally {
    submitButton.textContent = originalText;
    submitButton.disabled = false;
  }
}

// Attach to your form
document.getElementById('contact-form').addEventListener('submit', submitForm);

FormData with Files

async function submitFormWithFiles(event) {
  event.preventDefault();
  
  const form = event.target;
  const formData = new FormData(form);
  const submitButton = form.querySelector('button[type="submit"]');
  
  // Show progress
  submitButton.textContent = 'Uploading...';
  submitButton.disabled = true;
  
  try {
    const response = await fetch('https://api.formfeeder.io/v1/form/abcd1234', {
      method: 'POST',
      body: formData // FormData automatically sets the correct Content-Type
    });
    
    if (response.ok) {
      // Success
      showSuccess('Application submitted successfully!');
      form.reset();
    } else {
      const error = await response.text();
      showError(`Error: ${error}`);
    }
  } catch (error) {
    showError('Network error. Please try again.');
  } finally {
    submitButton.textContent = 'Submit';
    submitButton.disabled = false;
  }
}

function showSuccess(message) {
  const alert = document.createElement('div');
  alert.className = 'alert alert-success';
  alert.textContent = message;
  document.body.appendChild(alert);
  setTimeout(() => alert.remove(), 5000);
}

function showError(message) {
  const alert = document.createElement('div');
  alert.className = 'alert alert-error';
  alert.textContent = message;
  document.body.appendChild(alert);
  setTimeout(() => alert.remove(), 5000);
}

React

Modern React examples with hooks and proper state management.

Basic React Contact Form

import React, { useState } from 'react';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [status, setStatus] = useState('');

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setStatus('');

    try {
      const response = await fetch('https://api.formfeeder.io/v1/form/abcd1234', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData)
      });

      if (response.ok) {
        setStatus('success');
        setFormData({ name: '', email: '', message: '' });
      } else {
        setStatus('error');
      }
    } catch (error) {
      console.error('Error:', error);
      setStatus('error');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="contact-form">
      <div className="form-group">
        <label htmlFor="name">Name</label>
        <input
          type="text"
          id="name"
          name="name"
          value={formData.name}
          onChange={handleChange}
          required
        />
      </div>
      
      <div className="form-group">
        <label htmlFor="email">Email</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
      </div>
      
      <div className="form-group">
        <label htmlFor="message">Message</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          value={formData.message}
          onChange={handleChange}
          required
        />
      </div>
      
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Sending...' : 'Send Message'}
      </button>
      
      {status === 'success' && (
        <div className="alert alert-success">Thank you! Your message has been sent.</div>
      )}
      
      {status === 'error' && (
        <div className="alert alert-error">Something went wrong. Please try again.</div>
      )}
    </form>
  );
}

export default ContactForm;

React with File Upload

import React, { useState } from 'react';

function FileUploadForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [status, setStatus] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setStatus('');

    const formData = new FormData(e.target);

    try {
      const response = await fetch('https://api.formfeeder.io/v1/form/abcd1234', {
        method: 'POST',
        body: formData
      });

      if (response.ok) {
        setStatus('success');
        e.target.reset();
      } else {
        setStatus('error');
      }
    } catch (error) {
      console.error('Error:', error);
      setStatus('error');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} encType="multipart/form-data">
      <div className="form-group">
        <label htmlFor="name">Name</label>
        <input type="text" name="name" required />
      </div>
      
      <div className="form-group">
        <label htmlFor="email">Email</label>
        <input type="email" name="email" required />
      </div>
      
      <div className="form-group">
        <label htmlFor="resume">Resume</label>
        <input type="file" name="resume" accept=".pdf,.doc,.docx" />
      </div>
      
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Uploading...' : 'Submit Application'}
      </button>
      
      {status === 'success' && (
        <div className="alert alert-success">Application submitted successfully!</div>
      )}
      
      {status === 'error' && (
        <div className="alert alert-error">Something went wrong. Please try again.</div>
      )}
    </form>
  );
}

export default FileUploadForm;

Next.js

Server-side and client-side integration patterns.

API Route (app router)

// app/api/contact/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  try {
    const formData = await request.formData();
    
    const response = await fetch('https://api.formfeeder.io/v1/form/abcd1234', {
      method: 'POST',
      body: formData,
    });
    
    if (response.ok) {
      return NextResponse.json({ success: true });
    } else {
      const error = await response.text();
      return NextResponse.json({ error }, { status: response.status });
    }
  } catch (error) {
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  }
}

Client Component

'use client';

import { useState } from 'react';

export default function ContactForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsSubmitting(true);

    const formData = new FormData(e.currentTarget);
    
    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        alert('Thank you! Your message has been sent.');
        e.currentTarget.reset();
      } else {
        alert('Something went wrong. Please try again.');
      }
    } catch (error) {
      alert('Network error. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Your Email" required />
      <textarea name="message" placeholder="Your Message" required />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Sending...' : 'Send Message'}
      </button>
    </form>
  );
}

Vue.js

Vue 3 Composition API examples.

Vue Contact Form

<template>
  <form @submit.prevent="handleSubmit" class="contact-form">
    <div class="form-group">
      <label for="name">Name</label>
      <input
        v-model="form.name"
        type="text"
        id="name"
        name="name"
        required
      />
    </div>
    
    <div class="form-group">
      <label for="email">Email</label>
      <input
        v-model="form.email"
        type="email"
        id="email"
        name="email"
        required
      />
    </div>
    
    <div class="form-group">
      <label for="message">Message</label>
      <textarea
        v-model="form.message"
        id="message"
        name="message"
        rows="5"
        required
      />
    </div>
    
    <button type="submit" :disabled="isSubmitting">
      {{ isSubmitting ? 'Sending...' : 'Send Message' }}
    </button>
    
    <div v-if="status === 'success'" class="alert alert-success">
      Thank you! Your message has been sent.
    </div>
    
    <div v-if="status === 'error'" class="alert alert-error">
      Something went wrong. Please try again.
    </div>
  </form>
</template>

<script setup>
import { ref, reactive } from 'vue';

const form = reactive({
  name: '',
  email: '',
  message: ''
});

const isSubmitting = ref(false);
const status = ref('');

const handleSubmit = async () => {
  isSubmitting.value = true;
  status.value = '';

  try {
    const response = await fetch('https://api.formfeeder.io/v1/form/abcd1234', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(form)
    });

    if (response.ok) {
      status.value = 'success';
      form.name = '';
      form.email = '';
      form.message = '';
    } else {
      status.value = 'error';
    }
  } catch (error) {
    console.error('Error:', error);
    status.value = 'error';
  } finally {
    isSubmitting.value = false;
  }
};
</script>

Error Handling

Common response patterns and how to handle them.

Response Status Codes

200 OK: Form submitted successfully
400 Bad Request: Invalid form data or validation errors
401 Unauthorized: Domain not allowed or form not found
413 Payload Too Large: File upload too large
429 Too Many Requests: Rate limit exceeded
500 Internal Server Error: Server error

Example Error Handling

try {
  const response = await fetch('https://api.formfeeder.io/v1/form/abcd1234', {
    method: 'POST',
    body: formData
  });

  if (response.ok) {
    showSuccess('Form submitted successfully!');
  } else {
    switch (response.status) {
      case 400:
        showError('Please check your form data.');
        break;
      case 401:
        showError('This domain is not authorized.');
        break;
      case 413:
        showError('File too large. Please try a smaller file.');
        break;
      case 429:
        showError('Too many requests. Please try again later.');
        break;
      default:
        showError('Something went wrong. Please try again.');
    }
  }
} catch (error) {
  showError('Network error. Please check your connection.');
}

Code Examples

Code Examples

HTML Forms

Basic Contact Form

Form with File Upload

JavaScript / Fetch API

Vanilla JavaScript with JSON

FormData with Files

React

Basic React Contact Form

React with File Upload

Next.js

API Route (app router)

Client Component

Vue.js

Vue Contact Form

Error Handling

Response Status Codes

Example Error Handling

On this page