How to add a Contact Form 7 to Slider Revolution 5.x (WordPress)

screencapture (3)

Hey there!

This post is a follow up to this post “How to add a contact form 7 to slider revolution”. I received a lot of requests for this tutorial to be updated for the new version of slider revolution that has had a lot of updates since its 5.0 release.

This tutorial assumes you are familiar and have the following installed on your wordpress site:

Lets begin!

Step 1: Create a form


Once you have contact form 7 plugin installed you will see the following icon on the left nav bar in the wordpress admin panel.

Screen Shot 2016-05-08 at 6.53.56 PM

Create a new form or edit an existing one. The form can be as simple or complex as you need it.

Screen Shot 2016-05-08 at 7.14.16 PMNow we need to apply css styles to the container. Look at the example code below to see how I used Contact Form 7 classes to style the form elements. You want to set a width for you container. For more information about styling Contact Form 7 forms click here. You can place your CSS anywhere you see fit but if you are unsure you can check your theme’s options for a place to input custom CSS. If you are using a child theme you can add it to your child theme’s stylesheet.

.wpcf7 {
background: rgba(0,0,0,0.3);
padding: 30px !important;
text-align: center;
box-sizing: border-box;
width: 260px;
}

.wpcf7-form-control {
color:#000 !important;
}

.wpcf7 h3 {
margin-bottom: 20px;
}

.wpcf7-submit {
width: 100% !important;
-moz-box-sizing:border-box !important;
-webkit-box-sizing:border-box !important;
box-sizing:border-box !important;
text-align: center !important;
background-color: #FFBF50 !important;
border-color: #FFBF50 !important;
}

::-webkit-input-placeholder {
color: #000;
}

:-moz-placeholder { /* Firefox 18- */
color: #000;
}

::-moz-placeholder { /* Firefox 19+ */
color: #000;
}

:-ms-input-placeholder {
color: #000;
}

Once your form is styled copy the form shortcode and proceed to the Slider Revolution plugin.

Screen Shot 2016-05-08 at 7.25.40 PM

Screen Shot 2016-05-08 at 7.59.37 PM

Step 2: Create a slider


Create a new slider or use an existing one.

Screen Shot 2016-05-08 at 7.27.56 PM

In the slider settings give your slider a name and an alias. Make note of the shortcode for your slider because you will need it shortly (you can always come back to this page to get the shortcode).

In the slide editor > main background tab, select the Main/Background Image radio button (should be default on a new slide) and then the change image button. Upload a background image for your slider. At this point you can customize your slider as you see fit. I just used a simple background image for this demo.

Screen Shot 2016-05-08 at 8.01.29 PM

Once you have a cool background, scroll down to the slider editor preview area. Select the blue add layer button and select Text/Html. This is where you place the contact form 7 shortcode.

Screen Shot 2016-05-08 at 7.36.19 PM

Screen Shot 2016-05-08 at 7.39.47 PM

Now this is a little tricky because you will not see your form in the preview to position it. The solution is simple but might annoy some of you out there. Save your slider and copy the shortcode.

Create a new page and place in your slider shortcode and hit publish or preview changes. You should now see your form sitting nicely on top of your slider. Adjust the position as necessary and test the form.

That’s it! I hope you found this tutorial helpful. Thank you to everyone that read and shared my previous post. Your feedback is most welcome.

screencapture (3)