Contact Form 7 (5.5.4) – fields cannot be filled out with mobile devices

  • Hello,
    did anybody of you notice, that fields sometimes cannot be filled out with mobile devices?

    The fields cannot be touched, it only works with the text-area.

    The code that does not work:

    
<div id="contact-form">
  <div class="col-md-12">
    <div class="form-single">[text* your-name class:form-control placeholder "Name"] 
    </div>
  </div>
  <div class="col-md-12">
    <div class="form-single two">[email* your-email class:form-control placeholder "E-Mail-Adresse"]
    </div>
  </div>
    <div class="col-md-12">
      <div class="form-textarea">[textarea your-message class:form-control placeholder "Nachricht"
      </div>
      <div class="form-button">[submit  class:form-control class:contact-submit  class:contact-small "Absenden"]
      </div>
  </div>
</div>

    As a quick solution I have replaced class=”form-single” and class=”form-single two” in class=”kontakt-zwei” – then it works but looks a bit different.

    For any solutions thanks a lot.

    Best regards
    Timo

    • This topic was modified 2 years, 10 months ago by tsz01.
    • This topic was modified 2 years, 10 months ago by Yui. Reason: formatting
Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Where can we see the website in question?

    Thread Starter tsz01

    (@tsz01)

    Hello @takayukister,

    to show an example or the difference:

    Link 1 – the contact form does not work with mobile devices:
    https://gassmann-seidel.de/20000120-nio/

    Link 2 – this contact form is working:
    https://gassmann-seidel.de/contact-us/

    For any solutions thanks a lot.

    Best regards
    Timo

    Plugin Author Takayuki Miyoshi

    (@takayukister)

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

    Thread Starter tsz01

    (@tsz01)

    The Theme is called “Drubo”, the PlugIns are

    advanced-floating-content
    advanced-random-posts-widget
    classic-widgets
    cmb2
    contact-form-7
    cookie-notice
    disable-admin-notices
    drubo-core
    duplicate-page
    flamingo
    hamburger-icon-menu-lite
    health-check
    imagemagick engine
    kc_pro
    kingcomposer
    loco-translate
    random gallery
    redux-framework
    wordpress-importer
    wp-mail-smtp
    wp-user-avatar

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Try switching to the default theme, deactivating all plugins excluding Contact Form 7, Classic Widgets, Flamingo, WordPress Importer and WP Mail SMTP, and clearing all cache data.

    Why you are advised to deactivate plugins and switch to the default theme.

    Thread Starter tsz01

    (@tsz01)

    Is this the only way to get a solution?

    The site is already online, I think the customer (lawyers) will not agree to this.

    Is there no possibility to find a workaround with css like I did für the moment?

    Hi @tsz01,

    I could have isolated the issue to happening exactly when screen width decreases from 992px to 991px or narrower.

    I still haven’t isolated the root cause, however suspect it could be related to WP Bakery vc_secion or browser’s element styles. I have noticed, the css: left, padding-left and padding-right, may change from 0px to 1px.

    Also, please note this happens to me only on some forms.

    • This reply was modified 2 years, 7 months ago by ziegel.

    Hi @tsz01,

    I have also noticed something strange happening on your example:
    https://gassmann-seidel.de/20000120-nio/

    For the DIV element having the classes “kc-elm kc-css-597625 kc_col-sm-6 kc_column kc_col-sm-6”, the values of margin-top, padding-right, and padding-left, which are calculated as a percentage of total width, unexpectedly dramatically change at the point where screen width decreases from 992px to 991px.

    Any thoughts?

    Hi @tsz01,

    I have found my root cause, which may be different than yours.

    I had some attributes around StepError which some how made the CLICK event of INPUT fields gain the prop/attribute of DISBALED up to the BootStrap breaking point of 992px decreasing to 991px screen width (minus the 17px scrolling bar).

    @tsz01
    Remove ‘col-md-12’ class and it work.
    There seems to be a problem with the CSS.
    https://www.evernote.com/l/ABv5yeBySAJJV6LCAWHiWtHhdElzOew8jyk

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Contact Form 7 (5.5.4) – fields cannot be filled out with mobile devices’ is closed to new replies.