How to Prevent Multi-Submit on Contact Form 7

Recently, we came across an issue where we were using the Mail (2) setting to send an automated email to a user who submits the form with an attachment. The issue was that this attachment was a 2MB file, so before you see the success message, you have to wait for the attachment to be sent which can take a bit of time. Because of this, users end up submitting the forms various times causing multiple submits and emails send to both parties (Especially when using a 3rd party SMTP host like SendGrid or MailGun).

Here is the method we used to prevent this sort of action which can simply be added to your functions.php file to be called on each page.


<?php
	// Prevent Multi Submit on all WPCF7 forms
	add_action( 'wp_footer', 'prevent_cf7_multiple_emails' );

	function prevent_cf7_multiple_emails() {
	?>

	<script type="text/javascript">
	var disableSubmit = false;
	jQuery('input.wpcf7-submit[type="submit"]').click(function() {
	    jQuery(':input[type="submit"]').attr('value',"Sending...");
	    if (disableSubmit == true) {
	        return false;
	    }
	    disableSubmit = true;
	    return true;
	})
	  
	var wpcf7Elm = document.querySelector( '.wpcf7' );
	wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
	    jQuery(':input[type="submit"]').attr('value',"Sent");
	    disableSubmit = false;
	}, false );

	wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
	    jQuery(':input[type="submit"]').attr('value',"Submit")
	    disableSubmit = false;
	}, false );
	</script>
	<?php
} ?>

What the above will do is change the text of the forms submit button to ‘Sending…’ and disable any further clicks until the message is delivered. Once the message is delivered, the submit button will change to ‘Sent’.

In addition to this, if there are any errors in the form, we can use the wpcf7invalid DOM Event which we can use to change the value of the submit button back to the original value; in our case, we changed it back to ‘Submit’.

In our case, we had pages with multiple forms and only needed this to be added to one of the forms on the website. To do this, you can view the page source and get the ID attribute for the form (e.g. #wpcf7-f4-o1), and simply add this before each of the selectors, like so; jQuery('#wpcf7-f4-o1 :input[type="submit"]')

There are other ways of doing this such as using a preloader on submit but our particular client was pretty happy with the solution we provided him with.

Feel free to leave a comment below if this has helped or if you have another preferred method of performing such a task.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Add a List of Countries to WP Contact Form 7 (CF7) Shortcode

I’m pretty sure most people have used Contact Form 7 if they’ve been building WordPress websites. But have you ever wanted to add a list of countries within a dropdown? There is no built-in functionality to do this unfortunately be today we are going to share a simple copy and paste shortcode for you do add to your form.

In the below shortcode we have set United Kingdom and United States to be the first two selections in the dropdown, feel free to change these to countries you would like to add priority to. We also added "---" to separate the priority countries to the rest of the countries which are in alphabetical order.


[select country "United Kingdom" "United States" "---" "Afghanistan" "Albania" "Algeria" "American Samoa" "Andorra" "Angola" "Anguilla" "Antigua and Barbuda" "Argentina" "Armenia" "Armenia" "Aruba" "Australia" "Austria" "Azerbaijan" "Azerbaijan" "Bahamas" "Bahrain" "Bangladesh" "Barbados" "Belarus" "Belgium" "Belize" "Benin" "Bermuda" "Bhutan" "Bolivia" "Bonaire" "Bosnia and Herzegovina" "Botswana" "Bouvet Island (Bouvetoya)" "Brazil" "British Indian Ocean Territory (Chagos Archipelago)" "British Virgin Islands" "Brunei Darussalam" "Bulgaria" "Burkina Faso" "Burundi" "Cambodia" "Cameroon" "Canada" "Cape Verde" "Cayman Islands" "Central African Republic" "Chad" "Chile" "China" "Christmas Island" "Cocos (Keeling) Islands" "Colombia" "Comoros" "Congo" "Congo" "Cook Islands" "Costa Rica" "Cote d'Ivoire" "Croatia" "Cuba" "Curaçao" "Cyprus" "Cyprus" "Czech Republic" "Denmark" "Djibouti" "Dominica" "Dominican Republic" "Ecuador" "Egypt" "El Salvador" "Equatorial Guinea" "Eritrea" "Estonia" "Ethiopia" "Falkland Islands (Malvinas)" "Faroe Islands" "Fiji" "Finland" "France" "French Guiana" "French Polynesia" "French Southern Territories" "Gabon" "Gambia" "Georgia" "Germany" "Ghana" "Gibraltar" "Greece" "Greenland" "Grenada" "Guadeloupe" "Guam" "Guatemala" "Guernsey" "Guinea" "Guinea-Bissau" "Guyana" "Haiti" "Heard Island and McDonald Islands" "Holy See (Vatican City State)" "Honduras" "Hong Kong" "Hungary" "Iceland" "India" "Indonesia" "Iran" "Iraq" "Ireland" "Isle of Man" "Israel" "Italy" "Jamaica" "Japan" "Jersey" "Jordan" "Kazakhstan" "Kazakhstan" "Kenya" "Kiribati" "Korea" "Korea" "Kuwait" "Kyrgyz Republic" "Lao People's Democratic Republic" "Latvia" "Lebanon" "Lesotho" "Liberia" "Libyan Arab Jamahiriya" "Liechtenstein" "Lithuania" "Luxembourg" "Macao" "Macedonia" "Madagascar" "Malawi" "Malaysia" "Maldives" "Mali" "Malta" "Marshall Islands" "Martinique" "Mauritania" "Mauritius" "Mayotte" "Micronesia" "Moldova" "Monaco" "Mongolia" "Montenegro" "Montserrat" "Morocco" "Mozambique" "Myanmar" "Namibia" "Nauru" "Nepal" "Netherlands" "Netherlands Antilles" "New Caledonia" "New Zealand" "Nicaragua" "Niger" "Nigeria" "Niue" "Norfolk Island" "Northern Mariana Islands" "Mexico" "Norway" "Oman" "Pakistan" "Palau" "Palestinian Territory" "Panama" "Papua New Guinea" "Paraguay" "Peru" "Philippines" "Pitcairn Islands" "Poland" "Portugal" "Puerto Rico" "Qatar" "Reunion" "Romania" "Russian Federation" "Rwanda" "Saint Barthelemy" "Saint Helena" "Saint Kitts and Nevis" "Saint Lucia" "Saint Martin" "Saint Pierre and Miquelon" "Saint Vincent and the Grenadines" "Samoa" "San Marino" "Sao Tome and Principe" "Saudi Arabia" "Senegal" "Serbia" "Seychelles" "Sierra Leone" "Singapore" "Sint Maarten (Netherlands)" "Slovakia (Slovak Republic)" "Slovenia" "Solomon Islands" "Somalia" "South Africa" "South Georgia & S. Sandwich Islands" "Spain" "Sri Lanka" "Sudan" "Suriname" "Svalbard & Jan Mayen Islands" "Swaziland" "Sweden" "Switzerland" "Syrian Arab Republic" "Taiwan" "Tajikistan" "Tanzania" "Thailand" "Timor-Leste" "Togo" "Tokelau" "Tonga" "Trinidad and Tobago" "Tunisia" "Turkey" "Turkey" "Turkmenistan" "Turks and Caicos Islands" "Tuvalu" "U.S. Virgin Islands" "U.S. Minor Outlying Islands" "Uganda" "Ukraine" "United Arab Emirates" "Uruguay" "Uzbekistan" "Vanuatu" "Venezuela" "Vietnam" "Wallis and Futuna" "Western Sahara" "Yemen" "Zambia" "Zimbabwe"]

It’s definitely a time-saver, imagine getting a list of countries than having to format it to the above manually? Well, we sure do this helps save a lot of time.

Drop a comment below if you’ve used this in your WordPress website 😉

Plugin Alternative

If you prefer to use a plugin to achieve a very similar thing then you can use Listo.

Listo is a simple plugin that provides several kinds of common lists for other plugins like Contact Form 7. Listo currently provides lists of world countries, U.S. subdivisions, and world currencies.

With this plugin, you can change your dropdown shortcode to:


[select your-country data:countries]

By adding data:countries, this gives the menu about 200 country options. Simple, right?

The plugin has some other additional features that might appeal to you. For example, would you like to display a list of currencies? No problem, just use the below shortcode:


[select your-currency data:currencies]

Pretty sweet, don’t you think?

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share