Unbounce

<form id="waitlist-form" class="unbounce-form">
  <input 
    type="email" 
    name="email" 
    placeholder="Enter your email" 
    required
    class="form-input"
  >
  <input 
    type="text" 
    name="name" 
    placeholder="Your name (optional)"
    class="form-input"
  >
  <button type="submit" class="form-button">
    Join Waitlist
  </button>
  <div id="form-message"></div>
</form>

(function() {
  const WAITLIST_KEY = 'YOUR_WAITLIST_KEY';
  const API_URL = `https://waitlister.me/s/${WAITLIST_KEY}`;
  
  document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('waitlist-form');
    const message = document.getElementById('form-message');
    const button = form.querySelector('button');
    
    form.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      button.disabled = true;
      button.textContent = 'Joining...';
      message.textContent = '';
      
      try {
        const formData = new FormData(form);
        const data = new URLSearchParams(formData);
        
        const response = await fetch(API_URL, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: data
        });
        
        if (response.ok) {
          message.textContent = 'Success! You\\'re on the list.';
          message.style.color = 'green';
          form.reset();
          
          // Trigger Unbounce conversion
          if (window.ub && window.ub.page && window.ub.page.submitForm) {
            window.ub.page.submitForm();
          }
        } else {
          throw new Error('Submission failed');
        }
      } catch (error) {
        message.textContent = 'Error. Please try again.';
        message.style.color = 'red';
      } finally {
        button.disabled = false;
        button.textContent = 'Join Waitlist';
      }
    });
  });
})();

<!-- In your form HTML, use DTR tags -->
<input 
  type="text" 
  name="keyword" 
  value="{{keyword:default=your product}}" 
  class="form-input"
  placeholder="Interested in {{keyword:default=our product}}"
>

<!-- The {{keyword}} gets replaced with actual search terms -->
<!-- Increases relevance and conversion rates -->

.unbounce-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.form-input {
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #4A90E2;
}

.form-button {
  width: 100%;
  padding: 16px;
  background: #4A90E2;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.form-button:hover:not(:disabled) {
  background: #357ABD;
}

.form-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#form-message {
  margin-top: 12px;
  text-align: center;
  font-weight: 500;
}

// In your JavaScript, after successful submission:
if (response.ok) {
  // Track in Unbounce
  if (window.ub && window.ub.page && window.ub.page.submitForm) {
    window.ub.page.submitForm();
  }
  
  // Track in Google Analytics
  if (window.gtag) {
    gtag('event', 'conversion', {
      'event_category': 'Waitlist',
      'event_label': 'Form Submission'
    });
  }
  
  // Track in Facebook Pixel
  if (window.fbq) {
    fbq('track', 'Lead');
  }
}