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/

Paginate Multisite Attachment WP_Query

Website Developing, WordPress

I am working on a multisite blog network where I need to display x post per page and navigation at the of the bottom list. My code will not display a pagination at the bottom and displays x post per page after every multisite blog loop. I have tried moving the WordPress function paginate_links() outside the foreach loop and without success. Does anybody have a fix or workaround?

// Iterate through your list of blogs
foreach ($blog_ids  as $id){

// Switch to the next blog in the loop.    
switch_to_blog($id);
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array (                 
    'posts_per_page'        => $limit,
    'paged'                 => $paged,      
    'post_type'             => 'attachment',        
    'post_status'           => 'inherit',       
    'post_mime_type'        => 'application/pdf',
    'order'                 => 'ASC'
);

$pdf_attachments = query_posts( $args );

// See if there are PDF attachments.
if( have_posts() )
{   

    while( have_posts()) { the_post();

        $title = get_the_title( $pdf_attachments->blog_id );

        $url = wp_get_attachment_url( $pdf_attachments->blog_id );                          

        $list .= '<li>' 

        .'<a href="'. $url .'" title="' . $title . '" class="pdf" target="_blank">'. $title .'</a>'

        .'</li>';

    }           

    // Switch back to the main blog
    restore_current_blog();
}

return '<ul class="unstyled">' 
    . $list 
    . '</ul>' 
    . paginate_links( array(
            'base' => '%_%',                                
            'format' =>  $slug .'/page/%#%',
            'add_args' => array(
                'searchterm' => get_query_var('s'),
                'limit' => get_query_var('posts_per_page')
            )
        )
    );
}

You’re in luck! I have been working on a solution. Finally here is a version of my solution. I hope this helps anybody that is stuck with a WPMU plugin development that needs a pager.

<?php 
function network_pager() 
{
	
	global $post;		
	
	$blog_name = $blog_count = $searchterm = $list = ''; 
	
	$site_names = $get_site_names = $blog_id = $get_blog_ids = array();
	
	$searchterm =  $_GET['searchterm'];
	
	$limit = 20;
	
	$current_site = get_bloginfo('url');		
	
	$slug = $current_site. '/' .get_post( $post )->post_name;		
		
	$current_blog_id = get_current_blog_id();	
	
	$selected_blog = ( isset($_GET['selected_blog']) && $_GET['selected_blog'])? $_GET['selected_blog']: $current_blog_id;	
	
	$args = array(
		
		'network_id' => $wpdb->siteid
		
	);
	
	// array of blogs
	$network_site_ids = wp_get_sites( $args ); 
	
	foreach( $network_site_ids as $key => $network_site ) 
	{
			
		$blog_id = $network_site['blog_id'];
		
		$blog_title = get_bloginfo('name');
		
		$site_names = get_blog_details($blog_id);		
		
		$get_site_names[$key] = $site_names->blogname;				
		
		$get_blog_ids[$key] = $site_names->blog_id;
		
	}
		
	if( isset($selected_blog)) {				
			
		global $wpdb;
		
		switch_to_blog( $selected_blog );				
		
		$blog_details = get_blog_details( $selected_blog );
		
		$blog_name = $blog_details->blogname;
		
		$paged = get_query_var('paged') ? get_query_var('paged') : 1;				
			
		$orderby = 'name';				
		
		$args = array ( 
		
			'posts_per_page' 		=> $limit,
			
			'paged' 				=> $paged,
			
			'post_type' 			=> 'attachment',
			
			'post_status' 			=> 'inherit',
			
			'post_mime_type' 		=> 'application/pdf',			
			
			's'						=> $searchterm,
			
			'orderby'               => $orderby,
			
			'order'                 => 'ASC'
			
		);
			
		$pdf_attachments = query_posts( $args );				
		
		$query2 = new WP_Query( $args );
	
		// See if there are PDF attachments.
		if( have_posts() )
		{ 	
									
			while( have_posts()) { the_post();
				
				$title = get_the_title( $pdf_attachments->blog_id );
				
				$url = wp_get_attachment_url( $pdf_attachments->blog_id );							
			
				$list .= '<li>'	
				
				.'<a href="'. $url .'" title="' . $title . '" class="mtli_attachment mtli_pdf" target="_blank">'. $title .'</a>'
				
				.'</li>';

			}
			
			restore_current_blog();				
			
			$output .= '<div class="container clearfix">'
			
			. '<ul class="listings unstyled">' . $list . '</ul>'
			
			. '<!-- pagination here -->'

			.'<div class="pager_wrapper">'
			
			. paginate_links( array(
					'base' => '%_%',								
					'format' =>  $slug .'/page/%#%',
					'add_args' => array(
						'searchterm' => get_query_var('s'),
						'category' => get_query_var('media_category'),
						'limit' => get_query_var('posts_per_page'),
						'selected_blog' => $selected_blog
					)
				)
			)
													
			.'</div>'						         
			
			.'</div>'
			
			. wp_reset_query(); // end return					
		
		}
		else { 
			
			$output .= "<li>We're Sorry! We do not have PDFs for this department.</li>";
			
		}
		
	}
	
	return $output;			
			
}
Drupal

Drupal 7 & Bootstrap – Photo Gallery adding Link Grouping to module and Creating multiple galleries on one page tutorial

BootStrap, Drupal 7, Website Developing

bootstrap_project_1 bootstrap-3-preview

 

 

 

The other day I was creating a Drupal 7 Bootstrap photo image gallery when I discovered Bootstrap – Photo Gallery module and the developers forgot to include Link Grouping. What is Link Grouping you ask? When you have multiple Photo Galleries on one page you can group each gallery together with Link Grouping. It’s not terribly difficult to make a few changes in the Drupal 7 contributed Bootstrap – Photo Gallery.

After reading the documentation about the BlueImp Gallery project, let’s get down to business. We are going to create multiple groups with gallery views all on one page. This is going to require creating a template page, editing to the Bootstrap – Photo Gallery module, creating a content type and setting up multiple views. This may seem like a lot, well that’s because it is. I’m going to have section the entire process. The gallery will cycle through the entire page of galleries, if you do not have link grouping.

First thing’s first. I’m assuming you have Drupal 7 and Bootstrap JS installed already. Install Bootstrap – Photo Gallery and Views. Also image styles are helpful to know about, we can create a new image size for the thumbnails.

Add new content type: admin/structure/types/add
name:
Photo Gallery

Manage Fields: 

  • image
  • body
  • category

Image Field Settings:  

  • required
  • file directory= image_gallery
  • preview Image size= medium
  • number of value: 1

Category Field Settings:

  • field type=List(text)
  • widget type=Select list
  • Default=none
  • number of values=1
  • allow value list= key|value pairs

Manage Display: Photo Gallery

  • Image, Above, Image – original
  • Category, hidden, Default
  • Body, hidden, hidden

Now add some photos. After you added some photos, we are going to create the view blocks.

Add new views: admin/structure/views/add

  • name: photo gallery view 1
  • Create a Block
  • Display format: bootstrap gallery of fields

Continue & Edit

Fields: Add image field

Filter Criteria:
Content: Type (= Photo Gallery)
Content: Category (= key)

Repeat these steps until you created multiple Gallery Blocks.

Now it’s time to decide where you really want to put these Gallery Blocks. You can put them in a sidebar Region or create a custom page template. What do you want to do? What ever your decision, we’ll need to group them if you have multiple sections per page and you have more than one gallery on a page. Categories does help to separate galleries in the thumbnail display, but not inside the slideshows. The gallery will cycle through the entire page of multiple galleries without link grouping.

We’ll need to hack the Bootstrap – Photo Gallery. Unfortunately the developers for this module did not include the Link Grouping option in Views.  That means next update to this module will more than likely not have Link Grouping, so we’ll need to make a backup after the hack is complete. I’ll try to contact the developer of Bootstrap – Photo Gallery to get them to publish my proposal.

Here we go hacking code.Use your favorite notepad++ editor.

Go to your module directory bootstrap_gallery.

Navigate you way into the bootstrap_gallery/theme folder. Open bootstrap-gallery-item.tpl.php and add this value to the data-gallery attribute on the link. data-gallery="<?php print $link_grouping ?>"
Save and close

Navigate the folder to bootstrap_gallery. Open views_bootstrap_gallery_plugin_style_bootstrap_gallery.inc and find options_form to add this code near the bottom of this function.
$form['bootstrap_gallery']['link_grouping'] = array(
'#type' => 'textfield',
'#title' => t('Container ids and link grouping.'),
'#default_value' => $options['link_grouping'],
'#size' => 60,
'#description' => t('If the data-gallery attribute value is a valid id string (e.g. "#blueimp-gallery"), it is used as container option.'),
);

Save and close

Next we open the file bootstrap_gallery.module  and find the function bootstrap_gallery_preprocess_views_view_field. Near the bottom of this function you will find the code that looks like this.

$vars['output'] = theme('bootstrap_gallery_item', array(
'original_image' => $original_image,
'thumbnail' => $thumbnail,
'title' => $title,
));

We will need to edit the code to save Link Grouping to this code below.
$link_grouping = $options['link_grouping'];
$vars['output'] = theme('bootstrap_gallery_item', array(
'original_image' => $original_image,
'thumbnail' => $thumbnail,
'title' => $title,
'link_grouping' => $link_grouping,
));

  Save and Close

 Clear ALL Drupal Cache.

We’ll now see that we’ve added a text field in the Views Bootstrap Gallery Settings. Let me know if you find this useful.

Drupal

Bootstrap 3 on Drupal 7 Issue with AccuWeather Widget

BootStrap, Drupal 7

Spent hours trying to find out what was causing the CSS to break on my AccuWeather widget. I have Bootstrap on Drupal. This is really a full task to get right.

You’ll need to replace ‘box-sizing:border-box’ with ‘box-sizing:content-box’ and if you have more nested elements that require the ‘content-box’ for whatever reason here is my solution. For example, AccuWeather’s widget does break CSS flow when accommodating Twitter Bootstrap version 3. Try wrapping the AccuWeather widget with a ‘.widget’ class like I did.

.widget * {
webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

This style will replace all ‘box-sizing:border-box’ from the widget class on down the tree.

Thread tells you: http://stackoverflow.com/questions/18854259/why-did-bootstrap-3-switch-to-box-sizing-border-box

Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.

Drupal

How To Create a Form Callback with Drupal 7 – Part 1

Drupal 7, Website Developing, WordPress

Drupal

INTRODUCTION

Working with Drupal for a couple years, I wanted to create a form with a callback. I admit there are one or two methods to create a Drupal 7 form. I created the form in the module location in the sites/all/modules/custom/{modname}. In this series, will step though a process to create this form. The form submits data into the database and return a message all on the same page without a page reload.

Required Knowledge: Drupal 7, PHP, MySQL, Coding Knowledge, etc…

If you are a new comer to Drupal Module Creation, I will try to cover as much as possible in my series. I will try not to make this too boring for the more advanced people.

CREATE THE MODULE

Modules created are self-recognized by two files that must be in the folder of your newly created custom module.
1. The .module file. Example: signup.module
2. The .info file Example: signup.info

The .module file is where all the custom code is written and can be left empty for this example.

The .info file needs a couple of things to become visible on the Drupal Module Page in the admin area.

The most basic .info file needs some variables assigned, the basic variables are name, description, dependencies array, core and package.

  1. Create the folder named sample all lower case in this location. sites/all/modules/custom/sample
  2. Create the files below.

sample.module

// Intentionally left blank for sample module
// However the file needs to exist in the folder.

sample.info

name = Sample Module
description = this is a newly created sample module
dependencies[] = mods,views
core = 7.x
package = Sample Module For Example Purposes

After typing or copy/pasting all this into the sample.info file and creating a sample.module file you will have this module listed on Drupal Module page.

Before we dive to far into the nuts and bolts of the form creation, beginners will need to understand the basics of Drupal 7 module creation. This watered down version hopefully will help. Use Google to find additional help if needed. I’ll try recording a video soon. The next part of this series will be basics of form creation.

joomla logo

Joomla Template Creation

Frank Thoeny, Website Developing, WordPress

You may be wondering what I’ve been doing for the last couple months. Well, I have been working hard. I decided to sit down and wrap my head around Joomla. The Joomla platform is widely used by many Fortune 500/1000 companies for their websites. I already have my head fully wrapped around WordPress, but that’s just not enough. The more CMS platforms you know, the better. Joomla has built-in support for SEO, so it’s no wonder that Joomla is chosen by Website Developers over WordPress. WordPress can be built up to do everything Joomla does, but it’s so much easier to have it built-in and there are more options than you can shake a stick at.

Joomla Template Creation is somewhat different than developing a WordPress Theme for the most par, but on the other hand it’s still not too awful difficult. Directory structure is different, yet we are still working with PHP, HTML, CSS, JavaScript to create the new template.

XML files are what makes up the configuration for  templates. What I have done in my tutorial is use the Beez Theme as a demo.

Symfony

Installing Symfony Core

PHP Frameworks, Symfony, Website Developing, WordPress

Spent an hour and something today installing Symfony on my Windows 8.1 machine that runs xampp 1.8.3-5-VC11

It’s a pretty smooth install with the windows evaluating zip file download of Symfony. I had a hang up installing Symfony with the command line PHP and stopped the core files somewhere in the app folder. I suggest trying both installs. First try out command line PHP if you have your Windows setup with environment variables on your localhost. Your cURL is probably not a Windows environment variable so you can install using command line PHP. If that does not work, Unzip the Symfony evaluation in the htdocs folder.

Download Symfony Here: http://symfony.com/download

Download  composer: https://getcomposer.org/download/

What is Symfony you ask?

The Big Picture guide states “welcome to a whole new way of developing web applications.” and I’d have to agree with that. Several larger PHP CMS frameworks use Symfony as a base framework. It’s unbelievable that Drupal is built on top of Symfony. You can use Sympony by itself to build web apps. It’s a good idea if you are interested to read through the “Big Picture” first http://symfony.com/doc/current/quick_tour/the_big_picture.html then read the “documentation” http://symfony.com/doc/current/index.html

Symfony has a PHP templating engine called Twig. It reminds me of ruby or smarty. It’s very familiar if you have experience with PHP templating engines. The Symfony eco-system is very solid set of Symfony components, Symfony philosophy and Symfony community. Try some time. The download is free and the documentation with move you quickly to learn Symfony. Try a tutorial or two.

Symfony Components

A set of decoupled and reusable components on which the best PHP applications are built on, such as Drupal, phpBB and eZ Publish.

AngularJS

Intro to AngularJS

AngularJS, JavaScript, Website Developing, WordPress
AngularJS

AngularJS

The newest technology to hit the mainstream web developer experience is AngularJS.  Angularjs.org site states, it’s a “Superheroic MVW Framework. ” What that means is–AngularJS extends HTML attributes for a perfect single page application. Still wondering if you want to learn AngularJS? Why do you need convincing? Visit this site to start your first experience in AngularJS: Your First AngularJS App: A Comprehensive Tutorial | Toptal

It’s important to give back to the Open Source community. So once you are an expert at AngularJS be sure to contribute your coding experience. I am educating myself in AngularJS. This site will soon be full of AngularJS examples. Keep in touch.

Frank Thoeny

Airstream MTV Lobby

Experience As a Freelance Web Coding Developer

Frank Thoeny, Website Developing, WordPress
Airstream MTV Lobby

Provided by MTV Lobby

Frank Thoeny completes website services at reasonable rate. As an experienced website developer, Frank Thoeny has developed over dozens of websites and maintained even more. I am Frank Thoeny a troubleshooter, problem solver and a website developer.

Frank Thoeny understands his profession! Frank has devoted 15 years of his life to web development. Frank Thoeny started developing in Y2K. His first app was a Century 21 listing board. Since then Frank Thoeny has gained more experience and skills as technology advanced. Frank Thoeny excels in experiences with Web Developing, Web Designing and Web Programming. Here are his safeguard guidelines as follows.

Create A Policy – Before you start having comments available whether it’s through a blog or a Twitter conversation, make sure you clearly outline the organization’s policy on commenting. I know it sounds excessive, but having some guidelines in place will ensure that you won’t be caught off guard.

Make sure it’s not libel – In the United States and in many countries around the world, truthful statements about another person are safe to publish. However, publishing outright lies with the intent to defame or injure the reputation of others is illegal.

Don’t Lash Out – It’s easy to respond quickly when someone makes you mad. The best thing to do however is keep your cool, no matter what the situation. You will come off as the better person for it.
Respond Publicly – If someone makes a negative comment, respond publicly to let others know how you’ve handled the situation. Maybe others were wondering the same thing, but didn’t want to ask. Being able to handle the situation shows that you (and the organization) are in control.

Respond Privately – This may seem the opposite to the point above, but let me explain. While some situations require a public response, others do not. If you are being harassed, you may not want the situation to play out over the blog. Also, if a negative situation is going back and forth many times, you should move that to a private conversation as to not interfere with your other posts/comments.

Respond in a Timely Manner – If you take too long to reply, people may think that silence is your answer. Try to respond as quickly as you can, even if just to say that you will be able to provide an answer/opinion shortly. That way people know that you are involved.

Be Clear and Concise – Nobody’s going to read a response that’s many paragraphs long. Keep your answers clear and concise and you will get your point across.

Contact to hire Frank Thoeny for web development.
https://frankthoeny.wordpress.com/frank-thoeny-contact/

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.

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.