Uncategorized

Using a Button Instead of an Input Tag to Submit with Contact Form 7

The markup on a form used a <button> tag rather than a  <input> which is used by default. I read several articles that suggested things like hacking the core files of the plugin, but really it is a lot simpler than that. The classes on the submit input are the identifiers used to trigger the JavaScript validation and Ajax submission. Here is an example of the Contact Form 7 setting:

<ul>
        <li><label for='cname'>Contact Name</label>[text* cname id:cname]</li>
	<li><label for='title'>Title</label>[text* title id:title class:title]</li>
	<li><label for='company'>Company Name</label>[text* company id:company  class:company]</li>
	<li><label for='telephone'>Telephone Name</label>[text* telephone id:telephone  class:telephone]</li>
	<li><label for='email'>Email</label>[email* email id:email class:email]</li>
	<li><label for='project'>Project Description</label>[textarea* project id:project class:project]</li>
</ul>
<button id='submit' class='wpcf7-form-control wpcf7-submit'>SUBMIT <span class='glyphicon glyphicon-menu-right'></span></button>

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.