ParrotForms Logo
ParrotForms
Sign inGet started

Alpine.js Volunteer Signup Form Generator

Recruit volunteers for your organization

Back to Generator
HTMLReactNext.jsGatsbyJekyllHugoAlpine.jsVue.jsjQuery

Form Preview

Alpine.js Code


<!-- Alpine.js Form Template for Volunteer Signup form -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Volunteer Signup form Form</title>
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-md">
    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-2xl font-bold text-gray-800 mb-6">Volunteer Signup form</h2>
      
      <form x-data="{
        formData: {
          name: '',
          email: '',
          message: ''
        },
        errors: {},
        loading: false,
        submitted: false,
        
        validateEmail(email) {
          return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
        },
        
        validateForm() {
          this.errors = {};
          
          if (!this.formData.name.trim()) {
            this.errors.name = 'Name is required';
          }
          
          if (!this.formData.email.trim()) {
            this.errors.email = 'Email is required';
          } else if (!this.validateEmail(this.formData.email)) {
            this.errors.email = 'Please enter a valid email';
          }
          
          if (!this.formData.message.trim()) {
            this.errors.message = 'Message is required';
          }
          
          return Object.keys(this.errors).length === 0;
        },
        
        submitForm() {
          if (this.validateForm()) {
            this.loading = true;
            
            // Simulate form submission
            setTimeout(() => {
              this.loading = false;
              this.submitted = true;
              
              // Reset form after 3 seconds if needed
              setTimeout(() => {
                this.submitted = false;
                this.formData = {
                  name: '',
                  email: '',
                  message: ''
                };
              }, 3000);
            }, 1000);
          }
        }
      }" @submit.prevent="submitForm">
        <!-- Success message -->
        <div x-show="submitted" class="mb-6 p-4 bg-green-100 rounded text-green-700">
          Thank you! Your form has been submitted successfully.
        </div>
        
        <!-- Name input -->
        <div class="mb-4">
          <label for="name" class="block text-gray-700 text-sm font-medium mb-2">Name</label>
          <input 
            id="name" 
            type="text" 
            x-model="formData.name"
            class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            :class="{'border-red-500': errors.name}"
          >
          <p x-show="errors.name" x-text="errors.name" class="mt-1 text-sm text-red-600"></p>
        </div>
        
        <!-- Email input -->
        <div class="mb-4">
          <label for="email" class="block text-gray-700 text-sm font-medium mb-2">Email</label>
          <input 
            id="email" 
            type="email" 
            x-model="formData.email"
            class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            :class="{'border-red-500': errors.email}"
          >
          <p x-show="errors.email" x-text="errors.email" class="mt-1 text-sm text-red-600"></p>
        </div>
        
        <!-- Message textarea -->
        <div class="mb-6">
          <label for="message" class="block text-gray-700 text-sm font-medium mb-2">Message</label>
          <textarea 
            id="message" 
            x-model="formData.message"
            rows="4" 
            class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            :class="{'border-red-500': errors.message}"
          ></textarea>
          <p x-show="errors.message" x-text="errors.message" class="mt-1 text-sm text-red-600"></p>
        </div>
        
        <!-- Submit button -->
        <button 
          type="submit" 
          class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
          :disabled="loading"
        >
          <span x-show="!loading">Submit</span>
          <span x-show="loading" class="inline-flex items-center">
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Processing...
          </span>
        </button>
      </form>
    </div>
  </div>
</body>
</html>

Installation

How to setup Alpine.js Volunteer Signup form

  1. 1

    Sign up to parrotforms.com

    Create your first form API endpoint then copy your endpoint.

    Screenshot Placeholder
  2. 2

    Copy the example code

    Use the copy button above to copy the entire code snippet.

    Screenshot Placeholder
  3. 3

    Paste the code and update the endpoint

    Replace the form API endpoint with the one you got in step 1.

    Screenshot Placeholder
  4. 4

    Collect submissions

    View and manage all form submissions in your parrotForms dashboard.

    Screenshot Placeholder

Need more advanced forms?

Create a free parrotForms account to access more templates, save your forms, and collect submissions.

Create a Free Account