Jump to content

Contact Form on Mobile

Go to solution Solved by paul2009,

Recommended Posts

9 minutes ago, agne said:

Site URL: https://www.bespokenhome.com/contact

Hi!

My contact form is not working on mobile devices. I can't scroll down and therefore I don't see what I am writing in the message box and it also shakes when I am trying to scroll. So, it is impossible to send a message.

Does anyone know what could be the problem?

Any advice would be very much appreciated!

 

https://www.bespokenhome.com/contact

I used on it samsung device and still can scroll as well as typing message, which one you used

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

I have done some customization on the form. 

Maybe one of the codes could have led to this?

The problem is that the keyboard blocks the message, and you can't see what you are writing, and can't scroll down to see.

 

/* form settings */
.form-wrapper .field-list .title {
  font-family: poppins;
  font-size: 13px;
  color: #black;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.form-wrapper .field-list .field .caption {
  font-family: soleil;
  font-size: 9px;
  color: #000000;
  letter-spacing: .1em;
}

.form-wrapper .field-list .field .field-element {
  background-color: #EDEDEB;
  border: 1.5px solid #ADA6A0;
  border-radius: 0;
}

.form-wrapper input[type=Submit] {
  border: 1.8px solid #ADA6A0;
  color: #ADA6A0 !important;
    background-color: white!important;
}

.form-wrapper input[type=submit]:hover {
   border: 1.8px solid #CCA370 !important;
 color: #CCA370 !important;
  background-color: white!important;
}

form input,
form textarea {
font-family: poppins!important;
font-weight: 200; 
font-size: 11pt !important;
 text-transform: uppercase!important;
}

#block-yui_3_17_2_1_1614811996641_6770 button {
  padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
   border: 1.8px solid #ADA6A0;
  color: #ADA6A0 !important;
    background-color: white!important;
}

#block-yui_3_17_2_1_1614811996641_6770 button:hover {
  border: 1.8px solid #CCA370 !important;
 color: #CCA370 !important;
  background-color: white!important;
}
 

Edited by agne
Link to comment
  • Solution
On 4/6/2021 at 11:11 PM, agne said:

The problem is that the keyboard blocks the message

This is a Squarespace bug that appeared on 15th January 2021. Squarespace made unannounced changes that prevent popup forms from working on mobile devices. The bug affects all popup forms including Custom Product Forms where you prompt customers for product-specific information. The bug causes the lower portion of forms to be hidden under a mobile device’s keyboard, obscuring some fields and preventing visitors from completing them.

Update: Fixed on 23 June 2021.

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 2 months later...

Hi @agne, I wanted to follow-up and let you know that as of last night this bug has been fixed. Thanks for flagging for our team!

Build together: Together, we make up a community of Squarespace professionals. Lean on your fellow community members for support and welcome diverse perspectives. 
Work in progress: Trust that we are all working for the collective good of Circle members and their clients. 
Keep it light mode: Balance productivity with joyful creativity and curiosity.

Link to comment
  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.