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 know how 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.
Let’s get into it.
What’s wrong with using the Advanced Custom Fields front end 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, if you don’t know how to code, you’re left scratching your head at the foreign language in front of you.
Just check out this ACF form example code below:
So, you have two options:
- Learn to code and create your frontend forms with ACF
- Let Formidable Forms do all the hard work for you
While we have a team of excellent developers here at Formidable, we imagine you don’t.
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:
- Formidable Forms Business plan
- ACF plugin (free or pro)
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 have their bird-watching submissions that will automatically display as a custom post type on the blog.
Alright, let's create a few fields for users to enter information:
- Name
- Date
- Time
- List of birds seen
- 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 need to 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’ll have to 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!
And follow us on Facebook, Twitter, and YouTube for more incredible WordPress tips & tricks.
How To Create a Number Range Slider in WordPress
13 Best Jotform Alternatives for Your Website
How To Save Custom Form Data Into a Database in WordPress
Leave a Reply