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

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2017/12/4 22:00:00″,timeZone:-8,style:”crystal”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:!0,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:!0,displayHour:!0,displayMinute:!0,displaySecond:!0,displayLabel:!0})})

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!

Click Here To Purchase A New MembershipClick Here To Upgrade Your Current AccounClick Here To Renew Your Expired Account

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.

multi-step form

Landing Page Design

multi-step form

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

multi-step form

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

multi-step form

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

multi-step form

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

multi-step form

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.

multi-step contact form

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.

multi-step contact form

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.

multi-step contact form

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

multi-step contact form

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.

multi-step contact form

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.

multi-step contact form

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.

multi-step contact form

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.

multi-step contact form

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.

multi-step contact form

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.

multi-step contact form

Step 2: Clone Title Text Module & Image Module

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

multi-step contact form

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’.

multi-step contact form

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.

multi-step contact form

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.

multi-step contact form

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.

multi-step contact form

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:

multi-step contact form

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:

multi-step contact form

Step 1: Open Theme Customizer

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

multi-step contact form

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;
}

 

multi-step contact form

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.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN2″).jCountdown({timeText:”2017/12/4 22:00:00″,timeZone:-8,style:”crystal”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:!0,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:!0,displayHour:!0,displayMinute:!0,displaySecond:!0,displayLabel:!0})})

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!

Click Here To Purchase A New MembershipClick Here To Upgrade Your Current AccounClick Here To Renew Your Expired Account

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.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: