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.
Once you have contact form 7 plugin installed you will see the following icon on the left nav bar in the wordpress admin panel.
Create a new form or edit an existing one. The form can be as simple or complex as you need it.
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.
Once your form is styled copy the form shortcode and proceed to the Slider Revolution plugin.
Create a new slider or use an existing one.
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.
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.
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.