Hi!
I see that Contact Form 7 (WPCF7) plugin generate your input fields with style=”width: 0px;”, that is why the fields are too narrow.
You can see it on the attached screenshot (goandweb1.png) and the html code below:
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Nombre / Empresa *" style="width: 0px;">
We try the plugin and WPCF7 plugin on another site, and they work together perfectly (see the second attached screenshot – goandweb2.png).
We do not know what is the reason of Contact Form 7 generate 0 px wide fields on your site, but “width: 0px;” tag is definitely in Contact Form 7 line, so we suppose ask Contact Form 7 support about it.
Some more ideas:
- Please insert some other context before the form on the tab, because on Descripción tab contains other content, not only the form, and on that tab form display was correct. There is no difference between standard Descripción tab and your custom tab (both generated by WooCommerce, our plugin just defines another tab, WooCommerce displays it but do not apply any CSS or HTML settings).
- Please see Contact Form 7 settings, if you have parameters about field width, please try to change it (ig. a fix width)
- Maybe try to activate another style, to see if the problem still exists? So the problem depend on the style or not?
One more interesting behavior of Contact Form 7 on your site: if I right click on a field and chose “Inspect element” menu in Chrome, the form will be displayed perfectly. You may ask the reason of it from Contact Form 7 support also. (See the 3. attached screenshot – goandweb3.png)
So this problem seems to be in connection with Contact Form, please ask them, try out the ideas above (especially the first).
If you have more questions, or if have have the answer of Contact Form support, please let us know and do not hesitate to contact us.
Best Regards,
Peter Rath
WebshopLogic