Marketing · Gutenberg
Split Form block for WordPress
Side-by-side lead generation section — content (heading, text, feature bullets) on one side and a fully configured email / sign-up form on the other.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Side-by-side lead generation section — content (heading, text, feature bullets) on one side and a fully configured email / sign-up form on the other.
Inspector panels on this block: Layout, Content Panel, Form Panel. Those titles come from index.js, not from a shared template.
Behavior controls: “Content Side” options: Left, Right; “Split Ratio” options: 50 / 50, 55 / 45, 45 / 55, 60 / 40, 40 / 60; “Method” options: POST, GET.
Where to find it
Gutenberg inserter → Marketing → search “Split Form” (block name `blockenberg/split-form` in block.json). Style it in the sidebar after insert.
How to use Split Form block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Split Form”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout. Set “Content Side”, “Split Ratio”, “Border Radius (px)”, “Padding Top (px)”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Content Side | Select control; the chosen value is saved on the block. Options: Left; Right. block.json default: left. Saved as `contentSide`. |
| Split Ratio | Select control; the chosen value is saved on the block. Options: 50 / 50; 55 / 45; 45 / 55; 60 / 40; 40 / 60. block.json default: 50-50. Saved as `splitRatio`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 0. Saved as `borderRadius`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–240. block.json default: 60. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–240. block.json default: 60. Saved as `paddingBottom`. |
| Use Image instead of colour | On/off toggle in the inspector. Off by default. Saved as `useImage`. |
| Dark overlay on image | On/off toggle in the inspector. On by default. Saved as `imageOverlay`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Show Eyebrow | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Show Bullet List | On/off toggle in the inspector. On by default. Saved as `showBullets`. |
| Show Form Title | On/off toggle in the inspector. On by default. Saved as `showFormTitle`. |
| Form Title | Text field in the inspector. block.json default: Subscribe for free. Saved as `formTitle`. |
| Form Sub-text | Text field in the inspector. Saved as `formSubtext`. |
| Name Field | On/off toggle in the inspector. On by default. Saved as `showName`. |
| Name Placeholder | Text field in the inspector. block.json default: Your name. Saved as `namePlaceholder`. |
| Email Placeholder | Text field in the inspector. block.json default: Your email address. Saved as `emailPlaceholder`. |
| Phone Field | On/off toggle in the inspector. Off by default. Saved as `showPhone`. |
| Phone Placeholder | Text field in the inspector. block.json default: Phone (optional). Saved as `phonePlaceholder`. |
| Submit Label | Text field in the inspector. block.json default: Subscribe now →. Saved as `submitLabel`. |
| Form Action URL | Text field in the inspector. block.json default: #. Saved as `formAction`. |
| Method | Select control; the chosen value is saved on the block. Options: POST; GET. block.json default: post. Saved as `formMethod`. |
| Show Privacy Note | On/off toggle in the inspector. On by default. Saved as `showPrivacy`. |
| Privacy Note | Text field in the inspector. block.json default: We respect your privacy. Unsubscribe anytime.. Saved as `privacyNote`. |
| Success Message | Text field in the inspector. block.json default: 🎉 You're in! Check your inbox.. Saved as `successMsg`. |
| Input Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `inputRadius`. |
| Button Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `btnRadius`. |
| Outer Background | Color control in the inspector. block.json default: #1e1b4b. Saved as `bgColor`. |
| Content Panel BG | Color control in the inspector. Saved as `contentBg`. |
| Form Panel BG | Color control in the inspector. block.json default: #ffffff. Saved as `formBg`. |
| Eyebrow | Color control in the inspector. block.json default: #a5b4fc. Saved as `eyebrowColor`. |
| Content Heading | Color control in the inspector. block.json default: #ffffff. Saved as `headingColor`. |
| Content Text | Color control in the inspector. block.json default: #c7d2fe. Saved as `subtextColor`. |
| Bullet Text | Color control in the inspector. block.json default: #c7d2fe. Saved as `bulletColor`. |
| Bullet Icon | Color control in the inspector. block.json default: #818cf8. Saved as `bulletIconColor`. |
| Form Heading | Color control in the inspector. block.json default: #111827. Saved as `formHeadingColor`. |
| Input BG | Color control in the inspector. block.json default: #f9fafb. Saved as `inputBg`. |
| Input Border | Color control in the inspector. block.json default: #d1d5db. Saved as `inputBorder`. |
| Input Text | Color control in the inspector. block.json default: #111827. Saved as `inputColor`. |
| Submit Button BG | Color control in the inspector. block.json default: #6366f1. Saved as `btnBg`. |
| Submit Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
| Privacy Note | Color control in the inspector. block.json default: #9ca3af. Saved as `privacyColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Side-by-side lead generation section — content (heading, text, feature bullets) on one side and a fully configured email / sign-up form on the other — that is the job of Split Form, not a generic content block.
- Use it when you need the editor control labeled “Content Side”, which exists on this block’s inspector.
- It matches pages about form, lead, split.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Split Form block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Split Form”. It sits under Marketing. After insert, open Layout and set “Content Side”, “Split Ratio”, “Border Radius (px)”, “Padding Top (px)”.
What makes Split Form different from other Blockenberg blocks?
Side-by-side lead generation section — content (heading, text, feature bullets) on one side and a fully configured email / sign-up form on the other. Inspector labels on this block include “Content Side”, “Split Ratio”, “Border Radius (px)”, “Padding Top (px)”.
Is the Split Form Gutenberg block free?
Yes. Split Form ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Split Form to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Layout, Content Panel, Form Panel).
Related marketing blocks
Multi-Step Form
A wizard-style multi-step lead capture form with step indicator, per-step fields, and success message.
Feature Alternating
Zigzag alternating feature rows — image on one side, feature list + CTA on the other. Pairs alternate left↔right automatically.
Feature Split
Elegant two-column section — rich content (badge, headline, body, feature list, CTAs) paired with an image. The essential landing page block.
Newsletter Popup
Email capture popup that triggers on scroll, time delay, or exit intent. Cookie-based dismissal, image support, and success state.
Newsletter Signup
Email opt-in form that stores subscribers via the built-in /subscribe REST endpoint.
Split Benefits
A split section with an image on one side and a benefits checklist, headline, and CTAs on the other. A cornerstone landing page pattern.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Split Form from the Gutenberg inserter.