How to Use the Cyber Monday Artist Layout Pack to Create a Multi-Step Form for Quote Requests

Our Biggest Discount Of Of All Time

Cyber Monday only comes once a year, and when it does, we like to do something really special. Today we are offering 25% OFF EVERYTHING, the biggest discount we have ever given. This discount has only ever been offered once before (during last year’s Black Friday and Cyber Monday sale), and it won’t be back again until next year. It wont be available for long, and once the sales have ended you will have to wait a whole year for it to come back (so don’t miss out)!

INCLUDES 6 EXCLUSIVE LAYOUT PACKS

Everyone who takes advantage of our Cyber Monday sale will also get exclusive access to 6 Cyber Monday Divi Layout Packs. These are world-class designs built by our very own Divi design team. They are the perfect way to jump-start your next Divi websites, and they are only available to Black Friday and Cyber Monday customers and current Lifetime members. Once the sale is over, these layouts won’t be available ever again!

This year, getting yourself a Cyber Monday Deal means getting a ton of free stuff too! Besides enjoying a 25% discount, everyone who buys a new Elegant Themes Membership or upgrades their existing account (or who already has a Lifetime Membership) will also receive 6 free and exclusive layout packs that are ONLY available for download during our Cyber Monday sale.

A Look Inside the Exclusive Cyber Monday Layout Pack for Artists

One of the exclusive layout packs we’re providing you with as Lifetime Members and new Cyber Monday customers is the Artist Layout Pack. It consists of 5 beautiful pages that will help you engage with your visitors in ways that convert them to customers.

Contact Page Design

Get the Exclusive Cyber Monday Layout Pack for Artists

Before getting into this use case, you will need to lay your hands on the exclusive Cyber Monday Artist Layout pack which you can get by becoming a new Elegant Themes Member, upgrading your existing account, or by already being a Lifetime Member with us. If you are indeed already a Lifetime Member you can log in to our members’ area and download all of our exclusive layout packs here. Everyone else will need to use the button below to buy or upgrade before they can follow along with the rest of our tutorial.

How Use The Cyber Monday Artist Layout Pack to Create a Multi-Step Form for Quote Requests

For the remainder of this post, we’ll assume you’ve either taken advantage of our Cyber Monday deal or that you are already a Lifetime Member and have access to the Artist Layout Pack.

Once you’ve downloaded the new Artist Layout Pack from our members’ area you can watch the video below to see just how easy it is to set up. We would also encourage you to follow along with this tutorial to get your site ready for further customization.

In the sections below I’ll be showing you how you can create a multi-step contact form on your Divi powered website that has the exclusive Artist Layout Pack installed on it. But, before we dive into the use case, let’s take a look at what our result will look like. To create the following result, we’ll be using Divi, the exclusive Cyber Monday Artist Layout Pack and the Multi-Step Form plugin.

Part 1: Install The Multi-Step Form Plugin

Step 1: Download The Multi-Step Form Plugin

The first thing you will need to do is download the free Multi-Step Form plugin which you can find on the following page.

Step 2: Upload & Activate The Plugin

Once you’ve downloaded the plugin, go ahead and add it to your WordPress website by going to Plugins > Installed Plugins > Add New. Make sure you activate the plugin as well so it’ll appear on your sidebar.

Part 2: Create Your Form

Step 1: Plugin Settings

Before adding a form to your plugin, you’ll have to change the settings of your plugin. To do that go to Multi-Step Form > Settings. Then, apply the following changes:

Progress Bar: Enable

Boxed Layout: Enable

Active Step Color: #be895f

Visited Step Color: #bfa99a

Next Step Color: #6b737f

Button Color: #be895f

Step 2: Add New Form

Once your plugin settings are done, you can add a new form by going to Multi-Step Form > Add New.

Step 3: Create Different Steps

The interface of the Multi-Step Form plugin is very user-friendly. It allows you to add different steps to your form manually and you can drag elements to the sections of each step. Depending on the different questions you’d like to ask your potential customers, you can add up to three steps. If you want to add more steps, you’ll have to switch over to the paid version. However, you don’t want to overwhelm them so preferably choose 2 or 3 steps.

Step 3: Complete Titles, Headlines & Descriptions of Each Step

Then, start adding the step title, headline, description and section title to each one of the steps. Besides the step description, the other fields are required.

Step 4: Add Elements to Steps

Once you’ve added the different steps and completed all of the required fields, you can start adding the elements to your sections by dragging them into the section or clicking on ‘Add Element’. The Multi-Step Form has all the elements you need:

Radio/CheckBox

Select/Dropdown

Text field

Email

File Upload

Textarea

Date

Paragraph

The file upload, in particular, is a very interesting option. It allows your visitors to upload the exact design they’re looking for. Besides, you can also make each element required, depending on your needs.

Step 5: Form Settings

Lastly, go to the Form Settings tab. To activate the form, you’ll have to add the email address where you want to receive the forms and the subject you want each email to have.

Part 2: Add The Form to Your Contact Page

Step 1: Open Contact Page with Visual Builder

Now that you’ve created the form, it’s time to add it to your contact page. The first thing you will need to do is enable the visual builder on the contact page.

Step 2: Clone Title Text Module & Image Module

Then, clone the Title Module and Image Module within the first column.

Step 3: Change Text Module Color & Place Both Modules in Second Column

Once that’s done, you can place both modules in the second column, change the copy of the Text Module and the color to ‘#EFE8DE’.

Step 4: Replace Contact Form Module with Text Module

Moving on, we’re going to remove the Contact Form Module and replace it with a Text Module. This Text Module will help us add the form shortcode to our page.

Step 5: Copy Form Shortcode

Then, go back to your plugin and copy the shortcode of the form you’ve created in the previous part of this post.

Step 6: Place Shortcode in Text Module

Once you’ve cloned the shortcode, you can directly paste it into the Content Box of your Text Module.

Step 7: Save & Exit Page

Lastly, save and exit the contact page.

Part 3: Customize Form with Additional CSS

Not all of the changes you might want to make are built-in. After having made all of the built-in modifications to match the artist layout pack, our result looks like this:

To make some additional changes, we’re going to add some CSS code lines. The CSS code lines will make our form look like this:

Step 1: Open Theme Customizer

While still being on the Contact page, open the Theme Customizer and navigate to Aditional CSS.

Step 2: Add CSS Code

Then, copy the following lines of CSS code and paste them into the Custom CSS box:

Final Thoughts

This use case is part of our Cyber Monday Deal where we share 6 FREE limited edition layout packs with Cyber Monday customers and lifetime members. By joining our empowered community during these days and becoming a member, you’ll get:

Our Biggest Discount Of Of All Time

Cyber Monday only comes once a year, and when it does, we like to do something really special. Today we are offering 25% OFF EVERYTHING, the biggest discount we have ever given. This discount has only ever been offered once before (during last year’s Black Friday and Cyber Monday sale), and it won’t be back again until next year. It wont be available for long, and once the sales have ended you will have to wait a whole year for it to come back (so don’t miss out)!

INCLUDES 6 EXCLUSIVE LAYOUT PACKS

Everyone who takes advantage of our Cyber Monday sale will also get exclusive access to 6 Cyber Monday Divi Layout Packs. These are world-class designs built by our very own Divi design team. They are the perfect way to jump-start your next Divi websites, and they are only available to Black Friday and Cyber Monday customers and current Lifetime members. Once the sale is over, these layouts won’t be available ever again!

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you're looking for someone to help you tell your company's story, she'll know how to handle it.

Check Out These Related Posts

Over the past few weeks, the new Divi transform options have helped spark our creativity. One of the best things about the transform options is the visual “pop” that comes with using it. With just a few tweaks, you can change the overall user experience of any module, row, section or...

Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level.
This week, as part of our ongoing Divi design initiative, we’re going to show you...

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new, free Divi Layout Pack from our design team to you.
For this week, Kenny and his team have created a beautifully polished Actor CV Layout Pack. This pack...

6 Comments

Sooo I have been a paying member of this site for years and I don’t get access to these?

Tyler
December 26, 2017

Why not just upgrade to lifetime if you have been paying for years?

Frank
December 1, 2017

Is adding the CSS code to the Custom CSS box of the theme customizer the best way? Or would this not affect the styling of each additional contact form created by using this plugin? Should the code be added to the respective page or to a child theme instead? What needs to be added to the code to limit it to the one unique contact form created?