Make an Envato Elements template's contact form work

Setup

1. 1

   Create a form and copy its endpoint

   Sign up, create a form, and copy the endpoint URL. Submissions are emailed to your verified address by default.

2. 2

   HTML template: change the form action

   Open the contact page, find the <form> and replace its action (for example php/contact.php) with your endpoint. Keep method="POST" and the field names.

3. 3

   HTML template: fix the submit script

   If the form submits without a page reload, add dataType: "json" to the $.ajax call in the template's script and show response.message on success. See the ThemeForest guide for the common script patterns.

4. 4

   Elementor kit: add a Webhook action

   Edit the page in Elementor, select the Form widget, open Actions After Submit, add Webhook, and paste your endpoint as the Webhook URL. Leave the form's redirect in WebForms empty, because Elementor only accepts a 200 reply.

5. 5

   Send a test

   Submit the form on the live site. The submission appears in your inbox and the WebForms dashboard within seconds.

Envato Elements examples

Swap in your own endpoint and these run as-is.

<!-- contact.html: only the action changes -->
<form id="contact-form" action="https://send.webforms.to/wft_your_key" method="POST">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="Your email" required>
  <input type="text" name="subject" placeholder="Subject">
  <textarea name="message" placeholder="Message" required></textarea>

  <!-- Optional: WebForms reads these -->
  <input type="hidden" name="_subject" value="New enquiry from the website">
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px" aria-hidden="true">

  <button type="submit">Send message</button>
</form>

// js/ajax-mail.js (or contact.js): the usual jQuery handler
$(form).submit(function (e) {
  e.preventDefault();
  $.ajax({
    type: "POST",
    url: $(form).attr("action"),      // now your WebForms endpoint
    data: $(form).serialize(),
    dataType: "json"                  // add this: asks WebForms for JSON
  })
    .done(function (response) {
      $(formMessages).removeClass("error").addClass("success");
      $(formMessages).text(response.message);   // was: .text(response)
      $(form)[0].reset();
    })
    .fail(function () {
      $(formMessages).removeClass("success").addClass("error");
      $(formMessages).text("Sorry, your message could not be sent. Please try again.");
    });
});

Actions After Submit:  Webhook
Webhook URL:           https://send.webforms.to/wft_your_key
Advanced Data:         Off   (sends each field as "Label: value")

Worth knowing

• Envato Elements does not include author support for downloaded items, so the template's own documentation is the only help it comes with.
• Elementor's webhook treats anything other than a 200 reply as an error. WebForms answers 200 unless the form has a redirect set, so leave the redirect empty for an Elementor form.
• The Elementor webhook is sent from your WordPress server, not the visitor's browser, so WebForms' honeypot and time trap do not apply to it. The AI classifier and blocklists still check every submission.

Envato Elements form FAQ

Related guides

• ThemeForestHTML templates without PHP
• WordPressNo plugin required
• TemplateMonsterRD Mailform templates
• HTMLOne tag, zero JavaScript

Where Envato Elements submissions can go

The guide above gets the submission to your endpoint. From there it can land anywhere: one destination on Free, several on Pro.

• Email
• Slack
• Discord
• Telegram
• Webhooks
• Zapier, Make and n8n

Need the form markup too? The template gallery has complete forms for contact, waitlist, job application and more, and the form generator builds one field by field.