Replies: 1

We have many duplicated WP sites (different instances, but same plug-ins / code). Since updating to v5.4.1, getting js errors on page load and every time you try click the “Submit” button of the contact form (form has been working fine before v5.4.1 update). The form just hangs, nothing is submitted. Here is the site that is still broken: https://pl.faluninfo.net/contact-us/

We have Recaptcha v3 integration activated. If deactivated, the JS errors still happen, BUT the form submit works fine. Here is this site: https://es.faluninfo.net/contact-us

Oddly, if cf7 plugin is reverted to 5.4, the problem still exists. After reverting back to 5.3.2 everything works fine again (w/ recaptcha enabled, no js errors). Here is where it’s working fine with cf v5.3.2: https://faluninfo.net/contact-us/

**This is the JS error on load:**

index.js?ver=5.4.1:formatted:334 Uncaught TypeError: Cannot set property 'innerText' of null
    at b (index.js?ver=5.4.1:formatted:334)
    at index.js?ver=5.4.1:formatted:398
    at d.reduceRight.c (index.js?ver=5.4.1:formatted:180)
    at p (index.js?ver=5.4.1:formatted:229)
    at Object.m [as reset] (index.js?ver=5.4.1:formatted:374)
    at HTMLFormElement.<anonymous> (index.js?ver=5.4.1:formatted:581)
    at index.js?ver=5.4.1:formatted:577

This looks like the line where the error occurs:
e.wpcf7.parent.querySelector('.screen-reader-response [role="status"]').innerText = ""

**This is the JS error when clicking the submit button (just notice it’s at line 166 vs 334 above):**

index.js?ver=5.4.1:formatted:166 TypeError: Cannot set property 'innerText' of null
    at b (index.js?ver=5.4.1:formatted:334)
    at index.js?ver=5.4.1:formatted:326
    at d.reduceRight.c (index.js?ver=5.4.1:formatted:180)
    at index.js?ver=5.4.1:formatted:401
    at d.reduceRight.c (index.js?ver=5.4.1:formatted:180)
    at p (index.js?ver=5.4.1:formatted:229)
    at v (index.js?ver=5.4.1:formatted:283)
    at index.js?ver=5.4.1:formatted:163

Anybody have suggestions how to get rid of the javascript errors and/or make cf7 v5.4.1 reCAPTCHA integration work again?

Thanks!

• This topic was modified 16 hours, 26 minutes ago by cakidnyc.

Replies: 1

Hello there,

We use Thrive Themes (https://thrivethemes.com) with our WordPress instance. Recently, we decided to use Contact Form 7 as well. Set up was easy, but in some cases, we are getting double submissions. This results in the user who filled out the form getting two emails as well as our getting two notifications.

I’ve contacted the Thrive Themes team and they sent me this: “Could you ask them to explain how their submission process works?” They are keen to get CF7 working smoothly in their system.

Thank you,
David

Replies: 2

Hi,

I need to call a web service (REST) on form submit. Is it possible to do that with Contact Form 7 ?

Regards,

Julien

Replies: 2

Hi,
the recaptcha badge appears on all WP sites. I think it should be visible/active just on the page where the CF7 has been set up, doesn’t it?

Thanks.

Replies: 1

Hi

I am looking got change the output HTML of some of the elements, especially response and checkbox

for example the function wpcf7_checkbox_form_tag_handler I want to change the output of the item

$item = sprintf('<input %2$s /><span class="wpcf7-list-item-label">%1$s</span>', esc_html( $label ), $item_atts)

to

$item = sprintf('<input %2$s class="form-check-input" /><label class="wpcf7-list-item-label" class="form-check-label">%1$s</label>', esc_html( $label ), $item_atts)

Is this possible with str_replace? I have tried but cannot get it to work.

I would also like to add an id=”” to the input and a for=”” to the label but I expect that to be harder.

With the response output I want to add a close button and I have tried this code

add_filter( 'wpcf7-response-output', 'wpcf7_custom_reponse_html', 99, 1 );
function wpcf7_custom_reponse_html( $html ) {
	$html = str_replace( '<div %1$s>%2$s</div>', '<div %1$s>%2$s<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>', $html );
	return $html;
}

But this does not work.

Is there any way to edit the output HTML of COntact Form 7?

Thanks

Replies: 0

Hello

I have a requirement by which when I select the ‘MOBILE’ checkbox the ‘radius’ input field should become a required field.

//code for my form
`<fieldset>
<legend>Section 1. Contact Information</legend>

<!– 1 first name, last name –>

<div class=”horizontalBlock”>
<div class=”leftBlock”>
<div class=”blockNameLeft”>
<label for=”company”> Company</label>
</div>
<div class=”blockFieldLeft”>
[text* company id:company placeholder “Company”]
</div>
</div>
<div class=”rightBlock”>
<div class=”blockNameRight”>
<label for=”address”> Business Address</label>
</div>
<div class=”blockFieldRight”>
[text* address id:address placeholder “Business Address”]
</div>
</div>
</div>

<!– 2 city, state –>

<div class=”horizontalBlock”>
<div class=”leftBlock”>
<div class=”blockNameLeft”>
<label for=”city”> City</label>
</div>
<div class=”blockFieldLeft”>
[text* city id:city placeholder “City”]
</div>
</div>
<div class=”rightBlock”>
<div class=”blockNameRight”>
<label for=”state”> State / Province</label>
</div>
<div class=”blockFieldRight”>
[select* state id:state first_as_label data:us_subdivisions.states data:us_subdivisions.districts data:ca_subdivisions.provinces “State / Province” ]
</div>
</div>
</div>

<!– 3 Zip, Tax ID –>

<div class=”horizontalBlock”>
<div class=”leftBlock”>
<div class=”blockNameLeft”>
<label for=”zip”>Zip</label>
</div>
<div class=”blockFieldLeft”>
[text* zip id:zip placeholder “Zip”]
</div>
</div>
<div class=”rightBlock”>
<div class=”blockNameRight”>
<label for=”tax-id”>Tax ID</label>
</div>
<div class=”blockFieldRight”>
[text* tax-id id:tax-id placeholder “Tax ID”]
</div>
</div>
</div>

<!– 4 contactperson, contact title –>

<div class=”horizontalBlock”>
<div class=”leftBlock”>
<div class=”blockNameLeft”>
<label for=”name”> Contact Person</label>
</div>
<div class=”blockFieldLeft”>
[text* name id:name placeholder “Name”]
</div>
</div>
<div class=”rightBlock”>
<div class=”blockNameRight”>
<label for=”title”> Contact Title</label>
</div>
<div class=”blockFieldRight”>
[text title id:title placeholder "Title"]
</div>
</div>
</div>

<!– 5 contactperson, contact title –>

<div class=”horizontalBlock”>
<div class=”leftBlock”>
<div class=”blockNameLeft”>
<label for=”email”> Email Address</label>
</div>
<div class=”blockFieldLeft”>
[email* email id:email placeholder “Email Address”]
</div>
</div>
<div class=”rightBlock”>
<div class=”blockNameRight”>
<label for=”phone”> Contact Phone</label>
</div>
<div class=”blockFieldRight”>
[tel* phone id:phone placeholder “Phone Number”]
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Section 2. Company Information</legend>
[checkbox* services1 id:services1 “MOBILE” “SHOP”]

<!– 6 how long, service radius –>

<div class=”horizontalBlock”>
<div class=”leftBlock”>
<div class=”blockNameLeft”>
<label for=”howlong”> How long have you been in business?</label>
</div>
<div class=”blockFieldLeft”>
[number* howlong min:1 max:200 step:.5 id:howlong placeholder “1”] years
</div>
</div>
<div class=”rightBlock”>
<div class=”blockNameRight”>
<label for=”radius”> Service Radius</label>
</div>
<div class=”blockFieldRight”>
[number radius min:5 max:100 id:radius placeholder “5”] miles
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Section 3. Services Provided</legend>

<!– 7 services provided –>

<div class=”horizontalBlock”>
<div style=”float: left;min-width:30%;” >
<h5 style=”margin: 20px 10px 0px 15px;”>PDR</h5>
[checkbox* services id:services2 “PDR” “HAIL”]
</div>
<div style=”float: left;min-width:30%”>
<h5 style=”margin: 20px 10px 0px 15px;”>EXTERIOR</h5>
[checkbox services id:services3 “WHEEL REPAIR” “WINDSHIELD REPAIR” “DETAILING”]
</div>
<div style=”float: left;min-width:30%”>
<h5 style=”margin: 20px 10px 0px 15px;”>INTERIOR</h5>
[checkbox services id:services4 “LEATHER/VINYL” “FABRICS”]
</div>
</div>
</fieldset>[submit class:btn_blue id:form-next “Next”]
//end

Replies: 2

Hi,
as you see on the page there is a contact form with 7 fields.

I did a test now and entered data for each field. I thought I would get an email containing all the answers. But instead the email is half empty and looks like this:
https://pasteboard.co/K0xCCQa.png

How can I fix this?

Thank you!

Replies: 0

I usually open the form inside modal after generate it from an ajax call. after generate I init It and all seems to work fine. Firstly on submit the spinner run, then the console return the following error and redirect me in a new blank page like mywebsite.com/wp-admin/admin-ajax.php#wpcf7-f5-o1 with response 0.

index.js?ver=5.4.1:1 Uncaught TypeError: Cannot read property 'then' of undefined
    at index.js?ver=5.4.1:1
    at index.js?ver=5.4.1:1
    at d.reduceRight.c (index.js?ver=5.4.1:1)
    at index.js?ver=5.4.1:1
    at d.reduceRight.c (index.js?ver=5.4.1:1)
    at p (index.js?ver=5.4.1:1)
    at Object.v [as submit] (index.js?ver=5.4.1:1)
    at HTMLFormElement.<anonymous> (index.js?ver=5.4.1:1)

I generate the form in php after the button clicked like the follow:

add_action('wp_ajax_nopriv_sd_load_form_id', 'sd_load_form_id');
add_action('wp_ajax_sd_load_form_id', 'sd_load_form_id');

function sd_load_form_id() {

    check_ajax_referer( 'load-form-cf7', 'security');

    if( isset($_POST['sdpID']) ) :

        $form_id = $_POST['sdpID'];
    
        $form_id = filter_var( $form_id, FILTER_VALIDATE_INT );
    
        $form_title = $_POST['sdpTitle'];
    
        $form_title = filter_var( $form_title, FILTER_SANITIZE_STRING );
    
        if( $form_id && $form_title ) :
    
            sdp_get_form($form_id, $form_title);

        endif;

    endif;

    wp_die();

}

function sd_get_form($form_id, $form_title) {

    echo apply_filters('the_content', '[contact-form-7 id="'.$form_id.'" title="'.$form_title.'"]');

    die();

}

I load and init It with the script like this:

jQuery.ajax({
    type: "POST",
    url: blocks.url,
    cache: true,
    dataType: 'html',
    data: {
        action: blocks.action['get_form'],
        sdpID: sdpID,
        sdpTitle: sdpTitle,
        security: blocks.security,
    },
    complete: function (data) {
        if (data.status === 200) {
            sdpToggleModal(modal[0], 'open').then(function () {
                modalContent.append(data.responseText);
                let form = document.querySelector('div.wpcf7 > form');
                wpcf7.init( form );
            });
        }
        else {
            return false;
        }

    }
});

Where I failed?
ty

Replies: 1

Hi

I have CF7 throughout my site but this problem is more problematic on product pages. It takes ages for the successful message to show.

As a result customers are sometimes submitting three forms because they think it has gone wrong.

it is making our site look a bit pants so i am looking to at alternative forms.

Any help would be ideal.

Replies: 1

File does not enter Contact Form DB as an XLS file. Instead is shows random numbers/letter. Example: 0a39fda28975a99e67cbac86de8579c1

Replies: 1

Hi

I have a cf7 form in a Elementor popup and when I click submit there are two ajax-loader showing. I cannot figure out where the second one is coming from.

Validation is activated under “Additional Settings”-tab (acceptance_as_validation: on)

I also have “Contact Form 7 – Dynamic Text Extension” installed.

I hope someone can help shed some light on this?

Thanks

Replies: 1

Hey there.

I want to create a form with multiple single option list:

Imagine a grid with 10 diferent services, every service with a button called “get more info”, when i click in a button it will automaticly scroll the page to the form and select the option i want.

is it possible to do it?
thanks

Replies: 1

How to auto fill if present address is same as permanent address Contact Form 7″

Replies: 2

Hi there!

I guess that the answer will be “No, you cannot…”, but I would at least like to make sure it is…

I would like to use Contact Form 7 to capture visitor input via two forms – but in a way that is not really a multi-page form, I think. First, I ask a question which has two possible answers in the form of multiple choice answers. Answer A and answer B, but these are not part of the form.

Answer A is linked to an Icon, which, when clicked, takes the visitor to the second set of three questions, but on a completely new page (URL). The same happens for answer/icon B, but the link is, obviously, to a different web page.

The visitor clicks on either of these icons and is then taken to a second set of questions, each linked to a page with three more questions. Still no form, only clickable icons, which each lead to a third, and final, set of questions. So, answer icon A leads to questions C and D and E on page/URL 2 and question B leads another page/URL on which appear questions F, G and H.

If C is clicked (which can only happen if A was clicked in step 1), then it goes to page/URL 4, where questions I, J and K appear. And so it goes… I use clickable icons to allow the visitor to reach various final pages, depending on the answers given in steps 1 and 2 and 3.

I originally wanted to create a form to capture the visitor’s name, date of birth, email address and telephone number AFTER this final step, but have since decided that it may be better for my requirements to ask questions A and B, THEN TO INSERT HALF OF THE FORM FIELDS on the pages that those icons link to (ONLY with the fields for name and date of birth, with NO SUBMIT BUTTON YET), then to go to the URL for the relevant page following the answer in step 1 (choices A and B linking to different pages), then to ask those questions with no second page of a form, then to go to the final set of questions and once that is done and the visitor clicks on the final icon choice, to go to the second and final section of the form, where I will ask for email address and telephone number…

So, my question is about two forms placed on different, non-sequentially linked form pages, with two other non-form related steps in between – but I want the data from form 1 to be linked to the data from form 2, and only at the end of form 2, to capture the data, send emails etc… How do I get the data of form 1 into form 2? If it is possible with multi-page forms, I have no idea how to accomplish this because of all the in between steps that are non-form related…

In Contact Form 7, I saw a video which explains how to set up a multi-page contact form, but each step in the completion of the form is linked to “the form”. My requirement is for the first form and the second form to be “broken” by the user doing other stuff “outside the form” between form 1 and 2.

Is there any way of accomplishing what I’d like to do, please?

I do not want visitors to be logged in as users, if that is a possible answer… Or maybe…

Thanks guys!

Hope I made my delemma as clear as mud! hehe

Kindest possible regards

Harry

Replies: 1

Hello forum,

I used Contact Form 7 forms on a website.

https://website-einfach-mieten. Faktor1.de/problem-basic/

For some reason the form doesn’t shows any messages. Messages are not shown if you forget to fill in a mandatory field and the confirmation message that the form has been sent is also not displayed.

Appart of that the form works fine. Does anyone have an idea what the issue could be?

Thank you in advance for the help.

Best wishes

Frank

Replies: 2

When I try to generate errors on our Contact page at: https://www.achievekids.org/contact/ the errors are displayed and the URL is updated to https://www.achievekids.org/contact/#wpcf7-f540-p100-o1
On all our other sites, the URL would remain as https://www.achievekids.org/contact/ even after the errors are displayed.
I’m hoping you can help me figure out what update I need to make to retain the URL.
NOTE: We are also experiencing a problem I reported in another ticket where the error messages aren’t being displayed with the expected format – box around bottom error message and “This field is required” message does not appear in red.

Replies: 0

I’m building a website. I have Contact Form 7 Multilingualontact and WPML.

I created a contact form and clicked to translate. WMPL translates form but everything but acceptance line shows on the translated page.

Contact form

<label> Your name (mandatory)
    [text* your-name] </label>

<label> Your email (mandatory)
    [email* your-email] </label>

<label> Country (mandatory)
    [text* text-304] </label>

<label> Phone (optional)
    [tel tel-772] </label>

<label> Your message (mandatory)
    [textarea* your-message] </label>

[acceptance your-consent] I consent to the <a target=blank href="~/terms-conditions">terms and conditions</a>. [/acceptance]

[submit "Submit"]

On translated page I gate
Name
..
No acceptance line

Text box

Also translations seem to be glitchy. How can I resolve this?

Replies: 0

Hello I would like to get this form presentation (in link), can you help me?
Kind regards

Replies: 7

reCAPTCHA is not working I try to integrate but after that nothing is happenning form also not working to submit need help

Replies: 3

Hi Team,
I am using Contact7 form v-5.4

When I click on send then I get errors always. Sharing few screenshots of my settings and error too. Please have a look.

Image1 – https://ibb.co/G9S3y9b
Image2 – https://ibb.co/qy6qPRb

Please help.

• This topic was modified 21 hours, 45 minutes ago by vishakhanehe.