Skip to content

WordPress Integration

Integrate Basin with your WordPress site to handle form submissions reliably and securely, without the headaches of traditional form plugins.

Why Choose Basin for WordPress Forms?

WordPress form solutions often come with significant challenges that Basin solves:

Common WordPress Form Pain Points Basin Solves

  • Email Deliverability Issues: Contact form emails often end up in spam folders or disappear entirely
  • Plugin Complexity and Bloat: Many plugins are bulky, slow down websites, and have complex interfaces
  • Form Builder Limitations: Basic form builders lack advanced customization and conditional logic
  • Data Management Issues: Difficulty tracking submissions and limited CRM integrations
  • GDPR Compliance Challenges: Complex privacy regulation compliance requirements
  • Design Integration Problems: Pre-set plugin styles that don't match your brand

Basin's Solutions

  • Reliable Email Delivery: Basin ensures your form notifications reach your inbox
  • Lightweight Integration: No bulky plugins - just clean HTML and BasinJS
  • Full Customization: Complete control over form design and functionality
  • Advanced Spam Protection: Multiple spam protection methods without complexity
  • Built-in Integrations: Connect to CRMs, email marketing tools, and more
  • GDPR Compliance: Built-in privacy features and data handling

Integration Methods

The most efficient way to add Basin to WordPress is using BasinJS with custom HTML forms.

Step 1: Add BasinJS to Your Theme

Add this to your theme's functions.php file:

function add_basin_js() {
    wp_enqueue_script('basin-js', 'https://js.usebasin.com/v2.8.0.min.js', array(), '2.8.0', true);
}
add_action('wp_enqueue_scripts', 'add_basin_js');

Or add directly to your theme's header.php file:

<script src="https://js.usebasin.com/v2.8.0.min.js" defer></script>

Step 2: Create Your Form with Basin Attributes

Add this complete form example to any page or post:

<div class="basin-contact-form">
  <form 
    action="https://usebasin.com/f/YOUR-FORM-ID" 
    method="POST" 
    enctype="multipart/form-data" 
    data-basin-form 
    data-basin-success-action="render" 
    data-basin-spam-protection="recaptcha"
  >
    <div style="margin-bottom: 1rem;">
      <label for="email" style="display: block; font-weight: bold; margin-bottom: 0.5rem;">Email *</label>
      <input 
        type="email" 
        id="email" 
        name="email" 
        placeholder="Enter your email" 
        required 
        style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;"
      >
    </div>

    <div style="margin-bottom: 1rem;">
      <label for="name" style="display: block; font-weight: bold; margin-bottom: 0.5rem;">Name</label>
      <input 
        type="text" 
        id="name" 
        name="name" 
        placeholder="Enter your name" 
        style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;"
      >
    </div>

    <div style="margin-bottom: 1rem;">
      <label for="subject" style="display: block; font-weight: bold; margin-bottom: 0.5rem;">Subject</label>
      <input 
        type="text" 
        id="subject" 
        name="subject" 
        placeholder="Subject" 
        style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;"
      >
    </div>

    <div style="margin-bottom: 1rem;">
      <label for="message" style="display: block; font-weight: bold; margin-bottom: 0.5rem;">Message *</label>
      <textarea 
        id="message" 
        name="message" 
        placeholder="Your message" 
        required
        style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; min-height: 120px;"
      ></textarea>
    </div>

    <div style="margin-bottom: 1rem;">
      <label for="attachment" style="display: block; font-weight: bold; margin-bottom: 0.5rem;">Upload File</label>
      <input 
        id="attachment" 
        name="attachment" 
        type="file" 
        style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;"
      >
    </div>

    <div style="margin-bottom: 1rem;">
      <input 
        type="submit" 
        value="Submit" 
        style="background-color: #007bff; color: white; font-weight: bold; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer;"
      >
    </div>
  </form>

  <div class="w-form-done" style="display: none; margin-top: 1rem; font-weight: bold; color: green;">
    Thank you for your submission! 🚀
  </div>

  <div class="w-form-fail" style="display: none; margin-top: 1rem; font-weight: bold; color: red;">
    Oops, something went wrong 🚨
  </div>
</div>

Step 3: Add Custom JavaScript Events (Optional)

BasinJS provides JavaScript events for custom functionality:

<script>
  document.addEventListener('basinjsFormSubmitted', function(event) {
    console.log('Form submitted:', event.detail.form);
    // Track form submission in analytics
    gtag('event', 'form_submit', {
      'event_category': 'contact',
      'event_label': 'contact_form'
    });
  });

  document.addEventListener('basinjsFormSuccess', function(event) {
    console.log('Form submission succeeded:', event.detail.form);
    // Custom success actions
  });

  document.addEventListener('basinjsFormError', function(event) {
    console.error('Form submission error:', event.detail.error);
    // Custom error handling
  });
</script>

2. WordPress Plugin Integration

Basin works seamlessly with popular WordPress form plugins through webhooks.

Contact Form 7 Integration

Based on Basin's Contact Form 7 webhook guide, you can integrate Basin with CF7:

  1. Install Contact Form 7 and CF7 Webhooks plugins
  2. Create your form in Contact Form 7
  3. Configure the webhook to point to your Basin endpoint
  4. Set up field mapping between CF7 and Basin

Example CF7 Form: 

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

Gravity Forms Integration

For Gravity Forms integration using Basin's Gravity Forms webhook guide:

  1. Create your form in Gravity Forms
  2. Go to Settings > Webhooks
  3. Add a new webhook with your Basin endpoint URL
  4. Map the form fields to the webhook payload
  5. Test and activate the webhook

Gravity Forms Webhook Configuration: - Request URL: https://usebasin.com/f/YOUR_FORM_ID - Request Method: POST - Request Format: Form - Field Mapping: Map Gravity Forms fields to Basin field names

WPForms Integration

  1. Install WPForms plugin
  2. Create a new form
  3. Go to Settings > Notifications
  4. Add a new notification
  5. Set the Send To field to your Basin webhook URL
  6. Configure the message format to include form data

3. Custom HTML Forms

Add custom HTML forms directly to any WordPress content:

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <div class="form-group">
        <label for="name">Name *</label>
        <input type="text" id="name" name="name" required>
    </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="website">Website</label>
        <input type="url" id="website" name="website">
    </div>

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

    <button type="submit">Send Message</button>
</form>

Advanced Spam Protection

Basin offers multiple spam protection methods that work seamlessly with WordPress:

1. Built-in AI Spam Detection

Basin automatically filters obvious spam using SpamCheck.ai - no configuration needed.

2. CAPTCHA Integration

Add spam protection to your forms using data attributes:

<!-- Google reCAPTCHA v2 -->
<form data-basin-spam-protection="recaptcha" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
  <!-- form fields -->
</form>

<!-- Google reCAPTCHA v3 (invisible) -->
<form data-basin-spam-protection="recaptcha-v3" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
  <!-- form fields -->
</form>

<!-- Cloudflare Turnstile -->
<form data-basin-spam-protection="turnstile" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
  <!-- form fields -->
</form>

<!-- hCAPTCHA -->
<form data-basin-spam-protection="hcaptcha" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
  <!-- form fields -->
</form>

3. Honeypot Fields

Add invisible fields that trap bots:

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <!-- Regular form fields -->
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>

    <!-- Honeypot field (hidden from users) -->
    <input type="text" name="_gotcha" style="display:none">

    <button type="submit">Submit</button>
</form>

4. Domain Restrictions

Configure allowed domains in your Basin dashboard to prevent submissions from unauthorized domains.

WordPress-Specific Use Cases

1. Contact Forms for Business Sites

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST" data-basin-form>
    <div class="form-row">
        <div class="form-group half">
            <label for="first_name">First Name *</label>
            <input type="text" id="first_name" name="first_name" required>
        </div>
        <div class="form-group half">
            <label for="last_name">Last Name *</label>
            <input type="text" id="last_name" name="last_name" required>
        </div>
    </div>

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

    <div class="form-group">
        <label for="company">Company</label>
        <input type="text" id="company" name="company">
    </div>

    <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel" id="phone" name="phone">
    </div>

    <div class="form-group">
        <label for="service">Service Interest</label>
        <select id="service" name="service">
            <option value="">Select a service</option>
            <option value="web-design">Web Design</option>
            <option value="seo">SEO Services</option>
            <option value="marketing">Digital Marketing</option>
            <option value="consulting">Consulting</option>
        </select>
    </div>

    <div class="form-group">
        <label for="budget">Budget Range</label>
        <select id="budget" name="budget">
            <option value="">Select budget range</option>
            <option value="under-5k">Under $5,000</option>
            <option value="5k-10k">$5,000 - $10,000</option>
            <option value="10k-25k">$10,000 - $25,000</option>
            <option value="over-25k">Over $25,000</option>
        </select>
    </div>

    <div class="form-group">
        <label for="message">Project Details *</label>
        <textarea id="message" name="message" rows="6" required></textarea>
    </div>

    <button type="submit">Get Quote</button>
</form>

2. Newsletter Signup Forms

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST" data-basin-form>
    <div class="newsletter-signup">
        <h3>Subscribe to Our Newsletter</h3>
        <p>Get the latest updates and exclusive content delivered to your inbox.</p>

        <input type="email" name="email" placeholder="Enter your email address" required>
        <input type="hidden" name="signup_type" value="newsletter">
        <input type="hidden" name="source" value="<?php echo get_permalink(); ?>">

        <button type="submit">Subscribe</button>

        <p class="privacy-notice">
            By subscribing, you agree to our <a href="/privacy-policy">Privacy Policy</a>.
        </p>
    </div>
</form>

3. Event Registration Forms

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST" data-basin-form>
    <h3>Event Registration</h3>

    <div class="form-group">
        <label for="attendee_name">Full Name *</label>
        <input type="text" id="attendee_name" name="attendee_name" required>
    </div>

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

    <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel" id="phone" name="phone">
    </div>

    <div class="form-group">
        <label for="company">Company/Organization</label>
        <input type="text" id="company" name="company">
    </div>

    <div class="form-group">
        <label for="event_date">Event Date</label>
        <select id="event_date" name="event_date" required>
            <option value="">Select date</option>
            <option value="2024-03-15">March 15, 2024</option>
            <option value="2024-03-22">March 22, 2024</option>
            <option value="2024-03-29">March 29, 2024</option>
        </select>
    </div>

    <div class="form-group">
        <label for="dietary_requirements">Dietary Requirements</label>
        <textarea id="dietary_requirements" name="dietary_requirements" rows="3"></textarea>
    </div>

    <div class="form-group">
        <label>
            <input type="checkbox" name="agree_terms" value="yes" required>
            I agree to the <a href="/terms">Terms and Conditions</a>
        </label>
    </div>

    <button type="submit">Register for Event</button>
</form>

WordPress Theme Integration

Styling Forms to Match Your Theme

Create CSS that matches your WordPress theme:

/* WordPress theme-specific form styling */
.basin-form {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--wp--preset--color--background, #ffffff);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.basin-form .form-group {
    margin-bottom: 1.5rem;
}

.basin-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--wp--preset--color--foreground, #333333);
}

.basin-form input,
.basin-form select,
.basin-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--wp--preset--color--tertiary, #e0e0e0);
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.basin-form input:focus,
.basin-form select:focus,
.basin-form textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary, #007cba);
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1);
}

.basin-form button {
    background: var(--wp--preset--color--primary, #007cba);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.basin-form button:hover {
    background: var(--wp--preset--color--secondary, #005a87);
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .basin-form {
        margin: 1rem;
        padding: 1rem;
    }

    .form-row {
        flex-direction: column;
    }

    .form-group.half {
        width: 100%;
    }
}

Adding Forms to Theme Templates

Add forms directly to theme template files:

<!-- In page.php, single.php, or custom template -->
<div class="contact-section">
    <h2>Get In Touch</h2>

    <form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST" data-basin-form>
        <!-- form fields -->
    </form>
</div>

Email Notifications & Lead Management

Customizing Email Notifications

  1. Set Up Multiple Recipients: Configure different email addresses for different form types
  2. Custom Email Templates: Use Handlebars templating to create personalized notifications
  3. Auto-Responders: Set up automatic confirmation emails for form submitters

Lead Integration Options

Connect Basin submissions to your existing workflow:

  • CRM Integration: Use Zapier or webhooks to send leads to HubSpot, Salesforce, etc.
  • Email Marketing: Automatically add contacts to Mailchimp, ConvertKit, or other platforms
  • Google Sheets: Export form data directly to spreadsheets for analysis
  • Slack Notifications: Get instant team notifications when forms are submitted

Best Practices for WordPress + Basin

  1. Keep It Simple: Only ask for essential information to maximize conversion rates
  2. Test Thoroughly: Always test forms after WordPress or theme updates
  3. Mobile First: Ensure forms work perfectly on mobile devices
  4. Performance: Basin's lightweight approach won't slow down your WordPress site
  5. Security: Enable spam protection and use HTTPS for all form submissions
  6. Compliance: Include privacy policy links and GDPR compliance features
  7. Analytics: Track form performance and submission rates

Troubleshooting Common Issues

Form Not Submitting

  • Double-check your Basin endpoint URL
  • Verify the data-basin-form attribute is present
  • Check browser console for JavaScript errors

Email Deliverability

  • Confirm email notification settings in Basin dashboard
  • Check spam folders
  • Verify sender email addresses

Plugin Conflicts

  • Test with other plugins disabled
  • Check for JavaScript conflicts in browser console
  • Ensure BasinJS loads after jQuery if using theme functionality

Theme Compatibility

  • Test forms after theme updates
  • Verify CSS doesn't conflict with Basin's default styling
  • Check that form elements render correctly across different page templates

Ready to transform your WordPress forms? Sign up for Basin and experience reliable, powerful form handling that just works!