Contact Form Embed Test

Live Demo

Below is the contact form embedded in an iframe:

How to Embed This Form

Copy and paste this HTML code into your website to embed the contact form:

<iframe src="https://contact-form.theserverless.dev/" width="100%" height="600" style="border:none;"></iframe>

Adjust the width and height as needed to fit your website's layout.

Alternative: Using JavaScript API

If you prefer to use your own form and styling, you can use our API to submit the form data directly:

HTML Form Example

<form id="contactForm">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" required>
  </div>

  <div>
    <label for="email">Email</label>
    <input type="email" id="email" required>
  </div>

  <div>
    <label for="phone">Phone (optional)</label>
    <input type="tel" id="phone">
  </div>

  <div>
    <label for="message">Message</label>
    <textarea id="message" required></textarea>
  </div>

  <button type="submit">Send Message</button>

  <div id="formStatus"></div>
</form>

JavaScript Code

<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('contactForm');
  const formStatus = document.getElementById('formStatus');

  form.addEventListener('submit', async function(e) {
    e.preventDefault();

    // Get form values
    const formData = new FormData();
    formData.append('name', document.getElementById('name').value);
    formData.append('email', document.getElementById('email').value);
    formData.append('phone', document.getElementById('phone').value);
    formData.append('message', document.getElementById('message').value);

    // Show loading state
    formStatus.innerHTML = 'Sending message...';

    try {
      // Send to the API
      const response = await fetch('https://contact-form.theserverless.dev/', {
        method: 'POST',
        body: formData
      });

      if (response.ok) {
        // Show success message
        formStatus.innerHTML = '<div style="color: green;">Thank you! Your message has been sent successfully.</div>';
        form.reset();
      } else {
        // Show error message
        formStatus.innerHTML = '<div style="color: red;">Something went wrong. Please try again.</div>';
      }
    } catch (error) {
      console.error('Error:', error);
      formStatus.innerHTML = '<div style="color: red;">Something went wrong. Please try again.</div>';
    }
  });
});
</script>

Live JavaScript Example

Here's a working example of a custom form that uses the JavaScript approach:

Features