It’s been 5 years since my attempt to find a solution for a multi step sliding forms with 3 separate WordPress plugins. I had something that worked as long as the plugins were never updated. Sadly enough, my hack became outdated and useless as plugins were updated. I had a couple of people contact me recently about using my multi step sliding form. My hack works on the same page without page reloads. They did not understand when the code hack did not work. The main reason because it’s outdated.
Nobody wants a hack. They want clean, reusable and supported WordPress plugins. Well now, that is what I look for as a WordPress developer. Amazingly enough, I am developing a clean, reusable and supported WordPress plugin. I promise it will be out soon.
My experience with custom designing themes and custom plugin development has given me a toolbox of awesomeness. I have 17 years of knowledge as a web developer. In those years, I have learned modern web development and best practices.
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.
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.
Open contact-form-multi-step-module.php file with your favorite editor.
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.
Go to line 59, where add_filter is and copy it.
Paste it at line 65 after you make a line return at line 64.
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.
For a Multi-Step form:
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]
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?