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)

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

HandyRepsHome-2

UPDATE: New post for Slider Revolution 5.x here.

Hello friends,

In this tutorial I will show you how to add a contact form into a Revolution Slider by ThemePunch. The contact form plugin I will be using is Contact Form 7 by Rock Lobster. Contact Form 7 is one of the most widely used wordpress forms, but this can work with any form that uses shortcodes. One might ask why would you want to place a form on a slider? Revolution Slider has a lot of great features and can be used in a lot of creative ways. The combination of layers and animations provides you with an easy way to create cool hero images. So lets get to it.

First, create a new form. The form can be as simple or complex as you need it, what is important is creating a container for your form. This can be achieved with a simple div tag with an id we can use to reference in our css.

Screen Shot 2015-07-10 at 12.02.01 AM

 

Now 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 {
  padding: 45px 45px 5px 45px !important;
  background-color: rgba(0, 0, 0, 0.7);
  width: 250px;
}

.wpcf7 p {
  padding-bottom: 10px;
}

#formContainer >
h3 {
  color: white;
  text-align: center;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"] {
  display: block;
  margin: 0;
  width: 100%;
  font-family: sans-serif;
  font-size: 18px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  padding: 10px;
  border: solid 1px #dcdcdc;
  transition: box-shadow 0.3s, border 0.3s;
}

.left {
  width: 48%;
  float: left;
}

.right {
  width: 48%;
  float: right;
}

.wpcf7-submit {
  background-color: rgb(250, 104, 57);
  color: white;
  margin-top: 30px;
  padding: 10px;
  font-size: 15px;
  border: none;
  width: 100%;
}

input[type="submit"] {
  border-radius: 25px;
}

Once your form is styled copy the form shortcode and proceed to the Revolution Slider plugin. Create a new slider or use an existing one. In the edit slides window create a new text layer. Place the shortcode in the text layer and position the text layer in the slider container.

You cannot see the form in the slider preview.

12

 

Save your changes and copy the Revolution Slider shortcode to your page. View the page to see your styled contact form in the slider. Adjust the position as necessary and test the form. Thats it, hope you found this helpful. Let me know if you have any ideas for ways to integrate forms in sliders.

HandyRepsHome-2