Adding a Shortcode to the Contact Form 7

by Nikolaenko Maxim · Published April 15, 2017 · Updated August 4, 2019

This article is intended to expand the knowledge of website developers. We'll talk about how to plugin Contact Form 7 we can add our own shortcode.

For those, who does not know the Contact Form plugin 7

CF7 is a great WordPress form builder., very flexible and perfectly able to integrate any layout.

You probably know that the fields for this plugin are formed based on shortcodes., but sometimes standard set is not enough and we need to create our own. CF7 plugin shortcodes are very similar to standard WordPress, but if you try to create a standard, then you won't be able to do anything right now., since the plugin only allows its own shortcodes.

An example of creating a shortcode:

From my recent practice, I decided to take an example for you. We will try to create a special code to display the current year and a few years before that.. You can make any other shortcode following the example below..

add_action( 'wpcf7_init', 'custom_add_shortcode_yesr' );
 
function custom_add_shortcode_yesr() {
    wpcf7_add_shortcode( 'selectyear', 'custom_clock_shortcode_handler' );
}
 
function custom_clock_shortcode_handler( $tag ) {
	$res = "<select class='estimate__select' name='year' id='year' required>";
		$currnt_year = date("Y"); ;
		for ($i=1930; $i < $currnt_year+1; $i++) {
			$res .= "<option value='$i' selected='selected'>$i</option>";
		}
	$res .= "</select>";
    return $res; 
}

add_action( 'wpcf7_init', 'custom_add_shortcode_yesr' );

function custom_add_shortcode_yesr() {

wpcf7_add_shortcode( 'selectyear', 'custom_clock_shortcode_handler' );

}

function custom_clock_shortcode_handler( $tag ) {

$res = "<select class='estimate__select' name='year' id='year' required>";

$currnt_year = date("Y"); ;

for ($i=1930; $i < $currnt_year+1; $i++) {

$res .= "<option value='$i' selected='selected'>$i</option>";

}

$res .= "</select>";

return $res;

}

To check, paste the code into the function.php file and try to create a new form and add a shortcode in it [selectyear]. If done right, then you will have a dropdown list with a choice of the year. I think those, who reached the creation of their shortcode, do not need an explanation of the entire listing, I will add only a small remark about the hook and function wpcf7_add_shortcode().

wpcf7_add_shortcode – this is a function for registering form tag types. To use this function you need to use a special call hook wpcf7_heat.

If you want to insert the selected data into the letter, then in the shortcode for this data you need to insert the name of the attribute name from your field. In our case it will be [ year ].

Online tutoring services. List of courses I teach

Basic web design course;
Site layout;
General course on CMS WordPress and continuation of the course on template development;
Website development in PHP.