Contact Form 7 Multi-Step Slider Form

Multi Step Sliding Form

BootStrap, CSS, Frank Thoeny, JavaScript, jQuery, PHP, PHP Frameworks, Website Developing, WordPress
Contact Form 7 Multi-Step Slider Form

Contact Form 7 Multi-Step Slider Form

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.

 

 

 

Advertisements
mailboxes

Forms are Fantastic with “Ziptastic CSS and JQuery “

Frank Thoeny, jQuery, Website Developing, WordPress
mailboxes

provided by the USPS

Here’s my thoughts. This API is a great addition to any form on a website. I was reviewing the code and suggested to the author a code change in a recent email message. I think Chris Coyier is a fantastic demo creator and the author Andru Skoicescu followed through with a great idea. I downloaded the demo and can hardly wait to implement this on a website.

ATTENTION: AFTER BRINGING THIS TO THE AUTHORS ATTENTION HE FIXED IT AS I SUGGESTED.

download it from github. http://daspecster.github.io/ziptastic/index.html

You will see the line that says Ghetto. I don’t know about you, but I don’t like the word Ghetto in my code. Now my fix is below the commented out code.

if (firstReveal) {

    // Ghetto but without this timeout the field doesn't
    // take focus for some reason.
    //setTimeout(function() { $("#address-line-1").focus(); }, 400);

My Fix:

    $("#zip").blur();
    $("#address-line-1").show().focus();

}

If you had it hidden it from the previous step in the code then you need to show it before you can put the focus on the form field. This worked for me in Chrome. Let me know if this didn’t work.