Basic email submission spam filters

JavaScript
1

Hello Friends,

I set a simple one-field email form subscription on my WordPress website footer.
At the moment the form accepts any text, even a single letter. I would like it to have some simple spam filtering like format control (i.e. stop sending formats other than abc@cdf.gh) or a checkbox to tick upon subscription, ect.

I’ve already had @James_Hibbard back in '15 (almost 10 y ago :slightly_smiling_face:) helping making something very similar here Alert for button submission - #9 by James_Hibbard

I would be happy to use the same principle this time as well. I made the form subscription on WordPress using Elementor if that can help to work out the code in a way that can be added easily.

Thank you all

2

Hi there. One decade later and I’m still here :slight_smile:

There are various ways to do what you want, so I suppose the first question would be: what are you trying to prevent?

If the answer is “bots submitting the form” then a good solution might be to use a honeypot. This is a form field which is hidden from your regular users (therefore left empty), but which a bot will invariably fill out.

Edit: apparently Elementor Forms has built-it honeypot field. See here:

3

Thanks @James_Hibbard!

Wonder if the free version has it too.

The basic form builder gives several options among which a hidden field. Is it meant to be a honeypot or just a hidden field?

image
image305×577 21.8 KB

Would a checkbox set as required* help against bots?

Be it as it may the form still accepts any random text and there seem not to be any format control.

4

No idea sorry. I just did a quick search to come up with that link. I don’t actually use Elementor.

Another quick search suggests it does, but YMMV: https://www.youtube.com/watch?v=25-jYpEjzbo

This is why I asked you what you are trying to prevent.

There is a difference between preventing invalid form submission (i.e. making sure regular users enter the correct text) and protecting your form against bots. Bots are often able to bypass client-side validation, so protecting against bot submissions requires a different approach.

A first good step is to make the field of type email. This will apply some validation (for modern browsers) that ensures that users have to input something matching an email address.

See: https://elementor.com/help/form-fields/

5

As I suspected a hidden field is not a honeypot field. In fact I do not have a honeypot in the form block I am using.

Just some basics, as you said something that ensures that users have to input a matching email address.

The code you did back in '15 was good enough: I was receiving some occasional weird email addresses but nothing more. Would it be doable to add some of it to the Elementor form?

In the advanced settings it allows you to add some custom css.

image
image

Is it possible to add there some of your code? I guess down below is the part where the condition for a matching email address is made.

$("#subscribe").on("click", function(e){
  e.preventDefault();
  var address = $("#email_address").val();
  if (!/\S+@\S+\.\S+/.test(address)){
    alert("Email address not valid!");
  } else {
    subscribeToNewsletter(address);
    $("#email_address").val("")
  }
});
6

I don’t think so. The code you posted is JavaScript, but the screenshot shows where you can add CSS.

The easiest thing to do would be to declare the input field as being of type=“email”. That would make the browser apply the same validation natively.

See here:

Do those instructions work for you?

7

I left the input field untouched type=“email”.

Right. I just found out later that there actually is a section to add custom JS.

image
image336×629 19.7 KB

Anyways, at the moment for some reason the email field gives me the error submission failed it doesn’t matter what I input. I’ll try to figure out why.

8

Great. This should now throw an error when you attempt to input anything that isn’t an email address.

Using the dev tools we can inspect the server’s response upon form submission (if it sends one). Can you post a link to this form, or send it to me via DM if you’d rather not make it public.

9

Being very selective the moment :slightly_smiling_face:

The site in online. I’ll send you the link via DM.

10

Thanks for that.

So, I am assuming we are talking about the “Sottoscrizione” field at the bottom, not the contact form above it.

In this field, if I enter nonsense and press submit, I see the following request/response from the server (in Dev Tools > Network > Response):

{
  "action": "wpr_form_builder_email",
  "nonce": "5baefa47b3",
  "form_content[form_field-email][]": [
    "email",
    "no-an-email-address",
    "Email"
  ],
  "wpr_form_id": "02c953d"
}

{
  "success": false,
  "data": {
    "action": "wpr_form_builder_email",
    "message": "Email provided is invalid",
    "status": "error"
  }
}

And I see the message “Submission failed” (not a very helpful error message).

This appears to correct.

With a correct email:

{
  "action": "wpr_form_builder_email",
  "nonce": "5baefa47b3",
  "form_content[form_field-email][]": [
    "email",
    "jim@example.com",
    "Email"
  ],
  "wpr_form_id": "02c953d"
}

{
  "success": false,
  "data": {
    "action": "wpr_form_builder_email",
    "message": "Message could not be sent",
    "status": "error",
    "details": '["Email: jim@example.com"]'
  }
}

And also the message “Submission failed”.

This is obviously wrong and is what you need to investigate first.

11

Thank you @James_Hibbard

Correct.
(There should also be the Eng version which has the same field, same issue.)

And my guess is for some reason previously it did the mirror opposite (namely let it pass both nonsense and correct format). Reason why I started this thread.

Where could I start investigating this glitch, any suggestions?

12

It’s an Elementor form, right?

In this case, I would start here:

Your job now is to isolate where the error is occurring. You have a working form on the same page, so I would cross check all of the settings and see if anything stands out.

Also check to see that there is no conflict going on, e.g. by disabling the other plugin(s).

13

Thanks @James_Hibbard,

Yes, it is an Elementor form. I set up an SMTP plugin with a different server and it works. I disabled the plugin and it does not.

This could be called a fix. However, the SMTP server provider I’m using gives a limited monthly allowance. I am not expecting to receive many subscriptions if at all but I also use this provider occasionally to send small campaigns, therefore at the moment using Elementor wp_mail function instead of weighing on the external service would be ideal.

The article was also referring to some limitation on a php function set by the hosting service.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.