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.
You can find some helpful resources on how to configure ACF here.
The following ACF field types are supported in WS Form:
- Button Group
- Post Object
- Page Link
- Date Picker
- Date Time Picker
- Time Picker
- Color Picker
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:
- Click on ‘Add New’ in the WS Form admin menu.
- Click the ‘Post Management’ tab.
- Click on a post type (we’ll click on ‘Post’ in this tutorial).
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.
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.
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.
To edit the field mappings:
- Click the ‘Actions’ icon at the top of the layout editor.
- Click the gear icon next to the ‘Post Management’ action.
- Scroll down to the ‘Field Mapping’ and ‘ACF Field Mapping’.
- Adjust the field mappings as required then click ‘Save & Close’.