Form Integration

Contact From for Alpine.js Sites

Quickly create and integrate a contact form into your Alpine.js site with no backend required. Use FormBold’s API endpoint to collect form submissions instantly.

Alpine.js Contact Form with Backend API

Set up a fully functional contact form for your Alpine.js site without writing backend code. Simply paste your unique API endpoint into the action attribute of your Alpine.js form, and you're ready to start collecting submissions.

alpinejs.html

<form
  x-data="contactForm()"
  @submit.prevent="submit"
  class="flex flex-col gap-4 max-w-[452px] mx-auto"
>
  <!-- Email Address -->
  <div class="flex flex-col gap-2">
    <label for="email" class="text-sm font-medium text-gray-700">
      Email Address<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="email"
      name="email"
      id="email"
      x-model="formData.email"
      placeholder="Enter your email"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Subject -->
  <div class="flex flex-col gap-2">
    <label for="subject" class="text-sm font-medium text-gray-700">
      Subject<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="subject"
      id="subject"
      x-model="formData.subject"
      placeholder="Enter your subject"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Message -->
  <div class="flex flex-col gap-2">
    <label for="message" class="text-sm font-medium text-gray-700">
      Message<span class="ml-0.5 text-red-500">*</span>
    </label>
    <textarea
      name="message"
      id="message"
      x-model="formData.message"
      rows="5"
      placeholder="Type your message..."
      required
      class="w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    ></textarea>
  </div>

  <!-- Submit Button -->
  <button
    type="submit"
    :disabled="loading"
    class="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3 text-base font-medium text-white shadow-xs transition-all hover:bg-black active:scale-[0.99] disabled:opacity-50"
  >
    <span x-text="loading ? 'Submitting...' : 'Submit Message'"></span>
  </button>

  <!-- Status Message -->
  <div
    x-show="status"
    x-text="status"
    class="rounded-xl p-3 text-center text-sm font-medium bg-gray-50 text-gray-800"
  ></div>
</form>

<script>
  function contactForm() {
    return {
      loading: false,
      status: "",
      formData: { email: "", subject: "", message: "" },
      async submit() {
        this.loading = true;
        try {
          const response = await fetch("https://formbold.com/s/FORM_ID", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Accept: "application/json",
            },
            body: JSON.stringify(this.formData),
          });
          const result = await response.json();
          if (response.ok) {
            this.status = result.message || "Message sent successfully!";
            this.formData = { email: "", subject: "", message: "" };
          } else {
            this.status = result.message || "Something went wrong";
          }
        } catch (err) {
          this.status = "Failed to send message.";
        } finally {
          this.loading = false;
          setTimeout(() => (this.status = ""), 4000);
        }
      },
    };
  }
</script>

How it works

See How It Works

Integrating a contact form with Alpine.js and FormBold is simple and fast—no complex setup required.

Create an Account

Paste the Action URL

In your Alpine.js form, replace the action URL with the FormBold API endpoint.

Start Receiving Submissions

Submissions will be sent directly to your FormBold dashboard, inbox, or connected apps.

Features

Key Features of FormBold

FormBold gives your Alpine.js forms powerful backend capabilities while keeping everything simple and code-free.

No Backend Required

Works effortlessly with Alpine.js—no server etup or backend code required.

Instant Email Notifications

Receive form submissions instantly via email or any connected app.

Spam Protection Built-in

Google reCAPTCHA and server-side validation to block bot submissions.

File Upload Support

Enable file uploads in your forms with secure CDN lins automatically generated for each submission.

Connect to 5+ Apps

Integrate with Slack, Notion, Sheets, Telegram, and more—no coding required.

FAQ's

Frequently Asked Questions

Here are answers to common questions about using FormBold with Alpine.js

Simply use FormBold's API endpoint in the action attribute of your Alpine.js form. Set the method to POST, and you're good to go.