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

22 Comments

  1. A most excellent tute.

    Been looking for a solution like this for ages, works perfectly. I can now cease tearing my hair out.

    Many thanks
    Kris

    Reply

  2. Is it possible to have a button in Revolution Slider and when it is clicked, show the contact form (still using Contact form 7)? Many thanks!

    Reply

    1. sure, youll have to link to a second slide, though. means – button on slide #1, simple link to a slide, than slide 2 starts.

      Reply

  3. Where do you put the CSS?

    Reply

    1. Hi Johan,

      If your theme supports custom css you can place it there, this can be found in theme options. If you use a child theme you can place the css in the child theme style.css file. Finally you can add it to the main style.css file. Multiple options, depends on where you want to manage your css.

      Reply

  4. Excelente, me ayudo mucho. Gracias!

    Reply

  5. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for
    quite some time and was hoping maybe you would have some experience with something like this.

    Please let me know if you run into anything. I
    truly enjoy reading your blog and I look
    forward to your new updates.

    Reply

  6. You can also add the css code to the custom css field inside revolution slider setting. Worked for me!

    Nice tutorial BTW

    Reply

  7. Thanks so much for the tutorial. The issue I am having is that when I put the shortcode on as a text layer and save it I see the form appearing in the preview, but the slider images disappear when I go to the page. Have you encountered this problem?

    Reply

    1. No I have not I have actually had the opposite where I could not view it in the preview but I would see it on the rendered page. Also this tutorial is using an older version of revolution slider and I yet to try it on v5.*

      Reply

      1. Would you be willing to post a screen shot of the CSS styling you used for the contact form? The code pen site isn’t showing properly.

        Reply

        1. Check it now. Thanks

          Reply

          1. Thanks Andre!

  8. hi…
    when I press submit button… the messages (ie: meassage was not sent) goes out of slider… any ideas?

    Reply

  9. Very thanks

    Reply

  10. I’ve been trying this but it doesn’t work for me. I’m using Slider Revolution Ver. 5.2.4.1

    Reply

    1. Working on an update to this for the newer version of Rev slider. I will let you know when its up

      Reply

    2. Hey Paolo I made an updated tutorial for the new version of slider revolution let me know how it goes for you http://www.codedre.com/tutorials/how-to-add-a-contact-form-7-to-slider-revolution-5-x-wordpress/

      Reply

  11. The styling page is now a 404 page…any chance you can repost?

    Reply

  12. I found that I needed to hide my contact form 7 form on mobile. In slider settings there is a place for hide defined layer by width. Then on the slide setting itself there is a advanced parameter called hide under width. I hope that helps others like me who were who wondered how to hide the form when the size really was cutting it off. http://cmssuperheroes.com/knowledge-base/can-revolution-slider-onoff-mobile/

    Now I’m thinking how do I show the form as a new div right under the slider under that width of say 500px. Any thoughts?

    Reply

    1. You can make the div on the page hidden and use media queries to reveal it at 500px breakpoint.

      Reply

  13. Hi,

    Thank you for this tutorial!
    I used it to do something similar but instead of the embedding the shortcode in a layer on the first slide, I inserted it on the second slide of the slider as that is where I needed it.
    On that second slide, a button calls/hides the form and it works like a charm.
    Nevertheless, the form as well shows in the left top corner of the screen while the site is loading and stays put until the first slide comes to its end.
    Anyone any idea why that might be?
    Have been looking around how to avoid this from happening, but could only find ways to delay the loading of the form from page to page… can a delay be created for a slide to slide basis?

    Thanks,
    Tim

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *