WordPress Integration

WordPress Contact Form with only Frontend Code

Start collecting form submissions from your Elementor form 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.

VS Code

<?php
// Example: Fetch API call inside WordPress using wp_remote_get()

add_shortcode('fetch_example', function() {
    $response = wp_remote_get('https://jsonplaceholder.typicode.com/posts/1');
    if (is_wp_error($response)) {
        return 'Something went wrong.';
    }
    $body = wp_remote_retrieve_body($response);
    return '<pre>' . esc_html($body) . '</pre>';
});
?>

How to Integrate Code

What is WordPress?

WordPress is a popular content management system (CMS) used for building websites and blogs. With FormAPI, you can easily integrate contact forms into your WordPress site.

FormAPI Setup with WordPress using Fetch

Fetch is a native JavaScript API for making HTTP requests. Below is an example demonstrating how to send form data to FormAPI using Fetch in WordPress. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your unique mockapi URL.

VS Code

<script>
function submitForm(event) {
  event.preventDefault();
  const email = document.getElementById('email').value;
  const message = document.getElementById('message').value;

  fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, message })
  })
  .then(response => response.json())
  .then(data => {
    if (data.code === 200) {
      alert('Form submitted successfully!');
    } else {
      alert('Error: ' + data.message);
    }
  })
  .catch(error => console.error('Error:', error));
}
</script>

<form onsubmit="submitForm(event)">
  <input type="email" id="email" placeholder="Email" required />
  <textarea id="message" placeholder="Message" required></textarea>
  <button type="submit">Submit</button>
</form>

FormAPI Setup with WordPress using Axios

Axios is a promise-based HTTP client that simplifies API requests. Below is an example showing how to send form data to FormAPI using Axios in WordPress. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your unique mockapi URL.

VS Code

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function submitForm(event) {
  event.preventDefault();
  const email = document.getElementById('email').value;
  const message = document.getElementById('message').value;

  axios.post('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', { email, message })
    .then(response => {
      if (response.data.code === 200) {
        alert('Form submitted successfully!');
      } else {
        alert('Error: ' + response.data.message);
      }
    })
    .catch(error => console.error('Error:', error));
}
</script>

<form onsubmit="submitForm(event)">
  <input type="email" id="email" placeholder="Email" required />
  <textarea id="message" placeholder="Message" required></textarea>
  <button type="submit">Submit</button>
</form>

FormAPI Setup for File Uploads in WordPress

To upload files in WordPress using FormAPI, you can use FormData along with Axios or Fetch. The example below demonstrates how to handle file uploads in WordPress. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your own unique mockapi URL.

VS Code

<script>
function uploadFile(event) {
  const file = event.target.files[0];
  if (!file) return;

  const formData = new FormData();
  formData.append('file', file);

  fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
    method: 'POST',
    body: formData
  })
  .then(response => response.ok ? alert('File uploaded successfully!') : alert('Upload failed.'))
  .catch(error => console.error('Error:', error));
}
</script>

<input type="file" onchange="uploadFile(event)" />

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.