A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

Using an HTML5 Button Element as Contact Form 7 Submit

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:

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.

Submit Button

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('', $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:

HTML Submit Button

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.

Web Inspector

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('', $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.

Submit Button Animation

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!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Comments (13)

  • Links Breaker

    Hi there! Many thanks for sharing this. Something really useful to be able to create a custom CF7 button for my project. I really appreciate your time. Regards. LB

    reply
  • LB

    Hello, I have a question about ajax loading (spin icon), after using an HTML5 Button Element as Contact Form 7 Submit, the icon it not longer displayed.
    Any idea?

    Thanks in advance.
    LB

    reply
    • Ahmed

      Hi LB, you have to append the ajax-loader element to your button ($html variable) markup in the functions.php file:

      Your markup should look like this:

      $html = sprintf(‘%2$s‘, $atts, $value);

      The contact form 7 plugin looks for this span element with the class “ajax-loader”.

      That’ s all :-)!

      reply
    • Ralph Stulgies

      Hi LB,
      Your need to add a span tag after the button for the spinner to work. So the last line of code would look like this at the end:

      ……’, $atts, $value);
      return $html;
      }
      }

      reply
  • Luis

    Hello Marko, Thanks for your article, it was so helpful, only one thing for who doesn’t work the css code, specially the class “twentysixteen-child-custom-btn” because I noticed that this class is not recognized in wordpress, thus I make a little change in the code in functions.php. This is the litlle change in the last line:
    $html = sprintf(‘%2$s‘, $atts, $value);
    return $html;
    }
    }

    I don’t know PHP, only CSS, but this worked for me. Thanks again Marko.

    reply
    • Luis

      I don’t Know why the code is not complete but I put it again:
      $html = sprintf(‘%2$s‘, $atts, $value);
      return $html;
      }
      }

      reply
      • Luis

        this part is missing, I dont know why, and again the last time…
        %2$s

        reply
  • Roman

    Hi Marko,

    thank you for your tutorial. It really helped me, but your script does not print the $atts into the $html, so the button has no css classes. I think you forgot the ‘%1$s’ in the button-tag Please change line 27 to:

    $html = sprintf(‘%2$s‘, $atts, $value);

    Best Regards,
    Roman

    reply
  • Tobias Hyldeborg

    Hi. Do you know how to use the standard button content element for the “Submit” button? When I use the button content element on a page it has round corners, but the submit button on Contact Form 7 is with squared corners.

    reply

Leave a Reply