Divi Machine Classifieds – Part 7: Adding Advanced Forms with Divi Form Builder

The final and valuable installment of our series is here! In Part 7, we’ll be focusing on empowering users to become content creators on your Classifieds site. With the help of Divi Form Builder, we’ll craft a seamless interface that allows users to add and edit their classifieds posts. From the first step of choosing a category to the final touches on styling, we’ve got it all covered.

What to Expect in This Installment:

  • Divi Form Builder Overview: A foundational guide to understanding what Divi Form Builder can do for your site.
  • Form Step 1 – Classifieds Category: Designing a user-friendly method for choosing categories for posts.
  • Form Step 2 – Item Type: An intuitive selection process for classifying the type of item being posted.
  • Form Step 3 – Item Information: Crafting a form to collect all necessary details about the item.
  • Form Step 4 – Contact Person: A streamlined way to gather contact information for seamless communication.
  • Styling the Form: The artistic touch to make your form visually appealing and cohesive with your site’s design.
  • Adding a Custom Form Notice: Implementing user notifications to guide and inform throughout the form process.
  • Adding an Edit Classified Form: Allowing users to edit their posts with ease.

By the end of this tutorial, your Classifieds site will not only look great but will also provide a smooth and intuitive user experience, turning casual visitors into active participants. Divi Form Builder’s integration into our toolkit makes this process a breeze, letting you focus on creativity rather than complexity.

So, grab your digital toolkit, and let’s dive into the captivating world of form-building with Divi! It’s the final lap, but certainly not the least, as we add the final strokes to our Classifieds masterpiece.

Divi Form Builder Overview

In this lesson, we introduce you to Divi Form Builder and show you around the plugin and its settings.

GENERAL LINKS

Get Divi πŸ‘‰ https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts πŸ‘‰ https://diviengine.com/product/divi-m…

Get Divi Form Builder πŸ‘‰ https://diviengine.com/product/divi-f…

WordPress Reserved Terms πŸ‘‰ https://codex.wordpress.org/Reserved_…

Divi Machine Product Page πŸ‘‰ https://diviengine.com/product/divi-m…

Divi Machine Documentation πŸ‘‰ https://help.diviengine.com/article/6…

Lorem Ipsum Text πŸ‘‰ https://loremipsum.io/

Free Stock Images πŸ‘‰ https://unsplash.com/

Form Step 1 – Classifieds Category

In this lesson, we start building out Step 1 of our multistep form which will capture the classified category for the new post.

GENERAL LINKS

Get Divi πŸ‘‰ https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts πŸ‘‰ https://diviengine.com/product/divi-m…

Get Divi Form Builder πŸ‘‰ https://diviengine.com/product/divi-f…

WordPress Reserved Terms πŸ‘‰ https://codex.wordpress.org/Reserved_…

Divi Machine Product Page πŸ‘‰ https://diviengine.com/product/divi-m…

Divi Machine Documentation πŸ‘‰ https://help.diviengine.com/article/6…

Lorem Ipsum Text πŸ‘‰ https://loremipsum.io/

Free Stock Images πŸ‘‰ https://unsplash.com/

Form Step 2 – Item Type

In this lesson, we start building out Step 2 of our multistep form which will capture the type of item we are listing, and then we use conditional logic to display only the relevant status options for the item.

GENERAL LINKS

Get Divi πŸ‘‰ https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts πŸ‘‰ https://diviengine.com/product/divi-m…

Get Divi Form Builder πŸ‘‰ https://diviengine.com/product/divi-f…

WordPress Reserved Terms πŸ‘‰ https://codex.wordpress.org/Reserved_…

Divi Machine Product Page πŸ‘‰ https://diviengine.com/product/divi-m…

Divi Machine Documentation πŸ‘‰ https://help.diviengine.com/article/6…

Lorem Ipsum Text πŸ‘‰ https://loremipsum.io/

Free Stock Images πŸ‘‰ https://unsplash.com/

Form Step 3 – Item Information

In this lesson we will collect all the information for the item in the classifieds post we are creating.

GENERAL LINKS

Get Divi πŸ‘‰ https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts πŸ‘‰ https://diviengine.com/product/divi-m…

Get Divi Form Builder πŸ‘‰ https://diviengine.com/product/divi-f…

WordPress Reserved Terms πŸ‘‰ https://codex.wordpress.org/Reserved_…

Divi Machine Product Page πŸ‘‰ https://diviengine.com/product/divi-m…

Divi Machine Documentation πŸ‘‰ https://help.diviengine.com/article/6…

Lorem Ipsum Text πŸ‘‰ https://loremipsum.io/

Free Stock Images πŸ‘‰ https://unsplash.com/

Form Step 4 – Contact Person

In this lesson we give folks a way to get in touch with the person that posted the classified by having it collect the correct contact person on our Divi Classifieds site.

GENERAL LINKS

Get Divi πŸ‘‰ https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts πŸ‘‰ https://diviengine.com/product/divi-m…

Get Divi Form Builder πŸ‘‰ https://diviengine.com/product/divi-f…

WordPress Reserved Terms πŸ‘‰ https://codex.wordpress.org/Reserved_…

Divi Machine Product Page πŸ‘‰ https://diviengine.com/product/divi-m…

Divi Machine Documentation πŸ‘‰ https://help.diviengine.com/article/6…

Lorem Ipsum Text πŸ‘‰ https://loremipsum.io/

Free Stock Images πŸ‘‰ https://unsplash.com/

Styling the Form

Now that we have all the fields needed for our Divi post creation form, it is time to style the form to look great for people looking to submit a new classifieds post.

GENERAL LINKS

Get Divi πŸ‘‰ https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts πŸ‘‰ https://diviengine.com/product/divi-m…

Get Divi Form Builder πŸ‘‰ https://diviengine.com/product/divi-f…

WordPress Reserved Terms πŸ‘‰ https://codex.wordpress.org/Reserved_…

Divi Machine Product Page πŸ‘‰ https://diviengine.com/product/divi-m…

Divi Machine Documentation πŸ‘‰ https://help.diviengine.com/article/6…

Lorem Ipsum Text πŸ‘‰ https://loremipsum.io/

Free Stock Images πŸ‘‰ https://unsplash.com/

Adding a Custom Form Notice

In this lesson, we will show you how to use Divi Form Builder and the Divi Builder to create a custom form notice for users when they submit a new Classifieds post.

GENERAL LINKS

Get Divi πŸ‘‰ https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts πŸ‘‰ https://diviengine.com/product/divi-m…

Get Divi Form Builder πŸ‘‰ https://diviengine.com/product/divi-f…

WordPress Reserved Terms πŸ‘‰ https://codex.wordpress.org/Reserved_…

Divi Machine Product Page πŸ‘‰ https://diviengine.com/product/divi-m…

Divi Machine Documentation πŸ‘‰ https://help.diviengine.com/article/6…

Lorem Ipsum Text πŸ‘‰ https://loremipsum.io/

Free Stock Images πŸ‘‰ https://unsplash.com/

Adding an Edit Classified Form


In this lesson we leverage another feature in Divi Form Builder where you can have the owner of a created post edit that post or delete it with the Edit/Delete module.GENERAL LINKS

Get Divi πŸ‘‰ https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts πŸ‘‰ https://diviengine.com/product/divi-m…

Get Divi Form Builder πŸ‘‰ https://diviengine.com/product/divi-f…

WordPress Reserved Terms πŸ‘‰ https://codex.wordpress.org/Reserved_…

Divi Machine Product Page πŸ‘‰ https://diviengine.com/product/divi-m…

Divi Machine Documentation πŸ‘‰ https://help.diviengine.com/article/6…

Lorem Ipsum Text πŸ‘‰ https://loremipsum.io/

Free Stock Images πŸ‘‰ https://unsplash.com/

Final Thoughts

As we wrap up Part 7 of our Divi Machine Classifieds tutorial series, we can’t help but reflect on the journey we’ve taken together. From the first spark of an idea to a fully functional Classifieds site that empowers users to participate actively, this series has been a rich and rewarding experience.

This installment has enabled us to explore Divi Form Builder in-depth, bringing to life the forms that connect your site’s users with the ability to create and modify their content. The process was made simpler and more enjoyable thanks to Divi Form Builders’ seamless integration with Divi and its robust features.

We’ve come to the end of the work portion of our course, and what a ride it’s been! The next segment will close our series with some final thoughts, reflections, and acknowledgments. Whether you were with us from the beginning or joined partway through, we hope you found value, inspiration, and skills that will serve you well in your future Divi endeavors.

But before we officially close the book, let’s take a moment in our next segment to celebrate what we’ve achieved and look forward to where these newfound skills can take us. See you in the final thoughts, where we’ll bid our farewell to this fantastic tutorial series.

Available Tutorial Series Installments…

This will update as we release more tutorial installments in the series.
Check these out
Divi Machine Classifieds – Part 8: Final Thoughts
Divi Machine Classifieds – Part 7: Adding Advanced Forms with Divi Form Builder
Divi Machine Classifieds – Part 6: Creating a My Account Area
Divi Machine Classifieds – Part 5: Building the Classifieds Pages
Divi Machine Classifieds – Part 4: Creating and Styling Custom Loop Layouts
Divi Machine Classifieds – Part 3: Working with Custom Post Types in Divi
Divi Machine Classifieds – Part 2: Optimizing Divi and some Efficiency Tips
Divi Machine Classifieds – Part 1: Introduction to building a directory site with Divi and Divi Machine
*FREE* Divi Engine Plugin Tutorial Series: Divi Machine Classifieds

0 Comments

Submit a Comment

Explore more from Divi Engine