This tutorial is also available in video form: https://www.youtube.com/watch?v=gxN5X54LNuk
Introduction
In this tutorial, we’ll explore the new Nestable Form Widget for Elementor. This powerful feature allows you to add any Elementor widget into your form, providing unprecedented flexibility. You can also integrate Advanced Custom Fields (ACF) and drag and drop fields into any order you prefer.
Features Overview
The Nestable Form Widget offers several advantages:
- Add any Elementor widget into your form.
- Integrate ACF fields seamlessly.
- Drag and drop fields and place them wherever you like, providing complete control over the form layout.
Getting Started
- Activate Nested Elements for Elementor
- Navigate to your WordPress dashboard.
- Go to Elementor → Settings.
- Click on the Features tab and scroll down to find Nested Elements.
- Activate it, then save changes.
- Creating a New Post Form
- On your desired page, search for the New Post Form widget.
- You’ll find two versions: the old one and the new *nestable post form. Drag the *nestable one onto your page.
- By default, the form includes fields for post title, featured image, post content, and excerpt.
- Adding More Fields
- To add more fields, click Add Item and select your desired field types.
- You can integrate ACF Fields by selecting the ACF Field option. You can choose from text fields, image fields, or custom fields from ACF.
- Customizing the Form
- You can fully customize the look of your form by heading to the Style tab.
- Adjust the styling for fields, labels, and submit buttons according to your design preferences.
- Drag and Drop Fields
- Unlike previous versions, the new Nestable Form allows you to rearrange fields by dragging and dropping them.
- You can also add other Elementor widgets, such as images or text blocks, directly into the form.
Advanced Layout Customization
- Side-by-Side Layout
- To create a side-by-side field layout, add a Container widget and place your fields inside.
- Duplicate fields and adjust the settings for each widget (e.g., removing a custom image from one while keeping the custom text in another).
- Adjust the container settings to Horizontal to display the fields side by side.
- Field-Specific Customizations
- For each field, you can manage specific settings such as:
- Show Label: Toggle the field label on or off.
- Required: Make fields mandatory.
- Placeholder vs. Default Value: A placeholder appears as a hint in the field but won’t submit as data, whereas a default value is pre-filled and will be submitted.
- Prepend: Add a symbol or text before the field input (e.g., a dollar sign).
- Character Limit: Set a maximum character limit for text-based fields.
- Validation: Customize error messages and validation logic.
- Featured Image Field Options
- For the featured image field, you can set a default image.
- Configure advanced validation options such as allowed file types (e.g., JPEG, PNG), and set minimum/maximum file size and dimensions.
Conclusion
The new Nestable Form Widget for Elementor offers a highly flexible way to create custom forms, integrating with ACF fields, and providing drag-and-drop functionality. The possibilities are endless with the ability to add widgets, arrange fields, and customize validation.
Stay tuned for more updates and improvements, and don’t forget to like, subscribe, and leave a review on WordPress.org!
Let me know if you’d like any changes to this article.