WP Forms Adding Unwanted Field In Modals or Off-Canvas

[whitemedia]

Hi,

I have noticed strange behaviour when using a WP Form within a modal or off-canvas element.

For some reason, an extra field appears in the form, even though it does not actually exist. I have experienced this on several different websites, always in modals or off-canvases. Please see the screenshot.

I am able to hide the unwanted field using CSS on the field’s ID, but this is not something which should have to be done, as the field does not exist in the actual form!

Please note that if the form integration is used directly in a column (i.e. not in a modal or off-canvas), the form displays correctly.

Thanks,
Christopher

[tristup]

Hi Christopher,

Thanks for reaching out.
I have checked and found the additional form field is coming in a different place than what you have shown, and every time the position keeps changing. I have created a new page and added the form using the Text and Form Integration element, although it is showing the additional fields within the Cornerstone, it shows the correct output while seeing it in the browser.
It seems that there might be some different reasons behind your issue, I would like to suggest troubleshooting the following common issue to help us to recognize the reason.

1.Theme Related Issue
2.Plugin Conflict
3.Theme Update related issue
4.Child Theme Related issue
5.CSS/JS Customization
6.Disabling Cache
7.Disabling CDN

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins unless you are subscribed to One. If not subscribed, kindly consult with a developer or contact the plugin author.
Please note that we do not provide support for custom codes and 3rd party plugins unless you are subscribed to One service.
If none of the above helps, please copy your live site to a staging server so we can troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[whitemedia]

Hi,

There is no caching on this website yet, as it is under development. I have disabled all plugins, except for the bundled WP Forms Lite. I also removed all functions from the child theme. Despite this, this strange field remains in the form.

However, I have discovered the source of the problem. The field is WP Forms’ honey pot field. It is enabled through WP Forms > Settings >Spam Protection and Security > Enable modern anti-spam protection toggle.

According to WP Forms’ documentation, this field should be invisible, but it is not if the setting is enabled. @charlie could a conflict have crept in with Cornerstone? I have only encountered this issue within the past four weeks.

Thanks,
Christopher

[ruenel]

Hey Christopher,

Please make sure that your field size is large which will also have a fullwidth 100% width.

I am also confused with your form because the live view and the editor view is different:

Thanks.

[whitemedia]

Hi @ruenel,

All my fields are “Large” except the Message / text area field, which I need to be medium or it grows too deep. However, this is not a part of the problem.

Correct, the admin view of the form is different to the front end. As I tried to explain in my last response, the field you can see on the front end, which is the only field to have a heading Message Dropdown Name, is the problem field. I have discovered it only appears if anti-spam / reCAPTCHA is switched on in WP Forms’ main settings. Switch it off and the field disappears. It is clearly the honeypot field, which should not be visible on the front end.

This is why I wondered if there is a recent conflict between WP Forms and Cornerstone. Both of the recent websites where I have encountered this problem are brand-new builds and the behaviour only happens in modals and off-canvas elements. Both of these websites were created with Cornerstone 6.6.6 or 6.6.7. Other websites built with older versions of CS and have the EXACT same setup in the modals do not seem to have the issue.

Are you able to replicate the problem in a fresh new WP installation, adding a Form Integration element into a modal or off-canvas component?

Thanks,
Christopher

[ruenel]

Hello Christopher,

I have checked the form field element and it seems that it is displaying as medium.

By default, the WP Form plugin has this default CSS styling:

.wpforms-container input.wpforms-field-medium {
    width: 60%;
}

You can override this by changing the width to 100%.

.x-form-integration .wpforms-container input.wpforms-field-medium {
    width: 100%;
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You must maintain any custom coding to ensure it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

[whitemedia]

Hi @ruenel,

I am sorry, but I think you are missing the problem! No field’s width is an issue here.

The only issue is that a field which is meant to be hidden by default displays randomly in the form. The field with the heading is a honeypot field and not a field I have added to the form. This field only exists if the WP Form global setting to turn on anti-spam (reCAPTCHA) is toggled on.

Thanks,
Christopher

[Ismael]

We can reproduce the issue, but we’re not yet sure what’s causing it. When the Protection > Enable modern anti-spam protection is active, an input field is randomly added to the form in different locations with each load. This field is supposed to be invisible, but it’s not. It seems the input field is missing a specific class name or style attribute. Does it work correctly when you switch to a default theme?

We recommend disabling the option temporarily, or consider placing the contact form outside the Off Canvas element. This extra spam protection is good to have but Google reCAPTCHA v3 is already enabled, so the form should still be effectively protected even without it.

[whitemedia]

Hi @Ismael,

Thanks for confirming that you can replicate the problem.

Switching to a default theme is surely irrelevant, as the issue only arises when using a Cornerstone modal or off-canvas, which would not be available in a default theme?

From your reply, am I correct in understanding that the Protection > Enable modern anti-spam protection only relates to the honeypot functionality and has nothing to do with reCAPTCHA?

Thanks,
Christopher

[christian]

Hey Christopher,

@whitemedia

Switching to a default theme is surely irrelevant, as the issue only arises when using a Cornerstone modal or off-canvas, which would not be available in a default theme?

If the issue only happens in the Off Canvas element, this could mean that WP Forms does not take into account Javascript based rendering. Please contact WP Forms support to confirm that or have them take a screenshot that their form works with other Off Canvas or Modal plugins or functions.

@whitemedia

From your reply, am I correct in understanding that the Protection > Enable modern anti-spam protection only relates to the honeypot functionality and has nothing to do with reCAPTCHA?

Regretfully, we cannot answer this as we are not the developers of the WP Forms plugin. Please contact the WPForms support to confirm.

Thank you.