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

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.

Download The Exclusive Layout Before It Disappears!

Already a Lifetime Member? You can download the pack right now, no need to partake in 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.

Landing Page Design

Download The Exclusive Layout Before It Disappears!

Already a Lifetime Member? You can download the pack right now, no need to partake in our Cyber Monday sale!

Gallery Page Design

Download The Exclusive Layout Before It Disappears!

Already a Lifetime Member? You can download the pack right now, no need to partake in our Cyber Monday sale!

Studio Page Design

Download The Exclusive Layout Before It Disappears!

Already a Lifetime Member? You can download the pack right now, no need to partake in our Cyber Monday sale!

About Page Design

Download The Exclusive Layout Before It Disappears!

Already a Lifetime Member? You can download the pack right now, no need to partake in our Cyber Monday sale!

Contact Page Design

Download The Exclusive Layout Before It Disappears!

Already a Lifetime Member? You can download the pack right now, no need to partake in our Cyber Monday sale!

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.

Download The Exclusive Layout Before It Disappears!

Already a Lifetime Member? You can download the pack right now, no need to partake in our Cyber Monday sale!

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:

#multi-step-form .fw-wizard-step-header h2 {
display: none;
}

#multi-step-form h2.fw-step-part-title {
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
color: #302418;
}

#multi-step-form .fw-step-part {
background:#EFE8DE;
}

#multi-step-form .fw-btn-submit {
background:#BE895F;
}

#multi-step-form p.fw-step-summary-title {
color: #BE895F;
}

#multi-step-form p.fw-step-summary {
color: #EFE8DE;
}

#multi-step-form .fw-toggle-summary {
background:#EFE8DE;
}

 

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:

• 25% OFF EVERYTHING
• All of the 6 layouts packs for free
• Access to our awesome themes and plugins
• Bonus Prizes

Seize the opportunity and become a member today by going to our Cyber Monday Deal Page.

The post How Use The Cyber Monday Artist Layout Pack to Create a Multi-Step Form for Quote Requests appeared first on Elegant Themes Blog.