Celebrate WordCamp Asia! - 30% OFF with coupon WC30 at checkout - Terms

Build a WordPress Form with the ACPT 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.

ACPT is offering 30% off any plan to WS Form customers using coupon code: WS_FORM_30

ACPT is a plugin that allows you to create custom fields for any post type. WS Form can be fully integrated with custom fields created using ACPT.

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

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

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

ACPT repeater fields are fully supported when creating, populating and submitting forms.

Prerequisites

For this tutorial you will need the following plugins:

Create Fields in ACPT

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 ACPT offers, including groups and repeaters.

WS Form - Post Management - ACPT Integration - Add ACPT Fields

The following ACPT field types are supported in WS Form:

Basic

  • Checkbox
  • Editor
  • HTML
  • Number
  • Radio
  • Range
  • Select
  • Select (Multiple)
  • Text
  • Textarea
  • Toggle

Specialized

  • Address
  • Color
  • Country
  • Email
  • Date
  • Date / Time
  • Icon
  • Phone
  • Rating
  • Time
  • URL

Unit of Measure

  • Currency
  • Weight
  • Length

Media

  • Embed
  • File
  • Gallery
  • Image
  • Video

Grouped

  • Repeater

Relations

  • Post
  • Post (Multiple)
  • Relationship
  • Term
  • Term (Multiple)
  • User
  • User (Multiple)

If you add a Repeater field in ACPT, that field will be converted to a repeatable section in WS Form. When that form is submitted the repeated rows will be populated in the post at rows in ACPT. WS Form also supports the above field types in repeatable sections.

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 - Post Management - ACPT Integration - Add 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. Note that the Post template has an ACPT icon on it indicating that custom fields have been found for that post type. We’re going to choose the Post template.

WS Form - Post Management - ACPT Integration - Add Form - Post Management TemplatesAfter 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 ACPT fields, fully configured according to your ACPT 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 ACPT. WS Form sets the width of fields to match your ACPT configuration settings.

WS Form - Post Management - ACPT Integration - Edit 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 ACPT fields by using a Post Management action.

To edit the field mappings:

  1. Click the Actions icon at the top of the layout editor.WS Form - Actions Icon
  2. Click the gear icon next to the Post Management action.WS Form - Actions - Edit Action
  3. Scroll down to the Field Mapping and ACPT Field Mapping.WS Form - Post Management - ACPT Integration - Field Mapping
  4. Adjust the field mappings as required then click Save & Close. For more information about field mapping, see our Post Management knowledge base article.

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

Likewise, relational fields in ACPT such as Post and Term 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 - Post Management - ACPT Integration - Preview Form

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 - Post Management - ACPT Integration - View 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 ACPT that have also been populated.

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

Pre-Populating a Form with ACPT Custom Fields

In addition to creating posts, WS Form can also pre-populate forms using ACPT 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 - Post Management - ACPT Integration - Populate - Post ID Setting

Below that, you will find the field mappings.

WS Form - Post Management - ACPT Integration - Populate - Field MappingThese allow you specify which post and ACPT 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 - Post Management - ACPT Integration - Preview Form

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 ACPT!