Elementor Integration

Elementor 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

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('.elementor-form');
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        body: new FormData(form)
      })
      .then(response => response.json())
      .then(data => console.log('Success:', data))
      .catch(error => console.error('Error:', error));
    });
  });
</script>

How to Integrate Code

What is Elementor?

Elementor is a popular WordPress page builder that allows users to create stunning websites without coding. With FormAPI, you can easily integrate contact forms into your Elementor pages.

FormAPI Setup with Elementor 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 Elementor. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your unique endpoint 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 Elementor 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 Elementor. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your unique endpoint 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 Elementor

To upload files in Elementor using FormAPI, you can use FormData along with Axios or Fetch. The example below demonstrates how to handle file uploads in Elementor. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your own unique endpoint 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 Forms Checks in 60 Seconds

Choose HTTPS Monitor

Select HTTPS monitoring to track website uptime, SSL expiry, redirects, and response codes from global locations.

Enter Site URL & Options

Type your website URL, add optional headers or auth tokens, then pick the check interval you prefer.

Activate & Get Instant Status

We run the first check instantly and alert on downtime, SSL errors, or failed HTTPS responses.

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. A minimal form reset css is included that should work with most sites. A minimal form reset css is included that should work with most sites.