Skip to main content

Prevent Spam Emails in Contact form 7 wordpress

 Prevent or Stop Spam Emails in Contact form 7

 

If you're receiving spam emails through your Contact Form 7 (CF7) in WordPress, here are some effective ways to prevent them:

1. Use reCAPTCHA (Recommended)

 2. Use Akismet Plugin

 3. Enable a Honeypot Field using Plugin(Install and activate Contact Form 7 Honeypot plugin)

4. Custom Code (Best)

So this tutorial will not cover 1-3 points because that is self explained in the heading.

lets try 4th method, how to stop spam emails and block email in wordpress contact form 7 forms. we can use same method in any plugin or custom website.


First we need to add an hidden field in our cf7 form. Add below code in your contact form

[hidden trap-field class:spam-check]
 

 and this code you can add in contact form 7

<script>
  document.addEventListener("DOMContentLoaded", function() {
      document.querySelectorAll(".spam-check").forEach(field => {
          field.value = "1";
      });
  });
</script>

but if you have multiple forms in a page then dont add it in contact form 7 instead add in your core js file or in footer.

 

Validate the Field in WordPress (functions.php)

 

Now, add validation code in functions.php to CF7 to reject spam submissions where the hidden field is missing or unchanged:

function validate_spam_field($result, $tag) {
if ($tag->name === 'trap-field' && $_POST['trap-field'] !== '1') {
$result->invalidate($tag, "Spam detected!");
}
return $result;
}
add_filter('wpcf7_validate_hidden', 'validate_spam_field', 10, 2);

then in your css file add this code.

.spam-check {
    display: none !important;
}

 

 

 

 

 


Comments

Popular posts from this blog

Run and compile sass scss file to css using node

  Today we learn how to use scss and generate css using node  or Run and compile sass scss file to css using node   So please follow simple  steps :-   Today we will create a project that can read scss file and generates css with it  Note: Make sure you have installed node in your system. If you want to help to install node js based on your system then check our other tutorial or check node js official website. Now create a blank folder and open  terminal(linux) or cmd(windows) and navigate to your current project folder by using cd command Now run below command npm init after enter it will ask you some package info that you can fill according to you or just keep enter until it finished. The above command will generate package.json file Now  we will install npm module that will convert our scss to css Run below command: npm install node-sass So we have installed node-sass package . Now open package.json file in your...

Solution-windows 'expo' is not recognized as an internal or external command

Solution for expo is not recognized as an internal or external command,operable program or batch file in Windows 10 Sometimes expo will not work globally mostly in windows 10, If you are facing same issue then follow the below Steps 1) Click on windows button and search for  " Environment variables"  and click on "Edit the system environment variables" 2) Now you will see a popup like below screen. Then you need to click on Environment Variables. (Please see highlight part in below image)     3)Then click on new button that i have highlighted in below image 4. Then a popup will open and you need to fill details like below mentioned Variable Name :Path Variable Value: %USERPROFILE%\AppData\Roaming\npm Here we are creating a new path variable and passing location of npm.   Now Click on OK and close all the terminal windows and open new CMD or terminal and type Expo . Great now you can access expo from any...

Convert website to android and ios application using react native expo webview

Convert website to android and ios application using react native expo webview If you want to check you can check on github by using below link also dont forget to give star ;) Source Code: https://github.com/shubham715/react-native-expo-webview-convert-website-to-app React native is the best choice to create multi platform mobile application , but sometimes we dont want to write a complete application because we already have a web application or a website and its complicated to manage both . So we have a solution for this problem. React native supports webView that makes easy to run any website url like an app natively. What is webview in react native? In React native, WebView helps to show web content in a native view. For this tutorial we will use EXPO. What is EXPO ? EXPO a set of tools to help you quickly start an app. Expo have many inbuilt components that helps to simplify the development and testing of React Native app. So please follow the below steps to c...