Contact Form 7 Submit Button Element

Posted on 2 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 20 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

Auto Populate Contact Form 7 Input Fields with URL Parameter

I've just finished a WordPress development project which required fields in contact forms to be auto-populated with values based on the page from which the form page was called. In this case I was using the Contact Form 7 plugin. It's fairly simple to set default input field values with Contact Form 7 but assigning values dynamically based on context proved to be a bit more of a challenge. Needless to say though, a bit of hacking and an hour so on Google yielded a satisfactory result.

The site allows users to browse from a selection of ski chalets and submit a reservation enquiry. First of all I had to work out how to pass the name of the chalet being enquired about to the contact form page. I found this post which told me how to do this using a bit of extra code in the theme's functions.php file as follows:


// chalet name for enquiry form
function parameter_queryvars( $qvars ) {
    $qvars[] = 'chalet';
    return $qvars;
}
add_filter('query_vars', 'parameter_queryvars' );

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

This sets up a new WordPress query variable called "chalet", allowing the chalet enquiry form page to be called as follows:

http://domainname.com/chalet-enquiry/?chalet=chaletname

Next, how to insert the value of "chaletname" into the relevant field on the form? Some unsuccessful hacking of Contact Form 7's text.php module followed by further Googling led me to the Contact Form 7 Dynamic Text Extension plugin which is designed specifically to add this capability to Contact Form 7. The plugin creates a new field type tag for the form called "dynamictext", which allowed me to create an input field in the form to accept the "chaletname" variable passed to the page as follows:


[dynamictext enquiry-chalet "CF7_GET key='chalet'"]

It works a treat and even better allowed me to leave the Contact Form 7 core code unhacked.

View a demo here

Thanks to WordPress Warrior for the functions.php extension and Sevenspark for the plugin.

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.

Get a UK Phone Number in France or Switzerland with Vonage

Vonage

Vonage provides a simple, low-cost voice over IP (VoIP) telephony solution for private individuals and businesses. The Vonage service works via a low-cost adapter unit which allows any normal telephone to be conncted to the Vonage network via the Internet. There is no need for a landline - if your Internet connection is via cable or satellite it doesn't matter.

When you sign up to Vonage you are provided with a UK phone number with a normal geographical (i .e. beginning with 01 or 02) area code. Vonage offers various call plans, the cheapest of which costs £5.99 a month +VAT and gives unlimited calls to UK landlines. Calls to UK mobiles are 13p a minute. For £7.99 a month you can sign up for their "V-Plan 2" call plan which gives unlimited calls to ten European countries including France and Switzerland as well as the USA, Canada, Australia & New Zealand.

Because the service works over the Internet, you can plug your Vonage adapter into your ADSL or cable router anywhere in the world and make calls for the same price as if you were in the UK. Additionally, people in the UK can call you without having to use an international dialling prefix - if their call plan gives them unlimited UK landlane calls (which is pretty standard these days) it won't cost them a penny to call you or your business wherever you happen to be based.

For businesses which operate in Europe and deal with a largely British clientele, Vonage can offer significant cost savings when communicating with clients prior to them traveling and especially during their trip or holiday when they will only be reachable via their UK mobiles. With Vonage all landline calls are included in the monthly call charge and calls to mobiles cost only 13p a minute irrespective of where the user is. Clients will still have to pay roaming charges if their provider still penalises them in this way, however for businesse such as ski schools in France or Switzerland which make many calls to UK clients' mobiles when they are in the ski resort, Vonage offers the potential for serious savings on phone bills.

To sign up for Vonage you will need a UK delivery address for them to send your VoIP adapter to and you will have to arrange for someone to send the box to you via post or courier. If you don't have a UK address you can arrange for delivery to Feathered Owl Technology's premises in London and we can arrange onward shipment.

Feathered Owl Technology is a Vonage afilliate and has succesfully implemened Vonage for a number of customers. To find out more about the Vonage service and how it can help you save money on call charges in France or Switzerland please contact us via our website where you can also place an order for Vonage via the affiliate link on our homepage. Or you can just click on the Vonage logo at the top of this post.

Feathered Owl Technology is an independent IT consultancy based in London, UK (and various Alpine locations during the winter). To find out how your brand can benefit from our website, search engine optimization, telecommunications & IT consultancy services, please email us or or submit a comment to this blog post.

www.featheredowl.com | [email protected]