I have F6 email/form in pop drop with BP2. Only on android phones (not desktop chrome or iOS) the popup collapses as soon as the user selects any field (to enter data) and the keyboard comes up.
I am using “modal” mode currently, but also tried popup and Z index changes, but nothing seems to work.
The site is www.gvc.amsterdam
I would suggest using Limelight if you really want a form in a modal. Popdrop is a tooltip really and putting in a form can cause all sorts of problems with it closing unexpectedly. I suspect that Limelight would also look nicer that an PopDrop in modal mode?
OK, I’ll give it a try! It looks quite cool the way it is now though ;)
(unfortunately we only tested on laptops and iOS, although we checked the other things in android … o well. )
Come to think of it… we really wanted it clean and simple - same style as BP2 etc. and so we need to copy the exact look of how it would be in pop drop to Limelight - or re design the split button pop drop style to match limelight… anyway… we will give it a shot. Ha.
You can launch the limelight from the same button as you are using already - it is really only the modal that needs to be styled the same (which from memory they default to a very similar style)
OK, so I tried using limelight - and its 2000x more complicated to me so I have no idea what I’m doing ;) Thats just a reflection on my limited capacities I’m sure.
I have NO idea how I can replicate this in Limelight still - after watching all the videos and trying several attempts.
What we want:
What we get is quite ugly and utilitarian looking (function begging for form) with the X in the wrong place and the header not part of the (what should be a) popup… like this:
Is this worth keep trying?
At the moment we are considering to let Android users get a complete different experience, and just snd them to another page for any of these things, because we do not want to destroy the great experience we created for iOS and desktop users…
It seems to me that trying to please android is not worth it. But perhaps I’m seeing this wrong. I’m on the fence.
It may well be that the pre-formated ready made nature of pop drop is easier or better suited but you can do these things with Limelight. Limelight is much more flexible and so requires that some of the layout and styling of the content needs making manually (see below).
Never the less, Forms inside light boxes or modals are generally a bad idea unless the form and lightbox are specifically written to work together and can monitor events to close appropriately etc.
You can use anything you like to close a limelight. You can turn of the default icon close cross in the main settings and then put whatever you like in the content to use to close the lightbox just by giving it a custom class (class names are shown in edit mode when you select “show trigger classes” in the settings.
That is just because you have the default padding of 12px turned on in the limelight stacks content - set that to 0 and the content will go full width.
Thanks for that clarification. Thats a very disappointing reality. Asking people to take action should be the most user friendly thing - since its one of the hardest things to achieve. Our biggest desire is to make contacting easier, but we are swimming upstream it seems like. Too bad. Your feedback helps though… it is clear that we need to spilt the UX between android and the rest of the world at this point. Thanks for the help!!!
Hi @willemn I hope you don’t mind me chiming in here.
I’m in no way trying to teach you how to do your job, or build websites, or anything like that. Please don’t take this comment the wrong way. It’s just based on my nearly 20 years experience not so much as a website builder but as someone who have owned quite a few large and small scale online retail businesses in those 20 years.
If someone wants to contact you, within reason, they will.
There is a tendency to strive to make the act of making contact as simple as possible, and that is a good goal. But those who have a genuine reason to make contact will, providing the act of contacting is fairly easy: A link to a contact page or as I do a lot, a contact form a the foot on all pages, is in my opinion fine.
What I’m saying is those who start to try to start to contact and are not willing to visit a dedicated page, are often such low quality leads you most likely don’t want to hear from them.
I’m explaining myself poorly, and as I say, I’m not trying to tell others how to do things, I’m just passing on what I’ve learnt after a lot of years doing this.
Thanks for your perspective. Of course, that’s another way to approach it. In general terms you perhaps may have a point, but it’s too general and leaves out considerations as target audience, service or product and general UX realities. But you do have an argument. 😜
And just to be sure… I am a user and quite lazy in my approach. I’m painfully aware of my limitations, both in coding and in the lack of desire to pay a programmer to code exactly what I want. I have chosen to use a tool and various stacks to make a shortcut to the results I want, and although I allow myself to be disappointed by the results - I have the realistic perspective that this is my own problem.
To illustrate my level of competence: I don’t want to grasp what a “Div” is and although I struggled through “learning” foundation 6, I really found it too complicated and not worth my time for the couple of websites I was trying to build. The fact that essentially everything is “centralized” is total overkil when only one page needs one tweak in its margins somewhere or one stack needs a background color. I totally see the wisdom of it - for others.
Hope that helps. :)
OK, I have successfully moved the “form” to limelight and although it now “works” on Android… (as in it does not disappear) it is stuck to the “top” of the screen and does not advance when moving down the fields to enter all data. The screenshot shows how the “top” is stuck and the next field cannot be viewed/accessed.
We have “full screen modal” mode turned on here.
This behavior also actually happens on iOS after the form is submitted, but on iOS, the fields properly stay “in focus” until scrolling to the submit button. After the submit it also “gets stuck” and the “success” text gets cut-off
Is there a way to get around this and make the popup at least able to be viewed completely ?
If it is not scrolling it is usually because the height of the content is not being reported correctly by the browser. Have you got a link to the page and I will see if I can see what is happening. (I looked on the gvc.amsterdam site but I couldn’t find the Limelight so I wonder if it is on a test page?)
Several months later … I came across this thread, because I had exactly the same problem putting a form in a modal pop up. I am working in Source. I got FormSnap3 to work with PopDrop on a desktop, but had the same problem on mobile. I hadn’t appreciated the difference between PopDrop and Limelight.
The good news is that Limelight worked with FormSnap3 more or less out of the box for me. I didn’t have to adjust any settings, it just worked, apparently on all devices. So thank you, everyone.
