Using an HTML5 Button Element as Contact Form 7 Submit

Having a WordPress website means that you will most likely need to have a contact form somewhere, whether it is for a newsletter, a contact us page, a poll or for something else. With CMS such as WordPress, setting up a contact form is a fairly simple task. Namely, there are lot of contact form plugins which you can use, and Contact Form 7 is one of the most popular ones.

So that you can have a clearer picture of what Contact Form 7 plugin can do, here are a few examples of contact forms made with this plugin that come with premium themes on ThemeForest:

• Noizzy contact form
• Sekko contact form
• Glück contact form

Not only is creating any kind of contact form in WordPress easy, but the process itself is also well documented. That’s why we will go straight to the point.

By using this plugin, you won’t have to go through a hassle of creating a custom form and back end functionality, which will speed up the process drastically. However, what you might find problematic is a Contact Form 7 submit button which is an input element of type=”submit”.

Even with the standard input submit button, you will have a nice working form. Still, the problem arises if you want to add an additional styling for this element. As you may already know, there are certain limitations when it comes to css since you can’t use the pseudo elements here, like :before or :after which may be handy for adding some hover underline, iconic font icon or anything else for animation which would come as a nice finishing touch for your form.

Of course, it might be possible to achieve outstanding animations by just wrapping a submit button with some div with custom class, but by changing input to button, you can have way more control.

Let’s see how you can use an HTML5 button element as a submit button for your contact form.

Before the change, a submit button will look like this.

All modifications need to be done inside a functions.php file, preferably inside the child theme functions.php. For the sake of this tutorial, we will place all our code inside a Twenty Sixteen child theme.

Step 1

First, we need to remove the default Contact Form 7 submit tag. You can do it with this simple line of code:

/*removing default submit tag*/
remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');

Step 2

Second, we need to add action with our function which will be holding our custom markup for the button. This is another simple line:

/*adding action with function which handles our button markup*/
add_action('wpcf7_init', 'twentysixteen_child_cf7_button');

Step 3

Next, we are adding a tag which will call a button handler function:

/*adding out submit button tag*/
if (!function_exists('twentysixteen_child_cf7_button')) {
function twentysixteen_child_cf7_button() {
wpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');
}
}

Step 4

Finally, we have to add a markup to the handler:

/*out button markup inside handler*/
if (!function_exists('twentysixteen_child_cf7_button_handler')) {
function twentysixteen_child_cf7_button_handler($tag) {
$tag = new WPCF7_FormTag($tag);
$class = wpcf7_form_controls_class($tag->type);
$atts = array();
$atts['class'] = $tag->get_class_option($class);
$atts['class'] .= ' twentysixteen-child-custom-btn';
$atts['id'] = $tag->get_id_option();
$atts['tabindex'] = $tag->get_option('tabindex', 'int', true);
$value = isset($tag->values[0]) ? $tag->values[0] : '';
if (empty($value)) {
$value = esc_html__('Contact Us', 'twentysixteen');
}
$atts['type'] = 'submit';
$atts = wpcf7_format_atts($atts);
$html = sprintf('%2$s', $atts, $value);
return $html;
}
}

The handler function is the most important part. Besides printing a default class and ID, we will also add a custom css class inside of it. In the last part where we have an $html variable, we are putting a button markup with FontAwesome chevron icon. Note that you need to have this FontAwesome font in your theme. If you don’t have it, make sure to find a plugin which will include it.

Now, our changed submit button will look like this:

As you can see, when you inspect your page with the Chrome web inspector, it contains exact same markup which we have set inside the handler.

And here is the complete code:

/*removing default submit tag*/
remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');
/*adding action with function which handles our button markup*/
add_action('wpcf7_init', 'twentysixteen_child_cf7_button');
/*adding out submit button tag*/
if (!function_exists('twentysixteen_child_cf7_button')) {
function twentysixteen_child_cf7_button() {
wpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');
}
}
/*out button markup inside handler*/
if (!function_exists('twentysixteen_child_cf7_button_handler')) {
function twentysixteen_child_cf7_button_handler($tag) {
$tag = new WPCF7_FormTag($tag);
$class = wpcf7_form_controls_class($tag->type);
$atts = array();
$atts['class'] = $tag->get_class_option($class);
$atts['class'] .= ' twentysixteen-child-custom-btn';
$atts['id'] = $tag->get_id_option();
$atts['tabindex'] = $tag->get_option('tabindex', 'int', true);
$value = isset($tag->values[0]) ? $tag->values[0] : '';
if (empty($value)) {
$value = esc_html__('Send', 'twentysixteen');
}
$atts['type'] = 'submit';
$atts = wpcf7_format_atts($atts);
$html = sprintf('%2$s', $atts, $value);
return $html;
}
}

Step 5

With everything in place, you can use extra classes and markup to style the button to your liking. As an extra, we’ll add a simple hover animation to it with a css code below.

button.twentysixteen-child-custom-btn {
padding: 15px 45px;
-webkit-transition: -webkit-background .2s ease-out;
-moz-transition: -moz-background .2s ease-out;
transition: background .2s ease;
}
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {
margin-right: 7px;
font-size: 15px;
}
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {
font-size: 12px;
position: relative;
display: inline-block;
vertical-align: middle;
line-height: inherit;
-webkit-transition: -webkit-transform .2s ease-out;
-moz-transition: -moz-transform .2s ease-out;
transition: transform .2s ease-out;
}
button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {
-webkit-transform: translate3d(3px,0,0);
-moz-transform: translate3d(3px,0,0);
transform: translate3d(3px,0,0);
}

The css can be added inside the child theme css file or simply from WordPress back end > Appearance > Customize > Additional CSS field, and with it, you will have a nice looking animation of a moving arrow on hover.

Conclusion

And that’s how you replace a Contact Form 7 submit button with HTML5 button element. Hopefully you’ll find our instructions helpful. If so, please share it with others who can also make use of it.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

• How to Display Publish Dates as “Time Ago”
• Child Theme – A Simple Explanation
• Customize Option in WordPress