Page Builder Summit Limited Time Offer - 20% OFF! Use coupon PBS20 - View Details

< Back

How to Use WordPress Block Patterns to Build a Signup Page

How to Use WordPress Block Patterns to Build a Signup Page

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/

WordPress Block Pattern Directory
The WordPress Block Pattern Directory

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.

WS Form PRO - Add New Form

Next we’ll choose the ‘Newsletter Signup’ template from the ‘Signup’ category. Click ‘Use Template’

WS Form - Add New - Newsletter Signup

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.

WS Form - Publish a Form

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’.

WS Form - Add Page

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.

WS Form - Insert a WordPress Block Pattern

Next, click the ‘Pattern’ tab and then choose ‘WS Form’ from the dropdown list.

WS Form - Block Pattern Category

Finally, choose one of the WS Form block patterns.

WS Form - Choose a Block Pattern

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’.

WS Form - Sign Up Page Example

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.

< Back

Rapid, Responsive, Accessible, No-Code WordPress Forms