Skip to content

Add the ‘type=date’ field to inputs from Contact Form 7

August 31, 2012

iPhone Date Keyboard on a mobile formWhen using Contact Form 7 for a mobile site (for iPhone primarily) I found that I wanted to make use of the built-in datepicker keyboard for a few form fields.

I saw articles on integrating the standard jQuery datepicker into CF7 and further articles on styling this for mobile… but it all seemed like overkill when there was an arguably better solution sitting right there on my phone.

So after giving up on Google I dove into the source code of the plugin and made a few amends to allow for a [date] shortcode that outputs an <input> field with type=”date” as default.

NOTE: Any changes made to these files will be overwritten if you auto-update the plugin

Here’s what to do:

1) Find text.php in the CF7 Plugin folder

This is the only file you need to amend for this, you could technically alter one of the others but as this is the most straight-forward it seems like the best option.

2) Create a new shortcode handler

At the top of the file is the code to create a new shortcode for text, email and their mandatory equivalent fields. Add a fifth line to this as so:

wpcf7_add_shortcode( ‘text’, ‘wpcf7_text_shortcode_handler’, true );
wpcf7_add_shortcode( ‘text*’, ‘wpcf7_text_shortcode_handler’, true );
wpcf7_add_shortcode( ’email’, ‘wpcf7_text_shortcode_handler’, true );
wpcf7_add_shortcode( ’email*’, ‘wpcf7_text_shortcode_handler’, true );
wpcf7_add_shortcode( ‘date’, ‘wpcf7_text_shortcode_handler’, true );

3) Define the default type option

After this (around line 17) there are some variables defined that are used to output the selected html, add one in that sets a variable called ‘inputtype’ to ‘text:

$type = $tag[‘type’];
$name = $tag[‘name’];
$inputtype = ‘text’;
$options = (array) $tag[‘options’];
$values = (array) $tag[‘values’];

We will use this variable to change the input type as required.

4) Define the input type when the [date] shortcode is used

if ( ‘date’ == $type )
        $inputtype = ‘date’;

Add this under the line where the attributes for email validation are defined.

5) Amend the line which outputs the input field

$html = ‘<input type=”text” name=”‘ . $name . ‘” value=”‘ . esc_attr( $value ) . ‘”‘ . $atts . ‘ onfocus=”if(this.value==\”;

Needs to be changed to:

$html = ‘<input type=”‘ . $inputtype . ‘” name=”‘ . $name . ‘” value=”‘ . esc_attr( $value ) . ‘”‘ . $atts . ‘ onfocus=”if(this.value==\”;

This will output our variable, text by default and date when we use our new shortcode, into the input field.

And on a very basic level that’s it, you can now use an input field that has ‘type=date’ included by simply using [date] in your form rather than [text]. There is a lot more that could be done such as creating validation for the field and adding it into the tag generator interface… but this meets my needs for now!

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s