Contact Form 7 – Error keeps appearing even when fields are filled

What other plugins and theme do you use on the site?

This tag:

[checkbox* Consent-6 use_label_element " "]

generates an empty checkbox:

<input type="checkbox" name="Consent-6[]" value="">

The checked state of a checkbox defines if it’s going to be sent. The value is what’s actually sent. RFC1378 doesn’t have an encoding for an empty string.

Just use the acceptance input type

[acceptance Consent-6 ] <span style="..."> I accept etc </span> [/acceptance]

• This reply was modified 2 years, 2 months ago by Felipe Figueroa.
• This reply was modified 2 years, 2 months ago by Felipe Figueroa.

Hi,

we got similar problem on a customers website – https://www.metzgerei-lowis.de/vorbestellungen/

Thanks @amenadiel for your tipp – i implemented the acceptance tag.
Unfortunately the problem is not solved ??

@takayukister
We use Enfold-Theme and on another site of the website gravity form – there are all forms inactive at the moment.

Further we use some addons for contact form 7:
Conditional Fields for Contact Form 7
Contact Form 7 Submission id
Contact Form 7 datepicker
Contact Form CFDB 7
Popup for Contact Form 7

Hope this will be helpful for you to solve the problem.

Greetings
Bernd

Hello

Having a similar issue with @skywalamedia.

Below are my pages;

https://www.wcoesarocb.org/first-esa-ict-conference/
https://www.wcoesarocb.org/rsg/

@takayukister let me answer your question:

Plugins that we use and are connected with Contact Form 7 are:
– Chimpmatic
– Contact Form 7
– Contact Form 7 Extension For Mailchimp
– Redirection for Contact Form 7
– Complianz | GDPR/CCPA Cookie Consent

Theme = Ocean WP
Builder = Elementor

Looking forward to here from you. If you need more insights or information, let me know!

@amenadiel this indeed solved the problem. BUT the reason I used the checkbox is because of formatting issues with the acceptance input type. It is impossible to create a simple text consent box without it having a ugly background, OR I have to change ALL the backgrounds. Or am I missing something here?

@amenadiel as you can see, the background of my ” ” is now like the other boxes. I just want a plain dark background…

Example of how I don’t want it to look (after I followed your instructions):
https://skywalamedia.com/tool-be-authentic/
example of how I don’t want it to look

Example of how I want it to look (but is not working anymore)
https://skywalamedia.com/tool-understand-your-audience/ example of how I want it to look

@skywalamedia it seems the only inconvenient would be the consent form control group showing up with a light gray background.

This is caused by a stylesheet rule that declares:

.elementor-6148 .elementor-element.elementor-element-4878ae0 .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio) {
    background-color: #FFFFFF;
    font-family: var( --e-global-typography-text-font-family ), Sans-serif;
    font-size: var( --e-global-typography-text-font-size );
    font-weight: var( --e-global-typography-text-font-weight );
    text-transform: var( --e-global-typography-text-text-transform );
    font-style: var( --e-global-typography-text-font-style );
    line-height: var( --e-global-typography-text-line-height );
    border-radius: 10px 10px 10px 10px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

This is roughly the same as a rule declaring:

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio) {
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

This rule provides clear background and rounded corners for your text fields. It avoids styling control groups whose selector relates to submit buttons, checkboxes or radio fields. It would, therefore, affect the style of other kinds of control groups such as a .wpcf7-textarea or .wpcf7-select. It is, right now, affecting your .wpcf7-acceptance group.

If you know where to edit said rule to exclude acceptance:

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio):not(.wpcf7-acceptance)

that would be the shortest route. Otherwise, you can always target the acceptance group explicitly right in your contact form

.wpcf7 .wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance {
    background-color:inherit !important;
}

If you do the latter, you’d have to do it in every form.

Having that part sorted out, you can restore the white text for the consent description.

@boehmbernd in your case, the invalid input is the date field. This is what comes in response to the pre-validation

{
    "contact_form_id": 687,
    "status": "validation_failed",
    "message": "Ein oder mehrere Felder sind fehlerhaft. Bitte überprüfe sie und versuche es noch einmal.",
    "invalid_fields": [
        {
            "field": "your-date",
            "message": "Das Datumsformat ist ungültig.",
            "idref": null,
            "error_id": "wpcf7-f687-p688-o1-ve-your-date"
        }
    ],
    "posted_data_hash": "",
    "into": "#wpcf7-f687-p688-o1"
}

So I’d say in your case the culprit is Contact Form 7 datepicker. I wouldn’t know which specific datepicker plugin do you use, but current browsers, all of them, have native support for date inputs with nice datepicker controls.

CF7 also supports date inputs natively.

However, please note that, as per the HTML5 standard, the visitor is presented with his own locale format, but internally the browser send the value formatted as per ISO-8601, YYYY-MM-DD. Your plugin, instead, sends the displayed format DD.MM.YYYY verbatim. My suggestion is: deactivate that plugin and replace the input with a date field.

Ref: MDN’s documentation:

Note: The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user’s browser, but the parsed value is always formatted yyyy-mm-dd.

@erickaburu you’re using the same plugin as @boehmbernd. It’s sending the date with format DD/MM/YYYY verbatim, which is invalid.

Nowadays, every browser has support for date, time and even combined datetime inputs, and CF7 too, accordingly. Use those field types and let the browser do its job.

If you insist in using a plugin, due to an aesthetical consideration, by all means look for a plugin that delegates to modern datepickers (e.g. pickaday or flatpickr). jQueryUI datepicker widget has been obsolete for almost a decade now.

• This reply was modified 2 years, 2 months ago by Felipe Figueroa.

@amenadiel
Thanks Felipe! That’s it. Now it works nicely.

Have a nice day.

Thank you Felipe. Works like a charm.
@amenadiel

@amenadiel Where should I put which code exactly? This is too complex for me to understand. Thank you for the elaborate answer.

@skywalamedia If you don’t mind repeating the following step on each of your products, the simplest way it’s to add a style element right after your submit field. Your form would end with something like:

[acceptance Consent-6 ] <span style="font-size:65%;color:#F5F5F5"> I accept the </span> <a href="/terms-and-conditions/" target="_blank" rel="noopener"> terms & conditions</a> <span style="font-size:65%;color:#F5F5F5"> and </span> <a href="/privacy-policy/" target="_blank" rel="noopener"> privacy policy </a><span style="font-size:65%;color:#F5F5F5">*</span> [/acceptance]

[submit "Send me the Template"]

<style>
  .wpcf7 .wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance {
      background-color:inherit !important;
  }
</style>

Oficially, style tags belong to the document’s head and also this fix is a tad inneficient, having to copy and paste this style on every form. But if you’re not accustomed to tweak your themes and plugins yourself, then by all means play it safe.

• This reply was modified 2 years, 2 months ago by Felipe Figueroa.

Only for unsubscribing follow-up replies – my problem has solved already ??