formcarry.
:')
formcarry
_

FORMCARRY EXAMPLES

AlpineJS Form Example

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>

INSTALLATION

How to setup AlpineJS form

1

Sign up to formcarry to create your first form then copy your endpoint

Steps to create first form

You can follow the steps like in the video above 👆
Save your endpoint to somewhere, you are going to use it in 3rd step.

2

Copy the example code.

Copy example code

If you are in rush and want to quickly test it, consider using CodeSandbox to quickly test the code.

3

Paste the code and replace the endpoint that you got in 1st step.

Paste your code inside your project.

Take the endpoint that you got from 1st step then replace the test endpoint inside the example code with your endpoint.

4

Collect submissions ✨

Now you are ready to collect submissions from your AlpineJS form.

Collect Submissions!

Check out our documentations for more information.

FREE FORM GENERATOR

Need templates?
Say less.

User our free form generator to kickstart your form, customize based on your needings, choose your form and get your fully-working form code.

Free form templates
Setting email notifications

EMAIL NOTIFICATIONS

Set email notifications for your form

Get an email from formcarry whenever you receive a new submission, add your own HTML template, use it with our smart tags

THANK YOU!

Use our customizable thank you pages

Formcarry offers 3 different customizable thank you pages that you can customize based on your brand image. Available on all plans.

Customizable thank you pages

FORMCARRY BLOG

Useful to read

:)
:)
:)
:)

LET'S GET STARTED!

Hassle Free Forms

Create an account and start collecting submissions

for your HTML forms, it only takes 2 minutes to setup your form

formcarry dashboard.
Blur
Your email address|
Copied example to clipboard 👏