Contact Form 7 Multi-Step Slider Form

How to create a WordPress multi-step slider with Contact Form 7

CSS, Frank Thoeny, PHP, Website Developing, WordPress
Contact Forms

Contact Forms

DEMO: NOT AVAILABLE

WordPress sliding form plugin is near impossible to find. I am Frank Thoeny, and I require a multipage/multi-step WordPress plugin and not only that one that will slide to the next form after submitting. I tried to use Breezing Forms, cForms, and a couple different content slider plugins that had potential. Well come to find out, they did not work in their current state for my needs. I would have to redevelop or reinvent the entire plugin from PHP and I don’t have time to do that. I starting to slam my fists and cussing like a sailor at my work, until I discovered that Contact Form 7 was my ideal plugin for exactly what need to be done. I have to give my thanks to a guy, coreyt808, that took time to develop an additional multi-step plugin that intermingles with CF7. https://bitbucket.org/coreyt808/contact-form-7-multi-step-module I was able to use jQuery to slide the form. I will give you the steps to develop a successful sliding form. It’s not as hard as you might think.

Download and Install all these Plugins.

Module Modifications

Now comes the tricky  part, but still not as hard as you might think. This includes additional modifications to the multi step multipage module, but only if you want the multi form sliding form. I’ll give you the line numbers to alter for the multipage multi step module.

  1. Open contact-form-multi-step-module.php file with your favorite editor.
  2. Go to line 64, where add_action is and comment it out with //. We are removing this action to suit our jQuery slider AJAX form.
  3. Go to line 59, where add_filter is and copy it.
  4.  Paste it at line 65 after you make a line return at line 64.
  5. What you just did was stop the multi step of step2 message filter and added the success filter which removes that unwanted success message on submit. We don’t want the success message on every form we submit, so we stopped it with a filter.

Now we have your Contact Form 7 plugins ready to go, but wait there is more to do.  Did you think it was that easy? Well it’s still not hard. There are just a few more thing to do. If you think you can handle it then let’s move forward. Open the wp-admin control panel and navigate your way to Contact Form 7. If you are not familiar with Contact Form 7 then you need to research online.

Create Forms with these names.

screenshot-1

  • Slide-1
  • Slide-2
  • Slide-3
  • Etc..

For a Multi-Step form:

screenshot-2

Add this to your first form [hidden step 1-5] if you have 5 forms in the series

  • [hidden step 2-5]
  • [hidden step 3-5]
  • [hidden step 4-5]
  • [hidden step 5-5]

Additional Settings

Scroll down to the bottom where you’ll find Additional Settings. In the textarea type in the following code snippet. This is jQuery script that does the slide animation. Simple, right?

 on_sent_ok: "(".slideForm").animate({scrollLeft: "+=960"},800, "swing")"

HTML Markup

The following HTML Markup need to be put on the page or header.

<div class="slideForm">

<div class="slides">

<?php echo do_shortcode("[contact-form-7 id=\"14\" title=\"Slide-1\"]"); ?>


<?php echo do_shortcode("[contact-form-7 id=\"16\" title=\"Slide-2\"]"); ?>


<?php echo do_shortcode("[contact-form-7 id=\"17\" title=\"Slide-3\"]"); ?>

  </div>

</div>

Do you want this on every page? In a widget or header? That is completely your decision. What I’m showing is my simplest sliding form that you might already have knowledge of.

CSS STYLES

Opps! almost forgot the CSS styles.

* Styles for slide form *
.slideForm {
    overflow: hidden;
    height: 340px;
    width: 100%;
}

.slideForm .slides {
    overflow: hidden;
    width: 4000px;
    height: 300px;
    list-style: none;
    margin:0;
    padding:0;
}
.wpcf7 {
    float: left;
    width: 960px;
    height: 290px;
    background: #33cccc;
    margin:0;
    padding:0;
    display: block;
}
span.wpcf7-not-valid-tip {
    top: 30px !important;
    left: 0;
    z-index: 100;
    background: #ccc;
    border: 1px solid #ff0000;
    font-size: 10pt;
    width: 280px;
    padding: 2px;
}

div.wpcf7-validation-errors {
    border: 2px solid #f7e700;
}

.wpcf7 label {width: 200px;}
.zipcode {width: 120px;}
.city {width: 120px;}
.state {width: 40px;}

Feel free to contact me frankthoeny@yahoo.com

Advertisements

41 thoughts on “How to create a WordPress multi-step slider with Contact Form 7

    1. Chris, thanks for your comment. I can provide links, code or screenshots. My web server is down for demos. Please, send an email request on my contact page.

  1. Hello,
    I have trouble with contact form. When I paste it on contact us page all 3 contact forms are visible and after each form there is text from php “); ?>.
    How can I fix it?
    Tnx in advance.

  2. I’m a little bit confused… I have followed all instructions correctly. What do you do to put in the slider form on the page?
    [contact-form-7 id=”226″ title=”Slide-1″] ?????

    1. The JSON part is not working

      any clue whats wrong there?

      on_sent_ok: “(“.slideForm”).animate({scrollLeft: “+=960”},800, “swing”)”

  3. This is exactly what I’m looking for but I can’t get it to work =(
    Is it possible to make a very short YouTube video showing exactly what you do?

    Any help would be greatly appreciated.
    Ps. There are no videos on YouTube showing how to implement this type of form…you would be the first.
    Thanks again,

    Best regards

  4. Hello! Congratulations with the post!

    I have a form with 3 steps. In WPCF7 DB, how do I identify the continuation of the steps of the same user? Has an ID to join it all?

    Thanks!

  5. i have this error “Failed to send your message. Please try later or contact the administrator by another method.”
    it does not slide me to next slide

  6. Not worked for my case, i am using Contact Form 7 Multi-Step Forms Version 1.3.2 but while all step listed above is followed all contact form loaded at once and other form shows the message only.

  7. is there a file to download that includes all the changes in the html and css
    it is confusing i tried a couple of times but nothing no luck.

  8. In my case to got the slide animation working I had ti put ‘$’ jquery sign so the code should be
    on_sent_ok: “$(“.slideForm”).animate({scrollLeft: “+=960”},800, “swing”);”
    Thank you for the great piece of work 🙂

  9. Got solve the issue after 1 hour. I just added “$” in the below line and the slider work like a charm.

    on_sent_ok: “$(“.slideForm”).animate({scrollLeft: “+=960”},800, “swing”)”

    1. That can be created with jQuery javascript.

      <script>
      	jQuery(document).ready(function($){
      		$("#on_back_click").click(function(){
      		var calc_width = parseInt($('#masthead').outerWidth());
      		$(".slideForm").animate({scrollLeft: "-="+calc_width},800);
      		});
      	});
      </script>
      
      1. Oh the back button is done with jquery animation. Each form submitted gets cleared when successful. no caching but is store in the database.

  10. I am not sure but I think the file has been updated since this, because I don’t see an “add_action” or “add_filter” on the lines specified.. what is the full code of the lines that need to be edited?

    Thanks!

    1. Hi Jake. Yes, you are correct about the multi-step module being updated. I am 99.9% sure that the updated plugin will work without any modifications now. This is a blog article and only relevant for the time of writing. I could append stuff or write a new article, but it’s still the same concept.

      1. I am not sure what I am doing wrong, but I cant get it to work. I have the contact forms set up with the hidden tags, and the jquery in place, along with the css and html and php. The button will act like it’s going to do something, but then nothing.

        The site I am making is in it’s early stages, but if you are able to tell whats going on, I would appreciate it a ton! http://secretshipper.com/send-a-package/

      2. Hi Jake, Go to the jQuery code in the Additional Settings. Don’t use this on_sent_ok: "(".slideForm").animate({scrollLeft: "+=960"},800, "swing")" Please review the syntax. Did you find the double Quote problem? Use this on_sent_ok: "$('.slideForm').animate({scrollLeft: '+=960'},800)"

      3. This is the html I have on my page, with a php on page plugin installed.

        [contact-form-7 id=”24″ title=”Send a package”]

        [php][/php]

        [php][/php]

        [php][/php]

        [php][/php]

  11. For some reason I am still not able to get the form to work, it moves a step further and causes the information to vanish, but it still doesn’t move to the next form. Any ideas?

  12. Wait… There are additional modules, opps I mean Plugins.

    Install these first…
    Contact Form 7
    Contact Form 7 Modules: Hidden Fields not this one!
    Contact Form 7 Multi-Step Forms
    Contact Form DB

    Another example:

    CSS:

    
    /* Styles for slide form */
    #slideFormWrapper {
     width: 420px;
    }
    #slideForm {    
       height: 240px;
       border: 3px solid #666;
       width: 100%;
      overflow: auto;	
    }
    #slideForm .slides {
        width: 840px;
        height: 200px;
        list-style: none;
        margin:0;
        padding:0;
        overflow: hidden;	
    }
    #slideForm .slides .wpcf7 {
        float: left;
        width: 420px;
        height: 290px;
        background: #33cccc;
        margin:0;
        padding:0;
        display: block;
    }
    

    Wow, Look at this static Page code using shortcodes in the HTML like this:

       <div id="slideFormWrapper">
       <div id="slideForm">
          <div class="slides">
             [contact-form-7 id="5" title="Signup Form 1"][contact-form-7 id="6" title="Signup Form 2"]
          </div>
       </div>
       </div>
    

    and the gran finale… Drum roll please!

    Form 1:

    <p>Your Name (required)<br />
        [text* your-name] </p>
    [hidden step "1-2"]
    <p>[submit "Send"]</p>
    

    Additional Code:

    on_sent_ok: "$('#slideForm').animate({scrollLeft: '+=420'},800)"
    

    Form 2:

    <p>Your Email (required)</p>
     <p> [email* your-email] </p>
    <p>[submit "Send"]</p>
    [hidden step "2-2"]
    

    Additional Code:

    on_sent_ok: "$('#slideForm').animate({scrollLeft: '-=420'},800)"
    
  13. almost forgot something…. If you are developing on a localhost, such as Xampp, you must comment out a small section of the code in Contact Form 7 Multi-Step Forms. It’s looking for https, but localhost does not have secure https. The line numbers that you need to comment are 321-323…

    /*
    -if ($_SERVER["HTTPS"] == "on") {
    -     $page_url .= "s";
    -}
    */
    
  14. hello Everyone Please give me a succession ASAP

    i am facing a lot of problem
    i have try to same thing but in form i have seen all three form on the page , i will not got the slide image

    i have put this code in the the page

    [contact-form-7 id=”3163″ title=”Start your Free Quote 1″][contact-form-7 id=”3165″ title=”Start your Free Quote 2″][contact-form-7 id=”3164″ title=”Start your Free Quote 3″]

    and in the front i see all page form print one by one

    also i can add css and all thing according to you
    is too urgent if you have any succession please send me immediately
    million of thanks in advance

    1. I understand your immediate issue, but let’s recap first. This article is a couple years old and WordPress plugins were updated since then. I have revised some code in the comment section of my page. I found a caching issue that needs addressed. That is the only issue I will really support.

      Let’s go ahead and take a look at your code.

      [contact-form-7 id=”3163″ title=”Start your Free Quote 1″][contact-form-7 id=”3165″ title=”Start your Free Quote 2″][contact-form-7 id=”3164″ title=”Start your Free Quote 3″]

      The short code looks okay. Exactly what you expect, 3 forms are displayed on one page. We are golden!

      Now, the CSS styles in my example are just for example purposes. Mahender Singh will need to create his own CSS. If you don’t have CSS Stylesheet knowledge then I suggest going to the library, book store or even search online for a CSS Stylesheet tutorial.

      Hint:

      /* Styles for slide form */
      #slideFormWrapper {
      width: 420px;
      }
      #slideForm {
      height: 240px;
      border: 3px solid #666;
      width: 100%;
      overflow: auto;
      }
      #slideForm .slides {
      width: 840px;
      height: 200px;
      list-style: none;
      margin:0;
      padding:0;
      overflow: hidden;
      }
      #slideForm .slides .wpcf7 {
      float: left;
      width: 420px;
      height: 290px;
      background: #33cccc;
      margin:0;
      padding:0;
      display: block;
      }

      Wrap the short code like below.

      <div id="slideFormWrapper">
        <div id="slideForm">
          <div class="slides">
            [contact-form-7 id="5" title="Signup Form 1"][contact-form-7 id="6" title="Signup Form 2"]
          </div>
        </div>
      </div>
      
  15. Thanks would be great to get it to work.

    The plugin must have been updated… The lines you are referring to is not right…
    Go to line 64
    Go to line 59,
    Paste it at line 65 after you make a line return at line 64.

    Can you possibly give the actual lines?
    add_filter(‘wpcf7_ajax_json_echo’, ‘cf7msm_clear_success_message’, 10, 2);

    add_action(‘wpcf7_contact_form’, ‘cf7msm_step_2’);

    Or even easier give a the file for download.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s