Formidable Forms

Formidable Forms

  • Features
  • Templates
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Formidable Team / Last Updated August 14, 2023

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!

How to create an ACF frontend form

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.

Get Better Forms FREE!
 

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:

ACF's frontend forms require coding knowledge

So, you have two options:

  1. Learn to code and create your frontend forms with ACF
  2. 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

Subscribe on YouTube

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:

  • Step 1: Create ACF form fields
  • Step 2: Create your ACF frontend form in Formidable
  • Step 3: Map your fields

    Let’s get started.

    Step 1: Create ACF form fields

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

    Here Birdie Birdie ACF example website

    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:

    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.

    ACF form add field

    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.

    ACF fields in WordPress

    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.

    ACF dropdown choice

    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.

    Click to make a new WordPress form with Formidable Forms

    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.

    Create a WordPress form drag-and-drop builder

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

    Example bird-watching form made in WordPress with ACF

    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.

    The option for creating a post for front end WordPress editing.

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

    ACF form create a post action

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

    Map your ACF fields to your Formidable fields

    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 Forms ACF frontend form plugin

    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 create a number range slider in WordPress How To Create a Number Range Slider in WordPress
      Read More
      Best Jotform alternatives 13 Best Jotform Alternatives for Your Website
      Read More
      save custom form data to database WordPress How To Save Custom Form Data Into a Database in WordPress
      Read More

    Using WordPress and want to get Formidable Forms for free?

    Get Formidable Forms Lite Now

    Get Email Updates

    This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Popular Resources

      • How To Create a Searchable Database on a WordPress Site
      • How To Create a Custom Calculator in WordPress [6 Steps!]
      • How To Create a Fitness Tracker in WordPress
      • Formidable Views: The Best WordPress Custom Application Plugin
      • How To Require Email To Download Files in WordPress
      • How to Create a WordPress Forms Drop Down List
      • Best Gravity Forms Alternative for WordPress: Formidable Forms vs. Gravity Forms
      • WPForms Alternative: Formidable Forms vs. WPForms Compared

    Take on bigger projects Right Now

    Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

    Get the most advanced WordPress form plugin and the only form builder with integrated Views.

    Get Formidable Forms Now

    Resources

    • Community
    • Affiliates
    • Contact
    • Free Online Form Builder

    Top Features

    • Application Builder
    • Calculator Plugin
    • Surveys & Polls
    • Quiz Maker
    • Form Templates
    • Application Templates
    • Directory Plugin
    • Donation Plugin

    Company

    • About Us
    • Giving Back
    • Careers
    • Newsletter
    • WP Tasty
    • Nutrifox

    Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
    Privacy Policy | Terms of Service | Sitemap

    Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews