How to add custom javascript function in contact form 7 Wordpress

user_3078760 0
Viewed 43076

I am facing a problem in using the contact form 7 in wordpress, and need some help to all of you. Problem: I have radio box which have two options yes or no. if someone check the yes option then div one shoud be shown and if he clicks at no then 2nd div should be shown. I write a code but how it will be us in contact form 7, i don't know. here is the code.

$(document).ready(function() {
//Hide the field initially
$("#div one").hide();
  $("#div two").hide();

$('[radio radio-928]').change(function() 
{
    if ($("[radio radio-928]").val() == "yes") 
    {
        $("#div one").show();
    }
    else {
        $("#div two").hide();
        }
        if ($("[radio radio-928]").val() == "no") {
        $("#div two").show();
    }
    else {
        $("#div one").hide();
        }
});
});
contact-form-7 wordpress plugins javascript
6 Answers

If your function works in JS console but not when saved in form, ensure it does not have blank lines.

For some reason these are turned into p tags, the editor is not really HTML aware at least on the sites I have used it on.

E.g. Capitalize first character of specific input boxes by a class.

<script language="javascript" type="text/javascript">
jQuery(function($){
// Capitalize first character as needed.
$.fn.capitalize = function() {
    $(this).blur(function(event) {
        var box = event.target;
        var txt = $(this).val();
        var stringStart = box.selectionStart;
        var stringEnd = box.selectionEnd;
        $(this).val(txt.replace(/^(.)/g, function($char) {
            return $char.toUpperCase();
        }));
        box.setSelectionRange(stringStart, stringEnd);
    });

   return this;
}

$('input[type=text].capitalize').capitalize();
});
</script>

Once I remove the new line it works facepalm...

user_26319880

  1. Add to your Wordpress the plugin: Insert Headers and Footers by WPBeginners

  2. Activate the plugin and go to Settings - > Insert Headers and Footers

  3. Add your javascript code inside script tags. When your page loads, this script will be in the head of your DOM

  4. On Contact Form 7, add your buttons using HTML code adding the respective ID attributes mentioned on your code to control your document.

I do this all the time, specially to use jQuery.

user_96419230

I know this is an old post but I wanted to share my discoveries in case anyone needs it later.

The OP problem is definetely the blank lines in the code, the form editor adds P elements to each new line. If you open the js console you will see the errors that points out to the code.

Also something we should pay attention, and that took me a lot of time to figure out, it that the editor removes backslashes. I was adding some input masks validation and found this code:

 v = v.replace(/\D/g, "");

becoming this after saving:

 v = v.replace(/D/g, "");

So, a workaround is to declare like this:

 v = v.replace(/\\D/g, "");

However, each time it is saved the backslashes would be removed, so I needed to keep its source code saved somewhere else then paste it to the editor each time.

In the end I've just added a custom html widget with all the custom js inside a script tag. It will make the code work globally in the website but it was my way to ensure that users will not mess up the form masks and validation code.

user_22013720

You can copy the generated HTML of contact forms and add the javascript code. For example you have a submit form as:

[submit class:btn class:btn-lg class:btn-black "Enviar"]

If you look to the HTML code (Inspector or View Page HTML) you will have this code:

<input type="submit" value="Enviar" class="wpcf7-form-control btn-lg btn-black" disabled="">

Paste the code and add the javascript you need inside, for example:

<input type="submit" onclick="gtag('event','EnvioFormularioHome'); ga('send', 'event', { eventCategory: 'Formulario', eventAction: 'Enviado', eventLabel: 'Hernani'}) value="Enviar" class="wpcf7-form-control btn btn-lg btn-black" disabled="">
user_35772570
Related