Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
How to Create a WordPress Slider with a Contact Form

How to Create a WordPress Slider with a Contact Form

by Courtney Robertson on August 15, 2016
Share This Post

Would you like to add a contact form slider to your site? You may want one of your slides to include an interactive contact form. In this tutorial, we will show you how to add a WordPress slider with a contact form.

To create a contact form slider in WordPress, you’ll need to follow these steps:

  • Step 1: Setup your contact form using WPForms.
  • Step 2: Setup your WordPress slider using Soliloquy and the Dynamic Addon.
  • Step 3: Insert your contact form into your slider.
  • Step 4: Publish your WordPress slider with contact form.

By the end of these 4 steps, you will have a WordPress slider with contact form that looks like this:

Published contact form slider

Ready to get started? Let’s go!

Step 1. Setup Your Contact Form

The first thing you need to do is install and activate the WPForms plugin. (Here’s a step by step guide on how to install a WordPress plugin.)

Once you have activated the plugin, it’s time to create a new contact form. Check out this step by step guide on how to create a simple contact form.

After you’ve saved your new form, copy the shortcode for the form. You can find the shortcode by going to WPForms » All Forms and then looking at the shortcode column.

wpforms shortcode

Step 2. Setup Your WordPress Slider

Next, you will need to install and activate the Soliloquy slider plugin. Check out our step by step guide on how to install the Soliloquy slider plugin.

You’ll also need to activate the Dynamic Addon, available with the Developer or Master Plan.  To activate the Dynamic Addon, go to Soliloquy » Addons » Dynamic Addon.

Dynamic Slider Addon Activation

Step 3. Insert Your Contact Form

After activating Soliloquy and the Dynamic Addon, go to Soliloquy » Add New to add a slider. Then click on Select Files from Other Sources.

soliloquy-select-files-from-other-sources

Next, select Insert HTML Slide. This is where you’ll paste the WPForms shortcode that you copied earlier. After pasting the code, click the Insert Into Slider button. You can also add any additional slides that you want, and publish your slider.

Insert HTML Slide

Step 4. Publish Your WordPress Slider with Contact Form

You’re almost finished! Now it’s time to add your slider to a post or page. Simply edit an existing post / page (or create a new one) where you want to add the slider. On the post edit screen, click on the Add Slider button.

A popup will appear where you can select your contact form slider. When you click on the Insert Slider button, you will notice the slider shortcode appear in your post editor.

How to Create a WordPress Slider with a Contact Form

Now you can publish or update your post / page. Your slider is now live on your site:

Published contact form slider

That’s it! We hope this article has helped you learn how to add a WordPress contact form in a slider. You may also want to check out our guide on How to Create a Responsive Slider for Envira Gallery.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Share This Post
Courtney Robertson is a content writer for SoliloquyWP. She loves helping customers create the best WordPress sliders.

Comments

    Blaine

    August 15, 2016

    Can I use this with wufoo forms? They provide iframe and javascript code for putting forms almost anywhere… I could try it out myself in Soliloquy and let you know.

    Reply

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

[i]
[i]