How To Create an ACF Frontend Form [No Code!]

Looking to use Advanced Custom Forms on your WordPress site but don’t know how to code? This guide will help you create an ACF frontend form in no time!

Advanced Custom Fields (ACF) is a powerful tool.

With the ability to customize your fields and build your forms exactly how you want, your possibilities are almost endless.

But there’s one problem. You have to code to get your ACF forms on the front end of your website.

Or do you?

This post will show you how to create an ACF frontend form in WordPress with no code effortlessly! And it’s all done using Formidable Forms — the perfect ACF form builder and the best WordPress form plugin.

Let’s get into it.

What’s wrong with using the Advanced Custom Fields frontend form?

Actually, there’s nothing wrong with using ACF to create your Advanced Custom Fields frontend form!

ACF is a powerful tool; if you know how to code in PHP, you can create unique forms quickly. But it's time consuming and there are better ways to use your time.

Just check out this ACF form example code below:

So, you have two options:

1. Code your ACF frontend forms yourself
2. Let the Formidable Forms WordPress plugin do all the hard work for you

While we have a team of excellent developers here at Formidable who save us time, we imagine you don’t have that time.

So, we’ll focus on option #2 today for our Advanced Custom Fields frontend form tutorial.

Want to update an ACF repeater field with no code? How to update repeater fields in ACF

How to display ACF frontend form with Formidable

To get started, you’ll need a few things:

1. Formidable Forms Business plan
2. ACF plugin (free or pro)

Get Formidable Forms now!

To use some of the more advanced fields with the ACF frontend, the pro version is required. However, for basic fields, you can use the free version.

If you want more info, be sure to check out our ACF Knowledgebase docs!

So, after you install and activate Formidable Forms, go to Formidable → Add-ons and click the Install button for the ACF Forms.

Then, it’s just a few easy steps:

Let’s get started.

Step 1: Create ACF form fields

For our example, we have a bird-watching blog named Here Birdie Birdie.

We want a way for users to create new posts using their bird-watching submissions. Basically, their submissions will automatically display as custom posts from the frontend.

Alright, let's create a few fields for users to enter information:

1. Name
2. Date
3. Time
4. List of birds seen
5. Additional comments

The first thing we want to do is head into ACF to customize the fields.

Luckily, Formidable supports mapping for 19 different ACF field types. So, you’ve got plenty of options.

To do this, go to Custom Fields → Field Groups and click Add New.

Next, you can add your fields by clicking the Add Field button.

So, we’ll create the fields listed above and customize them to fit our needs.

We'll use an ACF Repeater field to make it easier for visitors to show all the birds they saw. The repeater field allows users to add or remove as many entries as they want.

We’ll use a Dropdown (Select in ACF) field in these fields so the visitor can choose from a list of birds. We’ll also add a number field to enter how long they saw each bird.

Feel free to customize this to your own needs. But, to get more advanced features (like the Repeaters, you must purchase ACF Pro).

Once you’re finished, click Save Changes.

Step 2: Create your ACF frontend form in Formidable

Now, we’ll create the form that will show on the front end of your website.

So, go to Formidable → Forms in your WordPress admin panel.

Next, click Add New at the top of the page, then choose to start from a Blank Form or one of Formidable’s templates.

Feel free to select the option that’s best for your situation. We’ll start with a Blank Form to customize it to our liking.

Next, give your form a name, then click Create.

The plugin will take you to Formidable's drag and drop form builder, where you can add any form elements. Name, email, number, address — you name it, it’s here.

Since we already created our form fields in ACF, we just have to add matching fields to make it easy to connect them.

We added a field at the top so users can name their blog posts to make them unique!

Once you’ve finished creating your form, click Update to save your changes. 

Nothing reminds you of the 90s more than losing everything you created because you didn’t save.

Step 3: Map your fields

Now that we’ve created our form, we must enable ACF field mapping. 

So, click the Settings tab at the top of the page, and go to Actions & Notifications.

Next, choose the Create Post action to customize how the form fields will display.

In the Create Post form action, scroll down to the Custom Fields section and click the Map form fields to Advanced Custom Fields toggle.

Choose your ACF field group from the dropdown, and begin mapping your custom fields with the Formidable fields by clicking Add.

Also, if you use a repeater field, you must match the repeaters correctly and the sub-fields.

Once you’ve mapped your fields, click Update to save your changes.

And that's it! Users can now submit their entries to your WordPress ACF frontend form, and your ACF and Formidable Forms fields will map and send the information.

From here, you can display the information on the frontend with a View or use a theme that supports ACF, then edit the post, post title, content, and more!

What else can this ACF frontend form plugin do?

Formidable may seem like a simple form builder for ACF, but it’s much more than that.

With dozens of ACF form functions, template files, and compatibility with all the top themes (including Elementor), Formidable does it all.

And it’s got plenty of additional features and options to supercharge your form:

• Multi-step forms, quizzes, and conversational forms
• Multiple spam protection options
• Built-in Visual Form Styler
• 100+ form templates
• Formidable Views

These are just a few of the features you get. And they’re pretty great if we do say so ourselves.

So, with how easy it is to put an ACF form on the frontend and the wealth of features you get, what are you waiting for?

Formidable is ready to take your website up a notch today.

Ready to make your ACF front form?

If you were wondering, “How do I add an ACF field to the frontend?” You’ve now got your answer.

With Formidable’s simple no-code solution, you can get up and running in minutes. And this post showed you exactly how to do it.

Whether you use WordPress ACF pro or the free version, Formidable is the perfect partner plugin.

Ready to get started? Grab Formidable Forms now and get it on your website. Or, maybe you're wondering how you would update an ACF field from the frontend? In that case, we have the perfect ACF update guide for you!

Get ACF front end forms now!

And follow us on Facebook, Twitter, and YouTube for more incredible WordPress tips & tricks.

Read more about WordPress forms!

• How To Add Age Restrictions to WordPress Forms [No Code!]
  Read More

  How To Customize a Form in WordPress [The Easy Way!]
  Read More

  How To Add a WordPress Contact Form Phone Number Field
  Read More