FORMCARRY EXAMPLES

AlpineJS Contact Form
with only Frontend Code

Start collecting form submissions from your AlpineJS form with formcarry in 2 minutes. Create your form in formcarry and paste your unique URL inside your form. Look the code examples below and get started.

VS Code

Copy Code

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Formcarry AlpineJs Example</title>
6    <script
7      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
8      defer
9    ></script>
10  </head>
11  <body>
12    <form x-data="contactForm()" @submit.prevent="submit">
13      <label>
14        <span>Email</span>
15        <textarea name="email" x-model="data.email"></textarea>
16      </label>
17      <label>
18        <span>Message</span>
19        <textarea name="message" x-model="data.message"></textarea>
20      </label>
21      <button type="submit" x-text="buttonText" :disabled="loading">
22        Submit
23      </button>
24    </form>
25
26    <script>
27      // replace this with your own unique endpoint URL
28      const FORMCARRY_ENDPOINT = "https://formcarry.com/s/XXXXXXX";
29
30      function contactForm() {
31        return {
32          data: {
33            email: "",
34            message: "",
35          },
36          buttonText: "Submit",
37          loading: false,
38          submit() {
39            this.buttonText = "Submitting...";
40            this.loading = true;
41            fetch(FORMCARRY_ENDPOINT, {
42              method: "POST",
43              headers: {
44                "Content-Type": "application/json",
45                Accept: "application/json",
46              },
47              body: JSON.stringify(this.data),
48            })
49              .then((response) => {
50                alert(response);
51              })
52              .catch((error) => {
53                alert(error);
54              })
55              .finally(() => {
56                this.data.message = "";
57                this.buttonText = "Submit";
58                this.loading = false;
59              });
60          },
61        };
62      }
63    </script>
64  </body>
65</html>