FORMCARRY EXAMPLES

HTML Contact Form
with only Frontend Code

An HTML contact form is a form element that sends a visitor's name, email, and message to a server endpoint. Point your form's action attribute at your Formcarry endpoint and you receive every submission by email, with spam filtering, without writing any backend code. Copy an example below and start collecting submissions in 2 minutes.

HTML

With jQuery

With Formcarry.js

With Fetch

Native Validation

VS Code

Copy Code

1<form action="https://formcarry.com/s/YOUR-FORM-ID" method="POST">
2  <label for="name">Name</label>
3  <input type="text" id="name" name="name" required>
4
5  <label for="email">Email</label>
6  <input type="email" id="email" name="email" required>
7
8  <label for="message">Message</label>
9  <textarea id="message" name="message" required></textarea>
10
11  <button type="submit">Send</button>
12</form>

1<form 
2  class="ajaxForm" 
3  action="https://formcarry.com/s/{Your Form ID}" 
4  method="POST" 
5  accept-charset="UTF-8" 
6  enctype="multipart/form-data
7">
8  <input type="file" name="picture">
9  <input type="submit" value="Send">
10</form>
11
12<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
13<script>
14  $(function(){
15    $(".ajaxForm").submit(function(e){
16      e.preventDefault();
17      var href = $(this).attr("action");
18      $.ajax({
19        type: "POST",
20        dataType: "json",
21        url: href,
22        data: $(this).serialize(),
23        success: function(response){
24          if(response.status == "success"){
25            alert("We received your submission, thank you!");
26          }else{
27            alert("An error occured: " + response.message);
28          }
29        }
30      });
31    });
32  });
33</script>

1<form id="my-sweet-form">
2  <label for="name">Name</label>
3  <input type="text" id="name" name="name" />
4 
5  <label for="surname">Surname</label>
6  <input type="text" id="surname" name="surname" />
7 
8  <label for="email">Email</label>
9  <input type="email" id="email" name="email" />
10 
11  <label for="message">Your Message</label>
12  <textarea id="message" name="message"></textarea>
13 
14  <button type="submit">Send</button>
15</form>
16
17<script src="https://carrier.formcarry.com/js/v1.js"></script>
18<script>
19  formcarry({
20    // replace this "you-form-id-in-formcarry" with your form id that you can get it from the dashboard.
21    form: "your-form-id-in-formcarry",
22    // id or class name of the form element, only form element allowed
23    // works with css selectors
24    // # <= for id
25    // . <= for class
26    element: "#my-sweet-form",
27    // Success callback, you can show alert messages
28    // or redirect the user in this function
29    onSuccess: function(response){
30      alert(response)
31    },
32    // Error callback, a good place to show errors 🗿
33    onError: function(error){
34      alert(error)
35    }
36  });
37</script>

1<!-- replace with your formcarry endpoint URL -->
2<form id="contact-form" action="https://formcarry.com/s/YOUR-FORM-ID" method="POST">
3  <label for="full-name">Full Name</label>
4  <input id="full-name" type="text" name="full_name" placeholder="Your first and last name" />
5
6  <label for="email">Email</label>
7  <input id="email" type="email" name="email" placeholder="john@doe.com" required />
8
9  <label for="message">Message</label>
10  <textarea id="message" name="message" placeholder="Enter your message..."></textarea>
11
12  <button type="submit">Send</button>
13
14  <p id="form-status" role="status"></p>
15</form>
16
17<script>
18  const form = document.getElementById("contact-form");
19  const status = document.getElementById("form-status");
20  const button = form.querySelector("button[type=submit]");
21
22  form.addEventListener("submit", async (event) => {
23    event.preventDefault();
24    status.textContent = "";
25    button.disabled = true;
26
27    try {
28      const response = await fetch(form.action, {
29        method: "POST",
30        // Accept header is required to get a JSON response from formcarry
31        headers: { Accept: "application/json" },
32        body: new FormData(form)
33      });
34
35      const result = await response.json();
36
37      if (response.ok && result.code === 200) {
38        status.textContent = "Thanks for reaching out! We got your message and will get back to you soon.";
39        form.reset();
40      } else if (result.code === 422) {
41        status.textContent = result.message;
42      } else {
43        status.textContent = result.message || "Something went wrong, please try again.";
44      }
45    } catch (error) {
46      status.textContent = "Could not send your message, check your connection and try again.";
47    } finally {
48      button.disabled = false;
49    }
50  });
51</script>

1<!-- shows formcarry validation errors with the browser's native bubbles -->
2<!-- replace with your formcarry endpoint URL -->
3<form id="contact-form" action="https://formcarry.com/s/YOUR-FORM-ID" method="POST">
4  <label for="full-name">Full Name</label>
5  <input id="full-name" type="text" name="full_name" />
6
7  <label for="email">Email</label>
8  <input id="email" type="email" name="email" />
9
10  <label for="message">Message</label>
11  <textarea id="message" name="message"></textarea>
12
13  <button type="submit">Send</button>
14
15  <p id="form-status" role="status"></p>
16</form>
17
18<script>
19  const form = document.getElementById("contact-form");
20  const status = document.getElementById("form-status");
21  const button = form.querySelector("button[type=submit]");
22
23  // editing a field clears its server-side error, so the form can submit again
24  form.addEventListener("input", (event) => {
25    event.target.setCustomValidity("");
26  });
27
28  form.addEventListener("submit", async (event) => {
29    event.preventDefault();
30    status.textContent = "";
31    button.disabled = true;
32
33    try {
34      const response = await fetch(form.action, {
35        method: "POST",
36        headers: { Accept: "application/json" },
37        body: new FormData(form)
38      });
39
40      const result = await response.json();
41
42      if (response.ok && result.code === 200) {
43        status.textContent = "Thank you, we got your submission!";
44        form.reset();
45      } else if (result.code === 422) {
46        // map each validation error onto its field, then let the browser show it
47        for (const [name, error] of Object.entries(result.errors)) {
48          const field = form.elements[name];
49          if (field) field.setCustomValidity(error.message);
50        }
51        form.reportValidity();
52      } else {
53        status.textContent = result.message || "Something went wrong, please try again.";
54      }
55    } catch (error) {
56      status.textContent = "Could not send your message, please try again.";
57    } finally {
58      button.disabled = false;
59    }
60  });
61</script>

Step-by-step guide

How to build HTML contact form

HTML contact form code examples

Every tab above is a complete, working example. Pick the one that matches how you want the form to behave:

Plain HTML contact form

Point the form action at your Formcarry endpoint and the browser posts the submission, no JavaScript needed. Visitors are redirected to a thank-you page after sending.

Submit the form with fetch (AJAX)

Send the submission with the fetch() API and show a success message without reloading the page. The button is disabled while the request is in flight.

With jQuery

The same no-reload behavior using $.ajax, for sites that already load jQuery.

Native HTML form validation

Map Formcarry's server-side validation errors onto each field with setCustomValidity, then let the browser's native validation bubbles display them.

HTML contact form FAQ

Can an HTML contact form work without a backend?

HTML alone cannot send email; the form must post to a server endpoint. Formcarry provides that endpoint, so your site stays static and you write zero backend code.

How do I make an HTML form send submissions to my email?

Set the form action to your Formcarry endpoint and method to POST. Formcarry emails you every submission.

How do I stop spam on an HTML contact form?

Formcarry filters spam automatically, no CAPTCHA setup required, and supports Google reCAPTCHA for bot-heavy sites.

How do I redirect visitors after they submit?

By default Formcarry shows a thank-you page. You can set a custom redirect URL per form in your dashboard, or handle the response in JavaScript with the fetch example above and skip the redirect entirely.

INSTALLATION