Streaming live at 10am (PST)

Interaction Question


#1

I have a question about an interaction on this website: https://rentberry.com/

If you click on Sign In, a modal pops up. If you click on Enter Email or Enter Password, you'll notice the placeholder text moves up and scales down. How can I do this in Webflow? Is this done with code only for now? If so, could someone write me a code that does this effect? Thanks!


Here is my public share link: LINK
(how to access public share link)


#2

Click interaction that affects different element. :wink:


#3

How do I make the placeholder text only move and scale as an element, without moving and scaling the whole text field?


#4

It is using Angular, which includes this https://github.com/angular/material

Here is the form input field demo: https://material.angularjs.org/latest/demo/input


You can simulate this by wrapping each field and label in a separate div, then adding custom CSS and JS.

This is only an example. Do not expect it to work out of the box.

CSS

select:focus + .inline-label,
select.filled + .inline-label,
input:focus + .inline-label,
input.filled + .inline-label {
  transform-origin: left center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-transform: translate3d(0,-120%,0);
  transform: translate3d(0,-120%,0);
  font-weight: inherit;
}
input.bigger:focus + .inline-label,
input.bigger.filled + .inline-label {
  font-size: 12px;
  -webkit-transform: translate3d(0,-70%,0);
  transform: translate3d(0,-70%,0);
}

JS

<script>
Webflow.push(function() {
  $('input, select').on('click keyup blur', null, function() {
    $(this).toggleClass('filled', $(this).val().length != 0);
  });
});
</script>

Demo: http://nvoi.webflow.io/hmstack


#5

Ok, I think I'm really close. I used the CSS from this site which moves the placeholder text when the fields are clicked: http://codepen.io/zellwk/pen/BfJGt and added it to my custom code in the designer under body. Then I publish the site and the borders change color when the fields are clicked but the placeholder text still doesn't move. Can you check my code and tell me why that isn't happening still? Also, why did my navbar move after I added this code? Thanks!

Here is my share link:
https://preview.webflow.com/preview/only-for-practicing-styles-skills-etc?preview=f85c78f49ab0cd5432cc9e70d9998e3e

Live link:
http://only-for-practicing-styles-skills-etc.webflow.io/outdoor-2


#6

Ok, I've figured out the placeholder text movement upon clicking. Now my question is, how do I include a submit button with this embedded form and have it send emails or take in a password for signing in...?


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.