Submit Button not working on mobile

  • Resolved siptee

    (@siptee)


    1 year ago

    So basically I’m having the problem that my form which I created is working perfectly fine on Desktop, but the submit button won’t trigger on mobile.

    I have a second site, which is almost identical, but there the form works on desktop & mobile. –> https://wopake.de/kontakt/

    I dont even know what I can change wo make the submit button trigger on mobile..

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support putra1arya

    (@putra1arya)

    Hello @siptee
    I try both of your form on mobile mode and it trigger on mobile.
    Can you show us the screenshot when the submit button not triggered. And if you see an error on the browser console, can you send the screenshot too?
    And we need your gutenverse system status

    Thread Starter siptee

    (@siptee)

    Attached you’ll find a video of me trying to trigger the button, also a screenshot of the error I see in the browser console. 

    THEME INFO

Theme Name : Restance
Theme Version : 1.0.4 WordPress Environment

Home URL : https://wopake.de/
Site URL : https://wopake.de
Login URL : https://wopake.de/wp-login.php
WP Version : 6.3.2
WP Multisite : -
WP Debug Mode : Disabled
PHP Memory Limit : -1
WP Memory Limit : 40M
WP Language : de_DE
WP Upload Directory : ?
Number of Category : 1
Number of Tag : 0 Server Environment

Server Info : Apache
PHP Version : 8.0.30
PHP Post Max Size : 64M
PHP Time Limit : 50000
PHP Max Input Vars : 5000
SUHOSIN Installed : -
WP Remote Get : ?
PHP Image library installed : -
PHP GD library installed : ?
PHP GD WebP supported : ?
PHP fileinfo library installed : ?
CURL Installed : ? Active Plugins

Antispam Bee : by pluginkollektiv - 2.11.5
Gutenverse : by Jegstudio - 1.8.8
IONOS Assistant : by IONOS - 8.5.6
IONOS Help : by IONOS - 2.2.1
IONOS Journey : by IONOS - 2.0.0
IONOS Login : by IONOS - 2.2.1
IONOS Navigation : by IONOS - 1.0.7
IONOS Performance : by IONOS - 2.0.3
IONOS Security : by IONOS - 1.1.0
Real Cookie Banner (Free) : by devowl.io - 3.13.3
WP Mail SMTP : by WP Mail SMTP - 3.9.0
Yoast SEO : by Team Yoast - 21.3

    https://streamable.com/9ev6la
    Thread Starter siptee

    (@siptee)

    Forgot to attach the Error, there you go:

    https://postimg.cc/Z9tV6RH6

    • This reply was modified 1 year ago by siptee.
    Plugin Support putra1arya

    (@putra1arya)

    Hello @siptee,
    I can’t access the error and the video.
    https://ibb.co/N37ND6f
    https://ibb.co/4WyN9t7

    Can you reupload the error and the video on the google drive? Please make sure to change general access to “Anyone With the Link”

    Thread Starter siptee

    (@siptee)

    https://drive.google.com/file/d/1X_AEK9MkCOdY6DuE_XXA4VNtD2XNkGwy/view?usp=sharing

    https://drive.google.com/file/d/1lZY-CZXfjvmV50whIV6eyEArS-LWtrV1/view?usp=sharing

    Hope this works ??

    Thread Starter siptee

    (@siptee)

    Also I just found an other error message I get on mobile:

    https://ibb.co/yXfRbLJ

    Plugin Support putra1arya

    (@putra1arya)

    Hello @siptee,
    Can you send us the code of the form?

    Thread Starter siptee

    (@siptee)

    <!-- wp:gutenverse/section {"elementId":"guten-eYFsq5"} -->

<div class="section-wrapper" data-id="eYFsq5"><section class="wp-block-gutenverse-section guten-element guten-section guten-eYFsq5 layout-boxed align-stretch"><div class="guten-background-overlay"></div><div class="guten-shape-divider guten-shape-divider-top"></div><div class="guten-shape-divider guten-shape-divider-bottom"></div><div class="guten-container guten-column-gap-default"><!-- wp:gutenverse/column {"width":{"Desktop":100},"elementId":"guten-83qwsQ"} -->

<div class="wp-block-gutenverse-column guten-element guten-column guten-83qwsQ"><div class="guten-background-overlay"></div><div class="sticky-wrapper" data-id="83qwsQ"><div class="guten-column-wrapper"><!-- wp:gutenverse/form-builder {"elementId":"guten-9cmfYd","formId":{"label":"Anfragen Best?tigung | Reservierung","value":259},"hideAfterSubmit":false} -->

<form style="display:none" class="guten-element guten-form-builder guten-9cmfYd" data-form-id="259" data-hide-after="false"><!-- wp:gutenverse/form-input-text {"elementId":"guten-YocJrx","inputLabel":"Vor-\u0026amp;nachname","inputPlaceholder":"Max Mustermann","inputName":"Vor-\u0026nachname","showHelper":false,"required":true} -->

<div class="guten-element guten-form-input-text guten-form-input guten-input-position-top guten-YocJrx hide-helper"><div class="label-wrapper"><label class="input-label">Vor-&amp;nachname</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;text&quot;,&quot;required&quot;:true,&quot;validationType&quot;:&quot;none&quot;,&quot;validationWarning&quot;:&quot;Input Invalid&quot;}" placeholder="Max Mustermann" name="Vor-&amp;nachname" class="gutenverse-input gutenverse-input-text" type="text"/><div class="validation-error">Input Invalid</div></div></div>

<!-- /wp:gutenverse/form-input-text -->

<!-- wp:gutenverse/form-input-text {"elementId":"guten-rPeo6Q","inputLabel":"Stra?e und hausnummer","inputPlaceholder":"Beispielstra?e 10","inputName":"Stra?e und hausnummer","showHelper":false,"required":true} -->

<div class="guten-element guten-form-input-text guten-form-input guten-input-position-top guten-rPeo6Q hide-helper"><div class="label-wrapper"><label class="input-label">Stra?e und hausnummer</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;text&quot;,&quot;required&quot;:true,&quot;validationType&quot;:&quot;none&quot;,&quot;validationWarning&quot;:&quot;Input Invalid&quot;}" placeholder="Beispielstra?e 10" name="Stra?e und hausnummer" class="gutenverse-input gutenverse-input-text" type="text"/><div class="validation-error">Input Invalid</div></div></div>

<!-- /wp:gutenverse/form-input-text -->

<!-- wp:gutenverse/form-input-text {"elementId":"guten-i9yzNr","inputLabel":"stadt","inputPlaceholder":"Freiburg","inputName":"stadt","showHelper":false,"required":true} -->

<div class="guten-element guten-form-input-text guten-form-input guten-input-position-top guten-i9yzNr hide-helper"><div class="label-wrapper"><label class="input-label">stadt</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;text&quot;,&quot;required&quot;:true,&quot;validationType&quot;:&quot;none&quot;,&quot;validationWarning&quot;:&quot;Input Invalid&quot;}" placeholder="Freiburg" name="stadt" class="gutenverse-input gutenverse-input-text" type="text"/><div class="validation-error">Input Invalid</div></div></div>

<!-- /wp:gutenverse/form-input-text -->

<!-- wp:gutenverse/form-input-text {"elementId":"guten-QeTdJe","inputLabel":"Postleitzahl","inputPlaceholder":"12345","inputName":"Postleitzahl","showHelper":false,"required":true} -->

<div class="guten-element guten-form-input-text guten-form-input guten-input-position-top guten-QeTdJe hide-helper"><div class="label-wrapper"><label class="input-label">Postleitzahl</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;text&quot;,&quot;required&quot;:true,&quot;validationType&quot;:&quot;none&quot;,&quot;validationWarning&quot;:&quot;Input Invalid&quot;}" placeholder="12345" name="Postleitzahl" class="gutenverse-input gutenverse-input-text" type="text"/><div class="validation-error">Input Invalid</div></div></div>

<!-- /wp:gutenverse/form-input-text -->

<!-- wp:gutenverse/form-input-text {"elementId":"guten-QOwXTo","inputLabel":"land","inputPlaceholder":"Deutschland","inputName":"land","showHelper":false,"required":true} -->

<div class="guten-element guten-form-input-text guten-form-input guten-input-position-top guten-QOwXTo hide-helper"><div class="label-wrapper"><label class="input-label">land</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;text&quot;,&quot;required&quot;:true,&quot;validationType&quot;:&quot;none&quot;,&quot;validationWarning&quot;:&quot;Input Invalid&quot;}" placeholder="Deutschland" name="land" class="gutenverse-input gutenverse-input-text" type="text"/><div class="validation-error">Input Invalid</div></div></div>

<!-- /wp:gutenverse/form-input-text -->

<!-- wp:gutenverse/form-input-text {"elementId":"guten-8sFbia","inputLabel":"Telefonnummer","inputPlaceholder":"+49 123 456789","inputName":"Telefonnummer","showHelper":false,"required":true} -->

<div class="guten-element guten-form-input-text guten-form-input guten-input-position-top guten-8sFbia hide-helper"><div class="label-wrapper"><label class="input-label">Telefonnummer</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;text&quot;,&quot;required&quot;:true,&quot;validationType&quot;:&quot;none&quot;,&quot;validationWarning&quot;:&quot;Input Invalid&quot;}" placeholder="+49 123 456789" name="Telefonnummer" class="gutenverse-input gutenverse-input-text" type="text"/><div class="validation-error">Input Invalid</div></div></div>

<!-- /wp:gutenverse/form-input-text -->

<!-- wp:gutenverse/form-input-text {"elementId":"guten-imjF1B","inputLabel":"Mailadrese","inputPlaceholder":"[email protected]","inputName":"Mailadrese","showHelper":false,"required":true} -->

<div class="guten-element guten-form-input-text guten-form-input guten-input-position-top guten-imjF1B hide-helper"><div class="label-wrapper"><label class="input-label">Mailadrese</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;text&quot;,&quot;required&quot;:true,&quot;validationType&quot;:&quot;none&quot;,&quot;validationWarning&quot;:&quot;Input Invalid&quot;}" placeholder="[email protected]" name="Mailadrese" class="gutenverse-input gutenverse-input-text" type="text"/><div class="validation-error">Input Invalid</div></div></div>

<!-- /wp:gutenverse/form-input-text -->

<!-- wp:gutenverse/divider {"elementId":"guten-lxQudW"} -->

<div class="wp-block-gutenverse-divider guten-element guten-divider guten-lxQudW"><div class="guten-divider-wrapper"><div class="guten-divider-default guten-divider-line guten-divider-regular"></div></div></div>

<!-- /wp:gutenverse/divider -->

<!-- wp:gutenverse/form-input-text {"elementId":"guten-y9bPmB","inputLabel":"Anzahl Personen","inputPlaceholder":"z. B. 1","inputName":"Anzahl Personen","showHelper":false,"required":true} -->

<div class="guten-element guten-form-input-text guten-form-input guten-input-position-top guten-y9bPmB hide-helper"><div class="label-wrapper"><label class="input-label">Anzahl Personen</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;text&quot;,&quot;required&quot;:true,&quot;validationType&quot;:&quot;none&quot;,&quot;validationWarning&quot;:&quot;Input Invalid&quot;}" placeholder="z. B. 1" name="Anzahl Personen" class="gutenverse-input gutenverse-input-text" type="text"/><div class="validation-error">Input Invalid</div></div></div>

<!-- /wp:gutenverse/form-input-text -->

<!-- wp:gutenverse/form-input-text {"elementId":"guten-LHWH97","inputLabel":"Anzahl Kinder","inputPlaceholder":"z. B. 1","inputName":"Anzahl Kinder","showHelper":false,"required":true} -->

<div class="guten-element guten-form-input-text guten-form-input guten-input-position-top guten-LHWH97 hide-helper"><div class="label-wrapper"><label class="input-label">Anzahl Kinder</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;text&quot;,&quot;required&quot;:true,&quot;validationType&quot;:&quot;none&quot;,&quot;validationWarning&quot;:&quot;Input Invalid&quot;}" placeholder="z. B. 1" name="Anzahl Kinder" class="gutenverse-input gutenverse-input-text" type="text"/><div class="validation-error">Input Invalid</div></div></div>

<!-- /wp:gutenverse/form-input-text -->

<!-- wp:gutenverse/divider {"elementId":"guten-vbETRZ"} -->

<div class="wp-block-gutenverse-divider guten-element guten-divider guten-vbETRZ"><div class="guten-divider-wrapper"><div class="guten-divider-default guten-divider-line guten-divider-regular"></div></div></div>

<!-- /wp:gutenverse/divider -->

<!-- wp:gutenverse/form-input-date {"elementId":"guten-5SBOTo","showHelper":false,"inputLabel":"Ankunft","inputPlaceholder":"","inputName":"ankunft"} -->

<div class="guten-element guten-form-input-date guten-form-input guten-input-position-top guten-5SBOTo hide-helper"><div class="label-wrapper"><label class="input-label">Ankunft</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;date&quot;,&quot;required&quot;:true}" data-date="{&quot;dateFormat&quot;:&quot;F j, Y&quot;}" placeholder="" name="ankunft" class="gutenverse-input gutenverse-input-date" type="text"/><div class="validation-error"></div></div></div>

<!-- /wp:gutenverse/form-input-date -->

<!-- wp:gutenverse/form-input-date {"elementId":"guten-NE1Aej","showHelper":false,"inputLabel":"Abreise","inputPlaceholder":"","inputName":"abreise"} -->

<div class="guten-element guten-form-input-date guten-form-input guten-input-position-top guten-NE1Aej hide-helper"><div class="label-wrapper"><label class="input-label">Abreise</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;date&quot;,&quot;required&quot;:true}" data-date="{&quot;dateFormat&quot;:&quot;F j, Y&quot;}" placeholder="" name="abreise" class="gutenverse-input gutenverse-input-date" type="text"/><div class="validation-error"></div></div></div>

<!-- /wp:gutenverse/form-input-date -->

<!-- wp:gutenverse/divider {"elementId":"guten-sfjFud"} -->

<div class="wp-block-gutenverse-divider guten-element guten-divider guten-sfjFud"><div class="guten-divider-wrapper"><div class="guten-divider-default guten-divider-line guten-divider-regular"></div></div></div>

<!-- /wp:gutenverse/divider -->

<!-- wp:gutenverse/form-input-text {"elementId":"guten-ZQoNWr","inputLabel":"KFZ-Kennzeichen","inputPlaceholder":"EM XX 1234","inputName":"KFZ-Kennzeichen","showHelper":false,"hideDesktop":false,"hideTablet":false,"hideMobile":false,"required":true} -->

<div class="guten-element guten-form-input-text guten-form-input guten-input-position-top guten-ZQoNWr hide-helper"><div class="label-wrapper"><label class="input-label">KFZ-Kennzeichen</label><span class="required-badge">*</span></div><div class="main-wrapper"><input data-validation="{&quot;type&quot;:&quot;text&quot;,&quot;required&quot;:true,&quot;validationType&quot;:&quot;none&quot;,&quot;validationWarning&quot;:&quot;Input Invalid&quot;}" placeholder="EM XX 1234" name="KFZ-Kennzeichen" class="gutenverse-input gutenverse-input-text" type="text"/><div class="validation-error">Input Invalid</div></div></div>

<!-- /wp:gutenverse/form-input-text -->

<!-- wp:gutenverse/form-input-radio {"elementId":"guten-BGqIdW","showHelper":false,"hideDesktop":false,"hideTablet":false,"hideMobile":false,"inputLabel":"Stellplatz Auswahl","inputName":"Stellplatz Auswahl","radioOptions":[{"value":"10×6 Meter","label":"10×6 Meter","_key":"oO7PzN"},{"value":"8×5,5 Meter","label":"8×5,5 Meter","_key":"gJKmMf"},{"value":"12×8,5 Meter","label":"12×8,5 Meter","_key":"Jywprp"}],"required":true} -->

<div class="guten-element guten-form-input-radio guten-form-input guten-input-position-top guten-BGqIdW hide-helper"><div class="label-wrapper"><label class="input-label">Stellplatz Auswahl</label><span class="required-badge">*</span></div><div class="main-wrapper"><div class="gutenverse-inner-input default"><div hidden name="Stellplatz Auswahl" class="gutenverse-input" data-validation="{&quot;type&quot;:&quot;radio&quot;,&quot;required&quot;:true,&quot;validationWarning&quot;:&quot;Input Invalid&quot;}"></div><label><input name="Stellplatz Auswahl" value="10×6 Meter" class="gutenverse-input-radio" type="radio"/><span class="radio">10×6 Meter</span></label><label><input name="Stellplatz Auswahl" value="8×5,5 Meter" class="gutenverse-input-radio" type="radio"/><span class="radio">8×5,5 Meter</span></label><label><input name="Stellplatz Auswahl" value="12×8,5 Meter" class="gutenverse-input-radio" type="radio"/><span class="radio">12×8,5 Meter</span></label></div><div class="validation-error">Input Invalid</div></div></div>

<!-- /wp:gutenverse/form-input-radio -->

<!-- wp:gutenverse/form-input-submit {"elementId":"guten-LCCcEP","content":"Reservierung abschicken","buttonBackground":{"type":"default","color":{"r":25,"g":81,"b":0,"a":1}},"buttonBorder":{"radius":{"Mobile":{}}},"color":{"r":255,"g":255,"b":255,"a":1},"alignButton":{"Mobile":"center","Desktop":"center"},"paddingButton":{"Mobile":{},"Desktop":{}}} -->

<div class="guten-element guten-button-wrapper guten-submit-wrapper guten-LCCcEP"><div class="form-notification"></div><button class="guten-button gutenverse-input-submit guten-button-sm" type="submit"><span>Reservierung abschicken</span></button><div class="gutenverse-input-submit-loader"><i class="fas fa-spinner fa-spin"></i></div></div>

<!-- /wp:gutenverse/form-input-submit --></form>

<!-- /wp:gutenverse/form-builder --></div></div></div>

<!-- /wp:gutenverse/column --></div></section></div>

<!-- /wp:gutenverse/section -->
    Plugin Support putra1arya

    (@putra1arya)

    Hello @siptee
    We found that this problem happen because there is a bug in our input date block.
    We will try to fix this bug in the next update

    ligitas

    (@ligitas)

    Hello, when you are planning to release update? I have same problem and it’s frustrating, that clients can’t contact us.
    Please let me know at least approximately date, so I should know if I have to rebuild contact forms with another plugin, or should I wait

    Plugin Support putra1arya

    (@putra1arya)

    Hello @ligitas and @siptee,
    The update will be done this week if there are no other problem.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Submit Button not working on mobile’ is closed to new replies.