Build a WordPress Form With the Meta Box PluginPRO

This knowledge base article relates to the WS Form Post Management add-on. Included with the Agency edition or buy separately for other editions.

In this tutorial, we’ll show you how to integrate WS Form PRO with the Meta Box plugin. You’ll learn how to create a form that can create a WordPress post that contains custom fields configured in Meta Box.

Meta Box is a plugin that allows you to create custom fields, post types and taxonomies. WS Form can be fully integrated with custom fields created using Meta Box.

By using WS Form you can develop powerful, mobile friendly forms that have any layout in place of this basic functionality.

In this tutorial we’re going to create a form that will create a new blog post when it is submitted. These same instructions can be used to create any other post types such as pages or products.

When used with the WS Form Post Management Add-On you can:

  • Automatically create forms that contain the fields you have made in Meta Box for any post type.
  • Automatically populate select, checkbox, radio and button groups with the choices you have configured in Meta Box.
  • Push form submissions as new posts that are fully compatible with Meta Box.
  • Pre-populate forms using post data that includes Meta Box fields.

Meta Box group fields are fully supported when creating, populating and submitting forms.

Prerequisites

For this tutorial you will need the following plugins:

Create Fields in Meta Box

First, we’re going to create some custom fields that will appear when we edit a post in WordPress. We can choose any of the field types that Meta Box offers, including groups and key value fields.

WS Form Meta Box Tutorial - Creating Meta Box Fields

You can find some helpful resources on how to configure Meta Box here.

The following Meta Box field types are supported in WS Form:

Basic

  • Button
  • Button Group
  • Checkbox
  • Checkbox List
  • Hidden
  • Password
  • Radio
  • Select
  • Select Advanced
  • Text
  • Textarea
  • URL

Advanced

  • Autocomplete
  • Color Picker
  • Custom HTML
  • Date Picker
  • Datetime Picker
  • Google Maps
  • Image Select
  • Key Value
  • oEmbed
  • jQuery UI Slider
  • Switch
  • Time Picker
  • WYSIWYG Editor

HTML 5

  • Datetime Local
  • Email
  • Month
  • Number
  • Range
  • Phone Number
  • Week

WordPress

  • Post
  • Taxonomy
  • Taxonomy Advanced *
  • User

Upload

  • File
  • File Advanced
  • File Input
  • File Upload *
  • Image
  • Image Advanced
  • Image Upload *
  • Single Image
  • Video

Layout

  • Divider
  • Heading
  • Group
  • Tab

* Recommended

Tips

When creating Meta Box fields for WS Form, the following tips will help:

  • To create a repeater, use the Meta Box Group field. WS Form supports all of the above field types in groups up to one level.
  • For map fields, we support the Google Maps field type.
  • For uploads, we recommend using the File Upload and Image Upload fields. For File Upload fields in WS Form, we recommend using DropzoneJS as the type and Media Library as the file handler.
  • When using Tabs, you should start a field group with a Tab field to ensure Meta Box renders the tabs correctly.

Create a Form

Next, we’re going to create a form in WS Form. To do this, we click on ‘Add New’ in the ‘WS Form’ menu.

WS Form Meta Box Tutorial - Add New Form

Because we have the Post Management add-on installed, you’ll see that we have a ‘Post Management’ tab. If we click on that tab it will show us templates for each post type registered in WordPress. We’re going to choose the ‘Post’ template.

WS Form Meta Box Tutorial

After you click on a template, WS Form automatically creates a form for you. WS Form will:

  • Add basic post fields (title, excerpt and featured image).
  • Add Meta Box fields, fully configured according to your Meta Box settings.
  • Add taxonomy term selectors (e.g. Category and Tags on posts).

At the top of the form is a section that includes standard fields we would expect to see for a post, such as the title, content an excerpt. In addition to that it has created fields and sections for all of the custom fields we created with Meta Box. WS Form sets the width of fields to match your Meta Box configuration settings.

WS Form Meta Box Tutorial - New Form

You can edit the form in exactly the same way as you would any other form. For example, you can resize fields, resize sections and even split the form up across multiple tabs. All of the functionality of the WS Form layout editor is available to you.

Field Mapping (Optional)

When the form is submitted, the fields on your form are used to create a post in WordPress. WS Form automatically creates field mappings for you if you use a template.

The fields are mapped to either WordPress or Meta Box fields by using a ‘Post Management‘ action.

WS Form - Meta Box - Field Mapping

To edit the field mappings:

  1. Click the ‘Actions’ icon at the top of the layout editor.
  2. Click the gear icon next to the ‘Post Management’  action.
  3. Scroll down to the ‘Field Mapping’ and ‘Meta Box Field Mapping’.
  4. Adjust the field mappings as required then click ‘Save & Close’.

Fields such as selects, checkboxes and radios pull their choices dynamically from Meta Box. This means that if you change a choice in Meta Box it will automatically update on your form.

Likewise, relational fields in Meta Box such as ‘Post Object’ and ‘User’ fields are also updated dynamically.

Preview The Form

Now let’s test the form. To do that we simply click the ‘Preview’ button.

WS Form Meta Box Tutorial - Preview and Populate via the Debug Console

You’ll notice in our preview window that we have the WS Form debug console open. This is a really great feature for testing forms and allows you to populate a form in a single click. Every time you click ‘Populate’ the form is populated with different data. There’s even a ‘Populate & Submit’ button which lets you populate the form with data and submit it.

View The Post

Now that the form is submitted, let’s take a look at how that looks in WordPress.

First, we’ll click back to the WordPress admin. Then we’ll click on ‘Posts’ in the WordPress menu.

And there is our new post that was created by WS Form.

WS Form Meta Box Tutorial - Post

If we click on the post, we can see that the post title, excerpt and content have been populated from the form. Below that you can see the custom fields created in Meta Box that have also been populated.

WS Form supports integration with all of the core Meta Box field types.

Pre-Populating a Form with Meta Box Custom Fields

In addition to creating posts, WS Form can also pre-populate forms using Meta Box custom fields. To demonstrate this, we’ll go back to the layout editor for the form we just created. Next, we click on the form settings icon at the top of the layout editor.

Then we click on the ‘data’ tab. From here we configure WS Form to populate the form using the data from an existing WordPress post. In this example, we’ll set WS Form to use the ID of the post we just created.

WS Form Meta Box Tutorial - Form Populate

Below that, you will find the field mappings.

WS Form Meta Box Tutorial - Field Mapping

These allow you specify which post and Meta Box fields will be mapped to which WS Form field. You’ll notice that because we created this form from a template, all of the fields are already mapped for us, so all we need to do is click ‘Save & Close’. Then we click ‘Preview’ to view the form.

WS Form Meta Box Tutorial - Preview and Populate via the Debug Console

The form has been populated with the data from the post and is ready for editing.

And that’s how easy it is to integrate WS Form with Meta Box!