Having forms on a business website is important for interacting with customers and getting their feedback. Elementor, a popular page builder plugin, offers a user-friendly solution for building aesthetically pleasing and functional forms. However, the problem arises when people share information with you, such as details about movies or books. It can be challenging to turn that information into new posts without spending much time manually doing it.
Here’s where Elementor Addon Elements comes in, enhancing Elementor’s form widget in their pro version with efficient functionalities. These enhancements remove the need for users to create posts manually. When users fill out a form, the information they provide is used to create a post on the website. This feature also lets you capture and submit data from the front end using Elementor forms, saving you from the hassle of doing it manually. Additionally, we’ve introduced a taxonomy field type to help you organize and map your data more efficiently. To utilize these features, ensure you install the Advanced Custom Fields (ACF) plugin, as it leverages ACF to display values.
In this article, we’ll talk in detail about the new features added by Elementor Addon Elements to Elementor’s forms. These additions enhance how forms work. Before we dive into the details, it’s important to have the Advanced Custom Fields(ACF) plugin installed on your setup. It is essential as it enables the display of values within the created posts.
Table of Contents
Steps to Utilize the Elementor’s Form Enhancements
To make use of the new and latest features in Elementor forms, follow these steps for a clear understanding:
1. Creating a New Field Group with ACF
ACF (Advanced Custom Fields) uses field groups to connect fields to posts. Each field group has a title, specific fields, location rules, and visual settings.
Making new custom fields is super easy with ACF! It’s like using a simple plugin to build your unique custom fields. You can create as many fields as you want, each with its name, type, and settings. We organize these fields into groups so you can keep things tidy and choose where they show up on edit screens.
For demonstration, I’m setting up a field group called “Movies Details,” where I’ve included four fields: “Release Date, ” “Duration,” “Rating,” and “YouTube Video.”
Explore the article to learn more about Creating a Custom Field Group using ACF.
2. Creating ACF Taxonomies
In WordPress, Taxonomy is like organizing and grouping content types, such as categories and tags, on a website. It helps users navigate around the website easily and find the required content. Taxonomies in WordPress include categories, tags, and Custom taxonomies. They’re flexible and can be customized to meet specific website requirements. It provides a user-friendly interface in the admin area, allowing you to manage these labels, known as categories and terms, and easily assign them to posts.
Here, I am adding four taxonomies: “Actors,” “Certifications,” “Genres,” and “Directors.” Check this article to learn more about creating Taxonomies and Terms using ACF.
3. Creating Custom Post Types Using ACF
Custom Post Types in ACF allow you to create and manage different types of content on your WordPress website beyond regular posts and pages. This feature is useful when you need a specific structure for storing and displaying data, and ACF provides a user-friendly interface for handling these custom content types.
Here, I am creating a custom post type called “Movies.” Check the article for detailed instructions on creating custom post types and linking taxonomies using Advanced Custom Fields (ACF).
4. Adding an Elementor Form Widget
Once you’ve configured the Advanced Custom Fields (ACF) on your website, the next step is to add the “Form” widget that Elementor provides in its page builder. This widget enables you to make use of the new features introduced by Elementor Addon Elements.
5. Adding Taxonomy Field Type Using Elementor Form
We added a Taxonomy field type in the Form Fields settings, a powerful addition to Elementor’s Form widget. This feature allows you to seamlessly showcase and map form data to taxonomies and custom fields. When you use the taxonomy field type, the data you choose in the form will be intelligently linked to custom fields.
Here’s how to put it into action.
- Start by adding the Elementor’s Form widget to your webpage then you have to customize the form fields according to your requirements.
- Next, you have to choose one field as the taxonomy type, label it, and decide if it’s a mandatory field.
- Then, select the taxonomy for which you want to display data.
- After selecting the taxonomy, select how users will interact with the data fields. You can choose the radio button or checkbox to let them make a single choice or enable multiple selections if you need to pick more than one option.
In the example below, I’ve set up a practical and effective form using specific fields such as movie title, description, director, genre, etc., and given styling. Some of these fields have been configured as taxonomies to enhance the overall form setup.
6. Adding a Create New Post Feature
When you go to the Action After Submit settings in the Forms section, you’ll find various options like Email and Redirect. But now, there’s an exciting addition: The “Create New Post” feature. When you choose this option, a new setting section called “Create New Post” pops up.
This cool feature allows you to automatically generate a new post in your chosen custom post types when someone submits the form. It adds a handy way to turn form submissions directly into post content on your website. It can be useful for things like user-generated content, feedback forms, or any scenario where you want form submissions to become published posts effortlessly.
6.1 Create a New Post with Elementor Form
Once you select the “Create New Post” option under the Action After Submit setting, you need to set up the following, which is given below.
- Firstly, you must choose the post type you want to create a post when someone fills out the form. For example, I’m choosing the “Movies” post type I set up before.
- Next, you can decide the post status. It means you get to pick whether the newly generated post should be published immediately, saved as a draft, kept private, or set for pending review. It’s like deciding the initial state or visibility of the post once it’s created through the form submission.
- Then, you’ll need to input the post title and content. You can do this either manually or make it dynamic using shortcodes. These shortcodes can be obtained from the advanced settings of your form fields. Want to know more about how to get shortcodes? Learn here.
- After typing the title and content of your post, remember to include a shortcode for the post thumbnail image. This shortcode is essential for displaying the featured image associated with your post.
Adding Post Categories
- In the next step, organize the form data by grouping it into different categories using either category slug names or shortcodes. You can assign multiple categories simultaneously by clicking the “Add Item” button.
- For example, if you want to categorize data into “bollywood” and “hollywood,” you’ll use their respective category slugs. Category slugs are unique identifiers for each category. To find a category slug, refer to the provided link for instructions.
Adding Post Taxonomies
- Next, you need to include the post taxonomy details for the fields you specified in the form.
- To find the taxonomy slug, go to the Advanced Custom Fields (ACF) settings and locate the taxonomy section. This slug is like a unique identifier for the taxonomy. You can easily add one or more taxonomies using the “Add item” option.
In my case, let’s say the slug is “actor.” Then, add taxonomy terms either using the shortcode or slug. This information gets stored in the post you’re creating under post types. If you need clarification about finding the taxonomy and taxonomy term slug, you can refer to a helpful content below.
Adding Custom Fields
- After setting up the taxonomies, you need to share the specifics of your custom fields to handle data dynamically. It involves noting the custom field names you obtained in the ACF Field Groups section. After identifying the custom fields, you also need to insert shortcodes for the corresponding form fields.
- Next, you’re giving the information for which form field should provide the details to be stored in each custom field for creating a post. It’s a way of ensuring the information goes where it should.
For demonstration, I’m specifying the name of the custom field for the release date. After that, I’m including the shortcode for the form field I made earlier. If you have more form fields, you can do the same for each one, adding multiple custom fields based on the number of form fields to ensure all the data is sent correctly.
To discover the field name of custom fields, you can find step-by-step instructions here.
How to Find the Shortcode of Elementor Form Fields
Now, let’s discuss how to find shortcodes. Shortcodes help you to send data to specific fields. Look for these codes to connect your form fields with corresponding custom fields.
- To locate shortcodes, go to Form Fields, then access the advanced section of the field you’re interested in. Find the shortcode associated with that field for further use.
How to Find the Slug of Post Categories
- To discover the slug for a particular category assigned to a post, navigate to the custom post types section, such as “Movies.”
- Next, click on the “Categories” option. Here, you’ll find a list of all your created categories, each with a unique identifier called a slug.
- Here, the slug is usually displayed in a column labeled “slug.” Locate the category you’re interested in and copy its corresponding slug. It’s a straightforward way to identify and work with specific categories assigned to your posts, making organizing and managing your content more accessible.
How to Find Slug of ACF Taxonomy and Its Term
In the post-taxonomy section, the taxonomy slug and its terms help organize data. To find these, follow these simple steps:
Finding the Taxonomy Slug Using ACF
- To discover the slug for a taxonomy, go to the ACF menu and select “Taxonomies.”
- Once there, click on the specific taxonomy you’re interested in. Within the taxonomy details, you’ll find a unique identifier called the “Taxonomy Key.” Copy this key, and it can be used as the taxonomy slug.
Finding the Taxonomy Term Slug with ACF
- To find the slug for a taxonomy term, go to ACF and click “Taxonomies.”
- After selecting the taxonomies, you’ll see a column labeled “Term,” where the individual terms of the taxonomy are listed. Below, you’ll find numbers indicating the number of terms within that particular taxonomy.
- These numbers represent how many terms are associated with the taxonomy. Click on the number associated with a specific taxonomy to see the related terms.
- After clicking on the number, you can see there’s a column labeled “slug.” This slug is like a unique code for each term within that taxonomy. Copy this slug, and now you have a unique identifier for that particular term.
How to Find the Field Name of ACF Custom Fields
- To find the field name for custom fields in ACF, go to ACF and navigate to Field Group.
- Then, select the specific group you’re interested in. Inside that group, You’ll see a list of custom fields related to that group.
- Next, click on the field, such as “Duration” in the example. Click on it, and you’ll find the field name option. Copy this name to use it. This process helps you identify the unique identifier for each form field, making accessing and managing data in your posts easier.
Final Result
So far, we’ve explored the detailed workings of updating features, creating forms, and streamlining form submissions by automating post creation. Now, let’s see the result of our enhancements. We’ll observe how users submit forms on the website and how the collected details appear in the backend system.
This final overview gives us a comprehensive understanding of the upgraded system where users input information and the backend, where administrators can easily access and manage the submitted data. It’s a seamless process designed for efficiency and user-friendly functionality.
Frontend Elementor Form Submission
The form has 11 fields, including Text, Date, File Upload, Number, and Taxonomy. Users can choose from Checkbox and Radio options to select data in the Taxonomy field. Each field has a placeholder to guide users on the expected input. The form is designed for simplicity and user-friendliness, ensuring a smooth data entry experience.
Displaying Submitted Elementor Form Details on the Backend
After submitting the form, check the backend to see how the information appeared when creating a post. Once the form is submitted, we need to verify if the custom fields capture the entered details.
To confirm the post creation, go to the chosen custom post type; in my case, it’s “Movies.” Click on it to view the created post with the title you provided in the form.
This step ensures that the widget successfully processes and displays the submitted details in the designated custom post type, validating the creation of the post with the given information.
To see the submitted details of the form, edit the post. The information entered in the form appears in specific custom fields. Categories, taxonomy terms, and the featured image are also organized into their respective fields. It ensures that all submitted details are neatly organized for easy access and management.
Conclusion
In conclusion, the Elementor form enhancement through Elementor Addon Elements is a fantastic feature to supercharge your form submissions. This feature saves you time by eliminating the need for manual post creation and adds a user-friendly touch. The inclusion of the taxonomy field type makes content management a breeze.
Using either shortcodes or allowing manual data entry provides users with the flexibility to display information just the way they want. It streamlines the form-filling process and also boosts user satisfaction. Overall, using these enhancements makes the entire form experience more efficient.
