[Tips & Scripts] Flexible Form Fields

forms
design

#22

Thanks for catching this issue Vincent!

I killed the bug and now the script works with hidden labels :slight_smile:
Here’s the updated script:
https://gist.github.com/victorzen/9a0294e0e65c03e4b23183e0b58d2118 


#23

Hi Vic I have been trying to use the script over the past few days and found a couple of bugs, The hide labels for some reason still does not work (Google Chrome) then also I cannot get it to work with more than 4 from fields :slight_smile:


#25

One issue I am experiencing with this script is that it creates horizontal scroll bars when using a form in a lightbox on mobile.  I double checked to make sure i didn’t have anything out of bounds. Upon removal of the script, the horizontal scroll bars are gone.


#26

Hi,
I am getting these broken links for the images attached in each step of the instructions


#28

Just stumbled upon this and can’t wait to start implementing this to our pages. Hopefully the image links will be updated soon.

Thanks Vic


#30

This is great! One question though. For desktop I love the ability to position my form fields anywhere I like… however - this causes issues when viewing the mobile version. Is there a way this can be implemented just for desktop and disabled if someone is viewing from a mobile device? Thanks!


#31

Hi @Jenna_Bensoussan!

Here’s a script you can use to fire any code on mobile or desktop only:

<script>
  if ( lp.jQuery(window).width() <= 600 ) {

    // Your mobile code goes here

  }else{

    // Your desktop code goes here

  }      
</script>

All you need to do is remove the opening <script> and closing </script> tags in the Flexible Form Fields script and add it to the ‘Your desktop code goes here’ area on the script above. That will prevent it from firing on the mobile version of the page.

Hope you find this workaround useful. Have a great day!


#32

Hello Vic - I’m trying to accomplish the multi-column (from here: http://unbouncepages.com/split-form-fields/) and am running into a bit of trouble. I’m going to send you a note via support to try and figure it out. You said the width of the fields will adapt to the width of the boxes, but that doesn’t appear to be the case. Any troubleshooting would be incredibly helpful.


#33

I tried this and it kinda worked. I have form validation going on to show State and Province fields only if the US or Canada are selected respectively. In order for those fields to show up in the right place I had to add CSS code to place them on the form in the right place in the desktop version. How can I compensate for these two fields on mobile? Can I do conditional CSS for mobile for these two fields?


#34

I can’t seem to make it work. I have a demo at http://ar-vida.primerolafamilia.com.ar/service-callback/

I create the boxes, I added the script, I followed every step, and it’s not working. The fields are not there.

I just created the boxes. Do I have to create a form instead?.

Any help is appreciated. Thanks!.

Max


#35

Hi Max,

You have to do both. Your form has to contain the fields you are collecting data for. The boxes are for placement purposes only. Think of it as a front end and a back end. The form is the backend - it holds the data you want to collect. The boxes are the frontend - they are strategically placed where you want the form fields to appear. You will also need to make sure you send the form “to front” and the boxes “to back” otherwise visitors will not be able to enter data. Also - make sure you view how the form looks on your mobile version because you will need to move the boxes to fit a smaller screen if you have them positioned horizontally on the desktop version.


#36

Thanks so much, Jenna!

Couldn’t have explained it better myself!


#37

Jenna,

Thank you very much!. I could finally resolve it.

Cheers,

Max


#38

Hi,

I have been trying this script on a new page I’m making. It works great (Thanks!) except for one thing.
One of the form fields can’t be selected.

So I made a page that has a monster form with 34 fields. When I tried it out in preview, and live, two of the fields would not work properly. All of the boxes are sent as far back as possible, and the form itself is sent as far forward as possible.
After deleting the two boxes, copying a box that worked, and pasting it two times, one of the fields in the newly pasted boxes started working. I naturally tried the same thing a few more times for the one that still wasn’t working. But after 5-6 times I gave up. I instead deleted the malfunctioning box and made a completely new one. I of course altered the script to reflect the new boxes names at all times. I sent the new box back as far as I can, but it still won’t work.

I even tried having the box display another form field, but that didn’t change anything. It was always the same box that didn’t work.

However, the field is properly displaying. And it is actually possible to select it by tabbing. And when selected, you can type in it. So it seems to work in every way, except that you can’t click the field to select it.

Any ideas?
Is there any thing else that could be blocking the form field? Is there anything else that I might have to do to make it accessible?

I have tried with both radio buttons (which is what I would prefer) and just a plain text field. Exact same result with both.

Very grateful for any help!

EDIT: I finally realized what the issue was! It was the positioning of the boxes. I had placed the two boxes too close together, although they didn’t overlap visually, the actual (but invisible) size of the form fields would cover each other. And even if one field was “in front” of the other, it made it impossible to select either one of them. Moving the fields further apart solved the problem for me.
Perhaps stupid of me to not realize it sooner, but using the visual editor sometimes makes you forget what is not seen :wink: Hope this might help anyone else out there with a similar issue!

Thanks again for the script, works really well!
Praying that this kind of flexibility becomes a built in feature soon


#40

Vic,

I applied the code as you mentioned but for some reason Unbounce is showing me the script on Orange, meaning something is wrong. The form does works as intended, script to work on desktop but not on mobile. Here is the code. What could be wrong?. Could you let me know?. Thanks.


#41

Hello,

I was trying to create the flexible form fields using the steps, but I was not able to see the expected result.Can you add the images of each steps. It would be great If we have the images of how to create each step.


#42

I implemented the flexible form fields. The error message div is overlapping with the form how can I change the position of the box.


#43

Hi,

I’m trying to create a mobile view with a flexible form. If I preview the mobile view, the preview shows me the boxes of the desktop view. I have used the script, which “fires any code on mobile or desktop”, too. I even have created seperate boxes for mobile view and disabled the view of the boxes for the desktop view, but still only the desktop boxes are shown. I have change something on the mobile view and press save and refresh the preview, it takes the boxes of the mobile view and also shows them on the desktop view.

I have already spent some hours to figure out why this happens, would be great if someone could help me out here.

Best and also thanks for the great script.
Kurbm


#46

OMG Vic!

I freaked out cause I thought the github link was created specially for me since it has my name on the url hahahahahaha

:scream::joy:


#47

Specially for you friend! :rofl::rofl::rofl: