ACF Integration with WS Form PROPRO

Advanced Custom Fields (ACF) is a WordPress plugin which allows you to add extra content fields to your WordPress edit screens. These extra content fields are more commonly referred to as Custom Fields and can allow you to build website’s faster and educate your client’s quicker.

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

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

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

Here’s how to create a form that creates a post using ACF fields:

1. Create ACF Fields

Use the ACF plugin to create fields for your post type. In this tutorial we’ll create ACF fields for the regular WordPress post (blog article) type.

WS Form - ACF - Create Fields

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

The following ACF field types are supported in WS Form:

Basic

  • Text
  • Textarea
  • Number
  • Range
  • Email
  • URL
  • Password
Content

  • Image
  • File
  • WYSIWYG
Choice

  • Select
  • Checkbox
  • Radio
  • Button Group
  • True/False
Relational

  • Post Object
  • Page Link
  • Relationship
  • Taxonomy
  • User
jQuery

  • Date Picker
  • Date Time Picker
  • Time Picker
  • Color Picker
Layout

  • Message
  • Tab
  • Group
  • Repeater

If you add a ‘Repeater‘ field in ACF, 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 ACF. WS Form supports all field types in repeatable sections.

2. Create a Form

The quickest way of creating a form containing your ACF fields is use the Post Management templates. To do this:

  1. Click on ‘Add New’ in the  WS Form admin menu.
  2. Click the ‘Post Management’ tab.
  3. Click on a post type (we’ll click on ‘Post’ in this tutorial).

WS Form - ACF - Create Form

Once you click on the template WS Form will automatically create a form for you. WS Form will:

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

If the ACF fields including select, checkbox, radio or button groups, WS Form will create a data source so that if the choices in a corresponding ACF field change this will be reflected in your form automatically.

3. Edit Your Form

Once the form is created you can edit the form in any way you wish using the layout editor.

4. Preview Your Form

To preview your form, simply click the ‘Preview’ button at the top of the layout editor.

WS Form - ACF - Field Example

The figure above illustrates how your ACF settings are reflected on your form. So, for example, if you add a new option to a ‘Select’ field, that option will be reflected on your form. This is done using an ACF data source and these are automatically created for you when the template is used.

5. Mapping

When the form is submitted, the fields on your form are used to create a post in WordPress. The fields are mapped to either WordPress or ACF fields by using a ‘Post Management‘ action.

WS Form - ACF - 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 ‘ACF Field Mapping’.
  4. Adjust the field mappings as required then click ‘Save & Close’.