Archive for the ‘Wordpress’ Category

Contact Form 7 Submit Button Element

Posted on 6 Comments

Like many web developers, I have spent an inordinate amount of time over the years trying to style form elements so that they render consistently across different browsers.

One technique I have found very useful is to use button elements to submit forms. Not only does the the button element offer richer styling opportunities than
<input type="submit" ... element, in my experience it is far easier to ensure that your beautifully-styled submit button looks the same whichever browser is used to view the form if you use this element.

So, how to use the button element in a CF7 form?

1. Contact Form 7 Form Element Modules

CF7 uses modules to create shortcodes and tag generators for various form elements. The module used to generate form submits is

/wp-content/plugins/contact-form-7/modules/submit.php.

Around line 47 you will find the following: -


$html = '<input type="submit" value="' . esc_attr( $value ) . '"' . $atts . ' /&rt;';

We want to change this to: -


$html = '<button type="submit"' . $atts . '>' . esc_attr( $value ) .  '</button>';

This is easily achieved by editing the submit.php module, but if you want this change to be preserved after a plugin upgrade there are a few more hoops to jump through.

2.Disable the Default Shortcode and Tag Generator

Put the following code into your theme's functions.php file:


// replace cf7 form submit with button
function fowl_wpcf7_submit_button() {
        if(function_exists('wpcf7_remove_shortcode')) {
                wpcf7_remove_shortcode('submit');
                remove_action( 'admin_init', 'wpcf7_add_tag_generator_submit', 55 );
        }
}
add_action('init','fowl_wpcf7_submit_button');

3. Create a new submit.php module in your theme folder

Create a /cf7 directory under your theme folder and put a copy of the submit.php module in there. Amend the relevant line of code as shown in section 1. As we are leaving the default module untouched in the plugin directory we need to change the names of the functions and references to them in our copy to avoid "cannot redeclare function" PHP errors.


wpcf7_add_shortcode( 'submit', 'wpcf7_submit_shortcode_handler' );

function wpcf7_submit_shortcode_handler( $tag ) {
.
.
add_action( 'admin_init', 'wpcf7_add_tag_generator_submit', 55 );
.
.
function wpcf7_add_tag_generator_submit() {

function wpcf7_tg_pane_submit( &$contact_form ) {

You can call the new functions in your version of submit.php whatever you like, but one easy method is just to add your own namespace prefix ("fowl_" in my case) to the function names:


wpcf7_add_shortcode( 'submit', 'fowl_wpcf7_submit_shortcode_handler' );

function fowl_wpcf7_submit_shortcode_handler( $tag ) {
.
.
add_action( 'admin_init', 'fowl_wpcf7_add_tag_generator_submit', 55 );
.
.
function fowl_wpcf7_add_tag_generator_submit() {

function fowl_wpcf7_tg_pane_submit( &$contact_form ) {

4. Call the new functions to re-enable the shortcode and tag generator

Add two more lines of code to your function in your theme's functions.php file:


// replace cf7 form submit with button
function fowl_wpcf7_submit_button() {
        if(function_exists('wpcf7_remove_shortcode')) {
                wpcf7_remove_shortcode('submit');
                remove_action( 'admin_init', 'wpcf7_add_tag_generator_submit', 55 );
                $fowl_cf7_module = TEMPLATEPATH . '/cf7/submit-button.php';
                require_once $fowl_cf7_module;
        }
}
add_action('init','fowl_wpcf7_submit_button');

That's it! Now, any CF7 forms on your site will use <button> elements for their submit buttons and you can take advantage of the new CSS styling possibilities available with this HTML element.

Contact Form 7 Default Select Value using URL Query Variable

Posted on 37 Comments

In a previous post I described how to use URL parameters to auto populate input fields in a form on a WordPress site using the Contact Form 7 plugin. One of the comments I received asked whether the same technique can be used to set the default value of a CF7 select field. Here is one way in which this can be achieved, with the help of a bit of Javascript: -

1. Set up a WP query variable which will be used to pass data to the form containing the select by adding this code to your theme's functions.php file: -


function parameter_queryvars( $qvars ) {
    $qvars[] = ‘defaultvalue’;
    return $qvars; 
} 
add_filter(‘query_vars’, ‘parameter_queryvars’ ); 

function echo_defaultvalue() { 
    global $wp_query; 
    if (isset($wp_query->query_vars['defaultvalue'])) { 
        print $wp_query->query_vars['defaultvalue']; 
    } 
} 

2. If you haven't done so already, install the Contact Form 7 Dynamic Text Extension plugin.

3. Create a CF7 form containing a select field and a dynamic hidden input field into which the query variable will be passed: -


[select menu-nn id:test class:test-class "one" "two" "three" "four" "five"] 
[dynamichidden hiddendefault "CF7_GET key='defaultvalue'"]

4. Add some Javascript code to the <head> section of the form page or your theme's Javascript file. I've used jQuery in this case: -


var $ = jQuery.noConflict(); // use value of hidden CF7 input to set selected option in select field $(document).ready(function(){ // get contents of hidden input; store in variable 
    var val =  $("span.hiddendefault input").val(); // set the "selected" attribute for option with value equal to variable 
    $('select#test option[value=' + val + ']').attr('selected', 'selected'); 
}); 

5. Send the value to which you want the select field to default to the form as follows: -

http://yoursite.com/form-with-select/?defaultvalue=two

6. Your select will now default to the value you pass to the page via the query variable.

View a demo here

See also: auto populate contact form 7 input fields with URL parameter

Fixing Duplicate Canonical Link Element in WordPress

If you work with WordPress blogs and websites you will, no doubt, have had lots of fun over the years with duplicate content and spent plenty of time trying a) get it out of Google's index and/or b) stopping it getting in there in the first place.

The introduction of support for the canonical link element by Google and the other search engines offered a powerful addition to the ways in which duplicate content can be suppressed. The canonical link element and its use has been widely discussed in the blogosphere so I won't go into it here. Check out Matt Cutts' Canonical Link Element in 5 minutes blog post for a good explanation if you don't know about it already.

Back to WordPress. The two popular SEO plugins Platinum SEO Pack and All-in-one SEO Pack have supported addition of canonical link elements to posts and pages for a while now. I noticed recently that on a couple of my new sites using WordPress 2.9.2 there were duplicated canonical link elements in the header: -

<link rel='canonical' href='http://www.featheredowl.com' />

which had been added by WordPress and, a bit further down: -

<link rel="canonical" href="http://www.featheredowl.com/" />

in the Platinum SEO pack section.

Further investigation revealed that WordPress has supported the canonical link element and added this by default to all posts and pages since version 2.9.0. Now, I don't know for sure if this is a bad thing, but intuition suggests that duplicated meta data in the header of a Web page won't make a search engine think it's a better quality page than if that data was only specified once. So, how to get rid of the duplicates?

It's easy. Either a) turn off "canonical URLs" in your SEO plugin or b) comment out the following line in wp-includes/default-filters.php: -

add_action( 'wp_head', 'rel_canonical' );

Personally, I commented out the bit of the WordPress script. After all, the SEO plugin writers thought if it first.