Documentation

1. Get Your Form Key

Contact support to get your unique form key, or use the dashboard once available:

# Your form key will look like this:
your-unique-form-key

# Form endpoint will be:
https://send.webform.dev/send/your-unique-form-key

2. Add the Form to Your Website

Copy and paste this HTML into your site. Replace YOUR_FORM_KEY with your form key:

<!-- Include optional CSS for default styling -->
<link rel="stylesheet" href="https://send.webform.dev/css/embed.css">

<form class="webform-embed" action="https://send.webform.dev/send/YOUR_FORM_KEY" method="POST">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <button type="submit">Send</button>
</form>
<script src="https://send.webform.dev/js/embed.js"></script>

• The webform-embed class enables JavaScript-enhanced submission with loading states.
• The optional CSS file provides polished styling for all states.
• Configure behavior using data attributes on the form element.

3. How It Works

• On submit: shows loading state and sends form dynamically.
• On success: displays configurable success message (button update, form replacement, or custom).
• On error: shows error message at configurable position with retry option.
• CSP-compatible: no inline styles, uses CSS classes and custom events.

4. Basic Configuration

Customize form behavior using data attributes:

<!-- Replace entire form with success message -->
<form class="webform-embed"
      action="https://send.webform.dev/send/YOUR_FORM_KEY"
      method="POST"
      data-success-behavior="replace"
      data-success-message="Thank you! We'll be in touch soon.">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <button type="submit">Send Message</button>
</form>

Common Configuration Options:

• data-success-behavior: "button" (default), "replace", "message", or "custom"
• data-success-message: Custom success message
• data-error-position: "inline" (default), "top", or "bottom"
• data-submit-text: Text to show while submitting

5. Styling

Include the optional CSS file for default styling:

<link rel="stylesheet" href="https://send.webform.dev/css/embed.css">

Or define your own CSS for these classes:

• .webform-error - Error messages
• .webform-success - Success message styling
• .webform-loading - Button loading state

Simple Contact Form

<form action="https://send.webform.dev/send/abc123" method="POST">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>

  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div class="form-group">
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
  </div>

  <input name="webform_gotcha" type="text" style="display:none">
  <button type="submit">Send Message</button>
</form>

Newsletter Signup

<form action="https://send.webform.dev/send/form_def456ghi789" method="POST">
  <input type="email" name="email" placeholder="Enter your email" required>
  <input type="hidden" name="subject" value="Newsletter Signup">
  <input type="hidden" name="webform_next" value="/thanks">
  <button type="submit">Subscribe</button>
</form>

Enhanced Form with Dynamic Submission

<link rel="stylesheet" href="https://send.webform.dev/css/embed.css">

<form class="webform-embed"
      action="https://send.webform.dev/send/enhanced_form"
      method="POST"
      data-success-behavior="replace"
      data-success-message="Thank you! We'll get back to you soon.">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <input name="webform_gotcha" type="text" style="display:none">
  <button type="submit">Send Message</button>
</form>
<script src="https://send.webform.dev/js/embed.js"></script>

Form not working?

• Check your form action URL
• Make sure method is set to POST
• Verify your form key is correct
• Check for required fields

Not getting emails?

• Check your spam folder
• Verify the form is submitting successfully
• Double-check your form key
• Try a test submission

Need more help?

Need advanced features or have questions?