No success message upon subscribing Contact Form 7 form due to bs-contact-form-7 plugin

[anton-esin]

There is no error messages in console, the form works, we get the mails upon subscription, but there is no success message about it visible in frontend.

I see a success message, that is generated within screen-reader-response container, but this container visibility is set to display: none by bs-contact-form-7 plugin here:
https://github.com/bootscore/bs-contact-form-7/blob/main/assets/src/scss/bs-cf7-style.scss

Any idea why it is set to none there? And how I can achieve that the success message will be shown, apart of overriding scss of the plugin?

[crftwrk]

...but there is no success message about it visible in frontend.

Go to https://bootscore.me/documentation/plugins/bs-contact-form-7/, fill out the form and click the Send Message button. You will get a feedback alert if form submission failed/succeed. Maybe you have a conflict with a 3rd party plugin here? But this is impossible to say without having a link to your form to reproduce your issue and debug it. Make sure that you always share a link to understand what you mean.

screen-reader-response container, but this container visibility is set to display: none by bs-contact-form-7 plugin here

The screen-reader-response is for screen readers and not visible in the frontend. Plugin dequeues entire CF7 styles, so the screen-reader-response becomes visible because hidden styles from CF7 are dequeued, display: none simply fixes that. Agree that display: none is not the smartest way here, we can change this to a visually-hidden style, but this is not a game changer.

[anton-esin]

@neralex this div is not in my html structure at all after submitting. I see the new div with screen-reader-response, I see that form container get class sent, I get the message about subscribed form as admin usw. But success message at the bottom that is generated on a test page, that Basti gave earlier is not in html structure at all, so it doesn't look like css problem for me.

[anton-esin]

Deactivating the captcha plugin changes nothing. Success message is still only visible if bs Contact Form 7 plugin is deactivated.

[crftwrk]

Deactivating the captcha plugin changes nothing. Success message is still only visible if bs Contact Form 7 plugin is deactivated.

Your test site is removed, no debug anymore. I recommend to install a vanilla WP somewhere in the web, install Bootscore, both CF7 plugins and create a test form. Check if that works and then install your theme and step-by-step each plugin until you have found the issue. Then we can investigate further here.

[neralex]

@crftwrk, the main problems of this plugin:

• it deregistered the orginal stylesheet from Contact Form 7 completely
• it attempts to replace this representation itself using Bootstrap classes
• it modifies directly the shape of the form
• after a successful transmission, the specific success output is customized exclusively via this event:

document.addEventListener('wpcf7mailsent', function (event) {
	const form = event.target;
	const responseOutput = form.querySelector('.wpcf7-response-output');

	responseOutput.className = 'wpcf7-response-output';

	responseOutput.classList.add(
		'alert',
		'alert-icon',
		'alert-success',
		'alert-success-icon'
	);
});

When I created a new form with cf7 while using bootscore, then I'm using the class-parameter to add the related boostrap css-classes direktly to the shortcode of each field, without to shoot with a cannon like your plugin.

<label for="cf7-name" class="mb-2">Name</label>
    [text* your-name id:cf7-name class:form-control autocomplete:name]

<label for="cf7-email" class="mb-2">E-Mail-Adresse</label>
    [email* your-email id:cf7-email class:form-control autocomplete:email]

<label for="cf7-betreff" class="mb-2">Betreff</label>
    [text* your-subject id:cf7-betreff class:form-control]

<label for="cf7-text" class="mb-2">Nachricht</label>
    [textarea* your-message id:cf7-text class:form-control]

[submit class:btn class:btn-primary "Senden"]

If it is needed, I'm wrapping it into a div-container, depends where it should be placed finally.

The question is, where is the benefit of this plugin?

[crftwrk]

The question is, where is the benefit of this plugin?

• Bootstrap to checks, radios and their labels. Cannot be added simple in the form HTML markup.
• Bootstrap form validation
• Loading spinner in the send button
• Disabled send button if GDPR check is unchecked
• Bootstrap alert response output
• Multiple forms on the same site

There is some CSS that will be deleted later which makes the checks "exclusive" validation if selected in CF7 (This is wrong by CF7, because exclusive checks are radios. Just a fallback).

Overall it is a stable working horse, used for years without any problems by users and me on complex forms. Check it out https://bootscore.me/documentation/plugins/bs-contact-form-7/