How to use ACF in Post Creation Form

ACF lets you add extra custom fields to your WordPress page or posts. Fluent Forns ACF integration feature works only when a Post Form is created using Fluent Forms.

ACF aka Advanced Custom Fields helps to deal with the users’ custom field data and then make it visible for your site’s visitors.

This simple guide demonstrate how to apply this feature with Fluent Forms.

The first thing you need to do is to create a Post Form(Learn how to create a post form using Fluent Forms). Otherwise, you can use an existing post form that contains all the required Post Fields.

In this tutorial, the post form has two fields; Post Title and Post Content.

The next step is to create the Custom Fields using the Advanced Custom Fields plugin. So, make sure you have this plugin installed beforehand. Now go to the plugin and click on the Add New button, to add a new Field Group.

add_fieldgroup

Then give a suitable title for your Field group. In this example, the field group is named My First Post. That has two Text type of custom fields called Post Reviewer & Post Moderator. These two fields are basically General custom fields. After adding your Field Label and Field Type you have to click the Add Field button. Then just click on Publish/Update to save the fields.

Now, let’s go back to the form that was created at the beginning. Here, you need to add two fields with the respective Label & Form Type in the ACF fields. So, you can choose the Dropdown, Simple Text, or any other Form Type you want. For demonstration purposes, we used the dropdown for both the Post Reviewer and Post Moderator fields & also added the options for the fields. Then remember to Save the form.

Here’s the interesting part, as it’s time to connect the ACF fields into your fluent form. To do this first, go to the Settings & Integrations tab and click on the Post Creation option. Where you can add your feed by clicking the Add Post Feed button. Otherwise, if you already have the Post Feed created then you can click the Settings icon on the right side.

After that, a bunch of Post feed options will appear. Here you can enter your Feed Name, Post Status, Comment Status, etc. Scroll down to the Post Fields Mapping section. This is where you can map the Form Fields according to the Post Fields. Further details about this are discussed in the Create Post Form documentation.

Next, go to the Advanced Custom Fields (ACF) Mapping section. In General Fields section, there is an ACF Field on the left side & Form Field on the right side. The ACF Field shows the available ACF Fields, and the Form Field indicates the particular field for that form. First, choose the Post Reviewer field & then select the Post Reviewer’s shortcode in the Form Field. Click the Add Another General Field button to add another row for a new field.

Then just add the ACF Field & Form Field in the same way as before. And click the Save Feed button.

Now let’s create a new post on the form & submit it. Then go back to the Post that was added after the form submission.

Form values on Preview Mode

You will notice the Custom Post Fields with the Field Values appearing in your Post editor. Look at the screenshot below to get a better idea.

Field Values on Post Editor

Advanced Field

Now let’s show you how to integrate an Advanced custom field into your Fluent Form’s post. Go back to the Custom Fields and create another Custom field. The field label Is it an Affiliate post? is used as an example & the Field Type is Checkbox. Then in the Choices option, two options i.e Yes and No have been added. Click the Add Field button to save this field. Lastly, click the Publish button.

Next, go back to the Post form and create a checkbox field there. Select the Checkbox Field from the General Fields section. Then add the label which is the same as the Advanced field’s label. In the Options part, click on the Bulk Edit button. Here you have to copy the choices that were added in the custom field & then paste it into the Options editor. Click on the Confirm button and Save the form.

Field Values in the Option editor
Field Values in the Option editor

Now after saving the form settings, go to the Settings & Integrations tab to connect the Advanced Fields into the form. Then click on the Post Creation option on the left sidebar. You can see that the Post Feeds is already Enabled, here click on the Settings icon to set the Advanced Field.

Then scroll down to the Advanced ACF Fields section. Here you can select the ACF Field from the left side & Form Field from the right side of the section. After that, click the Save Feed button.

Now, let’s go to the post form and create another post and submit it on the Preview Mode. Then go to your Posts and click on the post that you just created. You can see that the checkbox field with the value appearing at the bottom of your post.

Form Values on Preview Mode
Field Values on Post Editor

So, this is how you can use ACF Fields with Fluent Forms.

Was this article helpful to you?

6 1

How can we help?

Please submit a support ticket if you have any question or pre-sale questions. Our Customer support engineers will answer your query as soon as possible

Open a support ticket