-1

I am just trying to be able to target keyboard events from Contact Form 7 generated form inputs. But since input fields in Contact Form 7 are created with more complex markup and Javascript compared to a simple, hand-rolled HTML form, I have no clue how to target any events or if it is even possible.

There also does not seem to be any documentation on this that I can find.

Here is an exmple of what I wish would work:

[text* first-name class:first-name onkeyup="MyFunction()"]

obviously, this does not work.

Brian Ogden
  • 18,439
  • 10
  • 97
  • 176
Wilhelm Coq
  • 1
  • 1

1 Answers1

1

And this doesn't work? (not even if you wrap it in <script> tags?)

$(".first-name").on("keyup", function () {
 // Do your stuff.
});

I'm unfamiliar with Contact Form 7, but the browser will when everything is compiled up process everything like normal HTML/JS/CSS. So if you have somewhere to include JS, this should definitively work.

EDIT: After reading up a bit more on Contact Form 7, I can't see why this shouldn't work when wrapped in <script> tags and placed at the bottom of the Contact Form 7 editor.

Please have a look at this question as well.

Crashtor
  • 1,249
  • 1
  • 13
  • 21
  • 1
    I changed the OPs question to be more clear, and I removed the "created differently than in HTML" bit – Brian Ogden Aug 01 '17 at 23:34
  • Ok, let's see what OP says. Thanks – Crashtor Aug 01 '17 at 23:35
  • I am trying. I have not been able to get that to work. I am still checking to make sure I have not mistyped anything. I am still learning. – Wilhelm Coq Aug 02 '17 at 00:13
  • From what I can see, there should be an editor in CF7 (where you type all the code). At the very bottom of that editor, include ` ` And see if the input field turns red when you type. – Crashtor Aug 02 '17 at 00:17
  • This is what I placed in the script tags of my wordpress header.php file: $(".first-name").on("keyup", function lettersOnly(input) { var regex = /[^a-z]/gi; input.value = input.value.replace(regex, ""); }); It did not work. I am sorry I am still getting used to StackOverflow. So my apologies if this comment is confusing. – Wilhelm Coq Aug 02 '17 at 00:18
  • Try first and see if the input turns red when you type. Then go with the Regular expression. Do some debugging to see where the code fails. copy and paste this: `` – Crashtor Aug 02 '17 at 00:23
  • I just tried your other suggested code to test and see if the field background color would turn red on keyup, and I was not able to get that to work either. – Wilhelm Coq Aug 02 '17 at 00:28
  • Then try to see if CF7 responds to any JS injection at all, copy and paste this: `` do you get an pop-up saying hello when you reload the page? – Crashtor Aug 02 '17 at 00:32
  • I'm afraid it did not respond at all unfortunately for me. – Wilhelm Coq Aug 02 '17 at 00:39
  • Have a look at this.. https://kadimi.com/wpcf7-javascript-programmatically/ From what I can see, JS should be supported. – Crashtor Aug 02 '17 at 00:42
  • I will look into this. Thank you for your help and offering up some documentation. I appreciate it! – Wilhelm Coq Aug 02 '17 at 00:44
  • No worries man, sorry I couldn't help. Hope you get things sorted. – Crashtor Aug 02 '17 at 00:44