How to add custom javascript function in contact form 7 Wordpress

Question

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();
        }
});
});

Lebaron

Answer 1

This can be done in the Contact Form 7 editor box like this:

<script type="text/javascript"> 
    function showdiv(element){ 
       document.getElementById("div-one").style.display = element=="yes"?"block":"none";                      
       document.getElementById("div-two").style.display = element=="no"?"block":"none"; 
    } 
</script>

<input type="radio" name="choice" value="yes" onclick="showdiv(this.value);"> Yes<br>
<input type="radio" name="choice" value="no" onclick="showdiv(this.value);"> No<br>

<div id="div-one" style="display:none;">Yes</div>
<div id="div-two" style="display:none;">No</div>

Tricot

Answer 2

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 the 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...

Epic

Answer 3

simply add you JavaScript function to your page then find the Additional Settings field at the bottom of the contact form management page and use the on_submit JavaScript action hook like so:

on_submit: "MY_JavaScript_function_Name();"

Giule

I want to add More Files Button, I want to call a function when the user clicks on Add more Button. How should I Call it at Additional Settings. – Contraindicate

Answer 4

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.

Iraidairan

Answer 5

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.

Countryside

Answer 6

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="">

Fourth