We’re currently working on our forms. We’ve redesigned them to a more condensed and fancy version. Previously, the label of a text field would sit on the top. Now, it’s on the inside and it moves to the top when it gets the focus (similar to how Google does it). We’ve a/b tested them and the more fancy forms have a higher conversion rate. But we’re still having some reservations so we’re also planning to test them in a user test.
I’m in the process of recreating our forms in RP9 but I’m running in to a glitch I just can’t figure out. It’s been a while since I’ve used RP so I’m a bit rusty, but I don’t think I’m doing anything wrong compared to how I worked in the past.
I’ve attached a sample .RP file.
When I have just one text field on the page, the text field works as intended:
- If the text field has focus, move the label to the top
- If the text field loses focus and the text field is empty, move the label back
- If the text field loses focus and the text field is not empty, keep the label on top
- If the text field has input and gets focus, don’t move the label.
The way I keep track if I need to move the label is by using a variable (a flip between a 0 and 1 if the label should be moved)
So far so good!
But when I copy and paste that text field with all of it’s logic to a different page and duplicate it, it no longer works as intended.
- The first text field works as intended
- When the user focusses on the second field, the label does not move to the top. The user can type, but it appears behind the label, since it is not moved.
Now I’m making a mistake somewhere. I believe it has to be related to how I change the value of the variabel, but I just can’t wrap my head around it. Or maybe I’m approaching this completely the wrong way. I’m trying to create an element that I can re-use throughout my entire project.
Any help is appreciated!
forms.rp (117.3 KB)
[edit]
I’ve fixed it! I was thinking in the wrong way. I could have easily just checked the length of the value instead of using a variable to track it.