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