Menu Close

Form block

The Blocksify Form block places a saved, reusable form on a page, with synced fields, validation, submit actions, and styled messages. Place it inside a Section block or Container block when the form needs page layout around it.

At a glance

Page blockblocksify/form
Reusable formA saved form that can be placed on more than one page.
FieldsField blocks edited inside the saved form.
SettingsSubmit actions, messages, and styling that travel with the saved form.
Submit checksDuplicate-submission protection, server validation, spam-bot checks, and instant validation feedback.
Free actionsEmail and Mailchimp.

Where to find it

  1. Open the block inserter and choose Blocksify → Form. The Form placeholder appears on the page.
  2. Choose Select existing to reuse a form, or Create new to create a saved reusable form and attach it to the page.
  3. Select the form or a field inside it to edit fields, styling, actions, and post-submit messages.
The Form placeholder shows Select existing and Create new actions for attaching a reusable form to the page.

When to use it

Use Form when the same form should appear on more than one page or template. The page keeps only the selected form reference, so editing the saved form updates every placement that uses it.

Review the Editor tour if you are new to selecting nested Blocksify controls. Before publishing a live form, confirm the site meets the plugin requirements.

Reusable form model

A placed Form block points to a saved reusable form. Blocksify displays that saved form’s fields wherever the Form block is placed.

Form partWhy it matters
Selected formEach placement can choose which saved form to show.
Field setFields sync across every placement of that form.
Settings and actionsEmail, Mailchimp, redirect, and messages stay with the reusable form.
Submitted data linkOther plugins, such as an entries add-on, can save each submission against this saved form.

Field types

Blocksify includes nine field blocks. Fields stay inside the Form even when you use another layout block to arrange them, and each field uses its Name in submissions and integrations.

SettingDescription
Text FieldCollects single-line free text.
Email FieldCollects email addresses with email validation.
Textarea FieldCollects longer messages, with rows controlled by the field settings.
Select FieldLets a visitor choose one option from a menu.
Radio FieldShows a set of choices and allows one selection.
Checkbox FieldShows a group of checkbox options.
Accept FieldCollects required acceptance or consent.
reCAPTCHA FieldAdds Google reCAPTCHA spam protection.
Submit ButtonSubmits the form and is limited to one per form.

Field settings include label, placeholder, required state, required text, help text, default value, responsive width, and type-specific controls such as options or textarea rows.

Set up reCAPTCHA before using reCAPTCHA Field. Both v2 and v3 are supported.

  1. Go to Blocksify → Settings → Integration and open reCAPTCHA.
  2. Choose the reCAPTCHA version.
  3. Enter the reCAPTCHA site key and reCAPTCHA secret key.
  4. When using v3, set the reCAPTCHA v3 score threshold.
  5. Return to the form and select the reCAPTCHA Field. Its panel shows setup guidance; the version and keys remain in Settings → Integration.
The reCAPTCHA field panel explains v2 and v3 behavior and points to Blocksify → Settings → Integration.

Validation and submit behavior

When a visitor submits the form, Blocksify checks the fields immediately and verifies them again before running any submit action.

A selected Form field shows Required and Required text settings with a Back-to-Form control in the inspector.

Blocksify checks required, email, acceptance, and reCAPTCHA fields and applies duplicate-submission and spam-bot protection. Invalid fields show an inline error message, are announced to screen readers, and get focus automatically so visitors can fix them.

Submit actions

Blocksify runs each action you add, such as email, Mailchimp, and more when Pro or another plugin adds them. If a configured action fails, the form shows its error message instead of redirecting.

ActionWhat it does
EmailSends submitted field values to configured recipients, with subject, sender, Reply-To, CC, BCC, and send-as-HTML options.
MailchimpSubscribes the first email field to the selected audience through Mailchimp’s Marketing API.
RedirectResolves an HTTPS redirect URL after successful submit, or leaves the success message visible when empty.
  1. Go to Blocksify → Dashboard → Settings → Integration and open Mailchimp.
  2. Enter the Mailchimp API key.
  3. Return to the form, choose an audience, and set the double opt-in option. Only users who can edit posts can fetch the audience list.
The Form Settings actions list shows Email and Mailchimp action rows for configuring form submission behavior.

Post-submit messages

The Form Settings panel includes 3 sticky message rows: Success, Error, and Validation. These rows cannot be added or deleted, but each row opens a popover for text, icon, and styling.

The Form Settings Messages list shows Success, Error, and Validation rows with a popover for editing message text, icons, and styling.
Open a message row to edit that state without changing the other post-submit messages.

Styling

The Styling panel applies a consistent design across the saved form. It contains Form Wrapper, Labels, Inputs, Placeholder, Submit Button, Required mark, Help text, and Error text sections.

Use Hide label on a field to hide its visible label while keeping the label available to screen readers. The Placeholder section controls placeholder typography and color.

  • Typography, Color, and Background.
  • Border, Border Radius, and Box Shadow.
  • Layout, Margin, Padding, and Sizing.
  • Position and Z-Index.

These are the styling parts available for Submit Button; this surface does not include a CSS-classes setting.

The Form Styling panel shows the Submit Button section with Layout, Position, and Z-Index parts.

The submit block also has icon styling. These controls support the responsive and hover editing model.

Tips

  • Create one reusable form for each real workflow, such as contact, newsletter, or support request.
  • Use clear field names because submissions and actions reference fields by name.
  • Keep the Email action if the form should notify the site owner, or remove it for Mailchimp-only newsletter forms.
  • Test required fields, invalid email values, spam checks, and success messages before publishing.

Was this helpful?

0

Updated