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

PHP Design Patterns Reference and Examples

PHP, PHP Frameworks, Website Developing

What is GoF in design patterns?

GoF is actually a commonly used acronym that stand for Gang of Four. The Gang of Four refers to the four authors of the popular book on design patterns called “Design Patterns: Elements of Reusable Object-Oriented Software”. This book is considered to be the bible on design patterns in software engineering. Often, GoF is just used to refer to the book itself, and not the actual authors of the book. Another commonly used acronym is Go4, which means the exact same thing. The Gang of Four : Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides, authors of the original Design Patterns book.

GoF Creational Patterns
Abstract Factory Sets of methods to make various objects.
Builder Make and return one object various ways.
Factory Method Methods to make and return components of one object various ways.
Prototype Make new objects by cloning the objects which you set as prototypes.
Singleton A class distributes the only instance of itself.
GoF Structural Patterns
Adapter A class extends another class, takes in an object, and makes the taken object behave like the extended class.
Bridge An abstraction and implementation are in different class hierarchies.
Composite Assemble groups of objects with the same signature.
Decorator One class takes in another class, both of which extend the same abstract class, and adds functionality.
Facade One class has a method that performs a complex process calling several other classes.
Flyweight The reusable and variable parts of a class are broken into two classes to save resources.
Proxy One class controls the creation of and access to objects in another class.
GoF Behavorial Patterns
Chain Of Responsibility A method called in one class can move up a hierarchy to find an object that can properly execute the method.
Command An object encapsulates everything needed to execute a method in another object.
Interpreter Define a macro language and syntax, parsing input into objects which perform the correct opertaions.
Iterator One object can traverse the elements of another object.
Mediator An object distributes communication between two or more objects.
Memento One object stores another objects state.
Observer An object notifies other object(s) if it changes.
State An object appears to change its` class when the class it passes calls through to switches itself for a related class.
Strategy An object controls which of a family of methods is called. Each method is in its` own class that extends a common base class.
Template An abstract class defines various methods, and has one non-overridden method which calls the various methods.
Visitor One or more related classes have the same method, which calls a method specific for themselves in another class.
Other PHP Design Patterns
Non OO MVC MVC – Model View Controller – shown using procedural and not OO architecture.
Object Oriented PHP Basics
PHP OO Class Basics The basics of creating a class with OO PHP.
PHP OO Abstract Class Basics The basics of creating an abstract class with OO PHP.
PHP OO Interface Basics The basics of creating an interface with OO PHP.
PHP OO Static Basics The basics of using Statics with OO PHP.
PHP OO This and Parent Basics The basics of using this and parent with OO PHP.
PHP Performance Testing
PHP Performance Tuning if / elseif VS switch Which is faster in PHP – if / elseif or switch?
Other PHP Stuff
PHP Job Interview Questions As a contractor and freelancer I`ve had a number of interviews, and the same questions seem come up on a regular basis.
Comments and Questions A few of the many emails about patterns and PHP I have gotten over the past few years.

Reference: http://www.fluffycat.com/PHP-Design-Patterns/

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

PERL or Moodle Development for Pebber Brown

Frank Thoeny, Moodle, PERL, PHP, Website Developing, WordPress
Photo of Pebber Brown

Photo of Pebber Brown

Pebber Brown my guitar teacher appoched me, Frank Thoeny, about developing an educational LMS website. I was unsure of what platform we could use. Thinking about what I can do and how I can show some of my talents, I decided to use PERL as the foundation to develop the website. The first challenge was to come up with a module for logging in to the secure area of the site. This first hurdle was over come by going to CPAN and finding a module.

After such a long deliberation and I discovered the amount of work  that was involved we both opted for an existing LMS technology. Moodle was chosen based on it’s popularity at the University of La Verne. However I kept the PERL Modules that I started developing as possibly something I could use in the future.