How to check if a checkbox is checked in contact form 7?

Question

To begin with, I have a contact form that looks like this:

The contact form 7 editor code is:

<input type="checkbox" id="katoikia" name="tracking-777">Tracking Acceptance</input>

<label> Your Name:
    [text* your-name] </label>

<label> Email:
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

<label> Your message (optional):
    [textarea your-message] </label>

[submit "Submit"]

I want to check if the checkbox I have is checked and if it's checked I Want to track the contact form fields. But I struggle to find a way to achieve the if statement check.

I used this piece of javascript but it doesn't work at all:

<script>
    $(document).ready(function() {
    $('#katoikia').change(function() {
        // CHANGED THIS SELECTOR
        if ($('#katoikia').is(':checked')) {
            alert('Checked');
        } else {
            alert('Unchecked!');
        }
    });
});
</script>

Question: How can I check if the checkbox is checked or not and accordingly do 'something'?

Note: Feel free to give brief explanation of where or why I should use what you will suggest me to, plus make sure to let me know if using the code in the contact form 7 editor is ok or not.

score 2 · Answer 1 · answered Feb 02 '22 at 17:01

2

Your pure JS is correct. Maybe the input field is not rendered, when your JS runs the first time. That could be the reason, why the event handler (change) is not set. Try the following JS:

$(document).ready(function() {
$(document).on("change", "#katoikia", function() {
    // CHANGED THIS SELECTOR
    if ($('#katoikia').is(':checked')) {
        alert('Checked');
    } else {
        alert('Unchecked!');
    }
});

});

P.S: input is a self-closing tag. So remove the closing tag. More informations here.

answered Feb 02 '22 at 17:01

Arne

40
7

Hmm, could you please inform me a little bit further, about where should I put the javascript code, just to make sure if I am doing it correctly? ( I just use the javascript under the HTML inside of contact form 7 editor ). – Jameu Lukasli1 Feb 02 '22 at 17:13
1

I never pasted the JS directly in the form-builder, maybe that work. Do you see your JS code when you inspect the rendered site? If not you can try to paste the JS in a code-block on the specific site with the Gutenberg editor, Elementor or sth else – Arne Feb 03 '22 at 11:03

score 2 · Accepted Answer · answered Feb 02 '22 at 19:10

Your jQuery is incorrect for usage on WordPress. You can insert it into the CF7 Editor, but I would recommend minifying it so that cf7 doesn't auto-p it.

You can't just use $ in Wordpress.

<script>
    jQuery(function($) {
        $('#katoikia').on('change', function() {
            // CHANGED THIS SELECTOR
            if ($('#katoikia').is(':checked')) {
                alert('Checked');
            } else {
                alert('Unchecked!');
            }
        });
    });
</script>

Minified it would look like this:

<script>jQuery(function(e){e("#katoikia").on("change",function(){e("#katoikia").is(":checked")?alert("Checked"):alert("Unchecked!")})});</script>

Excellent! It worked like a charm, thank you @Howard E. – Jameu Lukasli1 Feb 02 '22 at 19:12 — Jameu Lukasli1, Feb 02 '22 at 19:12

How to check if a checkbox is checked in contact form 7?

2 Answers2