Contact form not usable on mobile

  • Resolved oscyp

    (@oscyp)


    4 months, 1 week ago

    If there are many form fields – the for cannot be swiped on mobile. Only text field can be touched to swipe the screen, buy any other fields cannot. There is a chance that if the non-text fields fill up all the screen, then the form cannot be swiped and proceed. How to fix this?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Where can we see the website in question?

    Thread Starter oscyp

    (@oscyp)

    https://omaks.pl/deklaracja-test

    When I add below code to my main theme CSS I am able to scroll by touching the checkboxes on my mobile. But I still cannot scroll by touching any text items.

    span.wpcf7-list-item {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
    }

    Sorry, textarea fields are scrollable – but text fields are not…

    • This reply was modified 4 months, 1 week ago by oscyp.
    • This reply was modified 4 months, 1 week ago by oscyp.
    Plugin Author Takayuki Miyoshi

    (@takayukister)

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

    Thread Starter oscyp

    (@oscyp)

    Contact Form 7 + all its plugins (purchased), its a fresh site.
    Yesterday I came to this:
    span.wpcf7-form-control-wrap,
    div.cf7_text_label {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    }

    – added to the global CSS.

    Now the form can be scrolled by touching most of it on mobile, but still I cannot scroll for example by touching an empty space between fields that are in two columns (using Visual editor for CF7).

    I tried to add the same code to the main container .wpcf7 but although the scrolling works good by touching any part of the form – it was cut on left and right side and the fields were not fully visible.

    Anyway, this is an issue with some CSS entries missing in the plugin’s code.
    I hope that my research was useful and you’ll be able to easily fix this.

    Thread Starter oscyp

    (@oscyp)

    But when I add it…

    span.wpcf7-form-control-wrap,
    div.cf7_text_label,
    div.cf7_text_shortcode {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    }

    …then all icons are broken (shifted)

    —edit–
    oh, images are not uploaded…

    • This reply was modified 4 months, 1 week ago by oscyp.
    Thread Starter oscyp

    (@oscyp)

    Any updates please?

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.