WordPress setup

Before you start

• An account with WordPress

Set it up

1. Install the plugin. Plugins → Add New in WordPress, or upload the release zip. Activating it adds one settings page and nothing else — no tables, no files.
2. Connect your workspace. Settings → API keys in SendBeam, one key per site so you can revoke one without disturbing the others. Paste it into the plugin and the header says Connected.
3. Place a form. Add the block to any page, or use a shortcode. Forms are chosen by name from your workspace, so nothing has to be copied across and a change you make in SendBeam shows on the site straight away.

Code

With the plugin: block or shortcode

Any post, page or widget

Settings → SendBeam
  Default signup form:  8f3c1a2e-…   (Forms → your form → Embed in SendBeam)
  Contact form:         2c9d4e1b-…
  Pop-up form:          8f3c1a2e-…   Show on: single posts · Open: after 5 s · Hidden for a day once closed

Block editor:  add the "SendBeam Form" block (search "SendBeam"); it uses the default form until you paste another ID.

Shortcodes, anywhere shortcodes work:
[sendbeam_form]                                   the default signup form
[sendbeam_form id="8f3c1a2e-…" height="640"]      a specific form, taller
[sendbeam_contact]                                the contact form
[sendbeam_popup_button label="Subscribe"]         a button that opens the pop-up form

// Optional: count a signup in analytics
document.addEventListener('sendbeam:submitted', (e) => gtag('event', 'newsletter_signup', { form: e.detail.formId }));

Settings → SendBeam holds the default signup form, the contact form and the pop-up settings; the block and shortcodes fall back to those, so most sites only ever type a form ID once.

With the plugin: the site’s own email

Settings → SendBeam → Site email

Settings → SendBeam → Site email
  [x] Send this site's email through SendBeam
  API key:       sb_…                    (Settings → API keys in SendBeam, permission: Send site email)
  From name:     Example Shop            (optional)
  From address:  orders@example.com      (optional; must be on a verified domain)
  [x] Fall back to the server's own mailer if SendBeam cannot send

// Or keep the key out of the database: wp-config.php
define( 'SENDBEAM_API_KEY', 'sb_…' );

// Then "Send a test email" on the same page. From here on, every wp_mail() —
// WooCommerce orders, password resets, Contact Form 7 notifications, plugin
// alerts — is one POST to https://sendbeam.io/api/v1/transactional with the
// x-api-key header. The "Recent site email" table on the page shows each result.

Site email needs only the Send site email permission (transactional:send); listing your forms in the settings screen and the block wants Forms (read), and the opt-in box wants Contacts and Lists (write). Recipients need not be contacts; unsubscribed people still get their receipts; addresses that bounced before are refused. Messages with attachments stay with the server’s mailer for now.

Without the plugin: signup form in a Custom HTML block

Gutenberg → Custom HTML

<!-- Gutenberg → add a "Custom HTML" block and paste. Replace the form ID. -->
<form id="sb-newsletter">
  <label for="sb-email">Email</label>
  <input id="sb-email" name="email" type="email" required autocomplete="email">
  <div style="position:absolute;left:-9999px" aria-hidden="true">
    <input name="YOUR_FORM_CHECK_FIELD" type="text" tabindex="-1" autocomplete="off">
  </div>
  <button type="submit">Subscribe</button>
</form>
<p id="sb-status" role="status" aria-live="polite" hidden></p>
<script>
(function () {
  var form = document.getElementById('sb-newsletter');
  var status = document.getElementById('sb-status');
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    var data = { email: form.email.value, YOUR_FORM_CHECK_FIELD: form.YOUR_FORM_CHECK_FIELD.value };
    fetch('https://sendbeam.io/api/forms/YOUR_SIGNUP_FORM_ID', {
      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
    }).then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
      .then(function (res) {
        status.hidden = false;
        status.textContent = res.ok && res.j.success ? res.j.message : (res.j.error || 'Something went wrong.');
        if (res.ok && res.j.success) form.hidden = true;
      });
  });
})();
</script>

The form’s own embed code (Forms → your form → Embed code in SendBeam) does the same thing with inline styles and is kept up to date with the form’s fields; this version is the minimal hand-written equivalent.

Contact Form 7 hook

functions.php

<?php
/**
 * functions.php (or a small mu-plugin): after Contact Form 7 sends its own
 * email, also post the visitor to a SendBeam form. Use a SIGNUP form ID to
 * subscribe them, or a CONTACT form ID to get the message in SendBeam too.
 * Server-side calls send no Origin header, so leave "Allowed sites" empty
 * on this form, or it will answer 403.
 */
add_action('wpcf7_mail_sent', function ($contact_form) {
    $submission = WPCF7_Submission::get_instance();
    if (!$submission) return;
    $data = $submission->get_posted_data();

    $email = sanitize_email($data['your-email'] ?? '');
    if (!is_email($email)) return;

    wp_remote_post('https://sendbeam.io/api/forms/YOUR_SIGNUP_FORM_ID', [
        'timeout' => 8,
        'headers' => ['Content-Type' => 'application/json'],
        'body'    => wp_json_encode([
            'email'      => $email,
            'first_name' => sanitize_text_field($data['your-name'] ?? ''),
            // For a CONTACT form ID, send these instead of first_name:
            // 'name' => ..., 'subject' => ..., 'message' => ...,
        ]),
    ]);
});

Field names (your-email, your-name) are CF7’s defaults; match them to your form. With the plugin installed you do not need this: switch the form on in its SendBeam tab instead. The same wp_remote_post pattern works from other form plugins’ hooks.

Things to know

• Form plugin connections are set per form, and only send people who ticked the consent field you name or who filled in a form you mark as a signup form.
• Forms make no requests from your server: the visitor’s browser loads them from sendbeam.io. Site email is the one server-side call, to POST /api/v1/transactional over HTTPS, and only when you switch it on. Both are in the plugin’s external-service disclosure.
• Site email is metered like every send (monthly quota, hourly ceiling) and appears in the workspace’s email log; a recipient who is also a contact sees it on their activity page.
• A site can listen for the sendbeam:submitted event on document to record a signup as an analytics goal or redirect to a thank-you page.
• Block themes and classic themes both accept the block and the Custom HTML block; for a sidebar or footer use Appearance → Widgets with a Shortcode or Custom HTML block.
• Server-side hooks send no Origin header, so a form used from PHP must have an empty Allowed sites list; SendBeam’s own submission checks and limits still apply.

← Back to the WordPress integration