What Are WordPress Block Patterns?
The WordPress Editor (formerly codenamed Gutenberg) is used for creating posts and pages on your website. WordPress pages are made up of blocks. WordPress Blocks are components that you use to add various types of content such as headings, paragraphs and images.
In WordPress 5.8 block patterns were introduced. WordPress block patterns are collections of predefined blocks that you can insert into posts and pages and then customize with your own content.
WordPress have a growing directory of block patterns available here: https://wordpress.org/patterns/
In addition to the WordPress block pattern directory, WS Form comes with a collection of blocks that you can use with your forms.
This tutorial demonstrates how to build a quick and easy signup page for your website.
Create a Form
We’re going to need a form for our signup page. We’ll use a WS Form form template to do this.
First, we click ‘Add New’ from the WS Form admin menu.
Next we’ll choose the ‘Newsletter Signup’ template from the ‘Signup’ category. Click ‘Use Template’
WS Form will then build the form for you. We’ll publish the form so it is ready to be used on the website. To do this, simply click the ‘Publish’ button at the top of the layout editor.
Our form is ready to use!
Create a Page
Now that we have the form ready, let’s create the signup page.
To do that, we click on ‘Pages’ in the WordPress admin menu, then click ‘Add New’.
Add a Block Pattern
After adding a page title (e.g. Newsletter Signup), we’re going to add a block pattern to the page. Click the ‘+’ block inserter icon.
Next, click the ‘Pattern’ tab and then choose ‘WS Form’ from the dropdown list.
Finally, choose one of the WS Form block patterns.
In this tutorial we’ll choose a block pattern that includes a left hand image panel and a WS Form block on the right into which we’ll be adding the newsletter form we created earlier.
Adjust the Block Pattern
The great thing about block patterns is that you can edit any of the blocks inside the pattern just as you would any other block on the page. In this example we simply click the left hand pane to choose a media library image. You can upload or choose an existing media item.
In the right pane is the WS Form block. Click on this and then use the settings sidebar to choose the Newsletter form we created earlier.
Publish and View
Simply publish your page and then click ‘View Page’.
And that’s it! You’re ready to start collecting email addresses.
Integration
You may wish to hook up your form to your favorite email marketing platform or CRM. That’s easy to do with WS Form. Check out the WS Form add-on page to learn about the available integrations.
