Streaming live at 10am (PST)

How to move the Placeholder text


#1

Hello, How do I move the Placeholder text “Сообщение” to the upper left corner? Here is my site Read-Only: http://kontakt-167e52-e78085a364d0f30a4b7daedb.webflow.io/


Move Placeholder text
#2

Hi @Alex30

Can you provide your read-only link please? The link above is your published site (not the read-only)
:slightly_smiling_face:


#3

Sorry, of course I can - https://webflow.com/design/kontakt-167e52-e78085a364d0f30a4b7daedb


#4

Oooh…not quite…it needs to start with preview.webflow…

See screenshot from the above video at 0:16 - in project settings:


#5

@Alex30 are you referring to creating Float labels for your input fields?


#6

@waldo - On the link in the first post - I think it’s to do with that vertically centred placeholder text which would normally be expected to sit in the top left of the input box

Might be wrong - useful codepen anyway :grinning:


#7

Hello!
How do I move the Placeholder text “Сообщение” to the upper left corner?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#8

Once again I apologize…

https://preview.webflow.com/preview/kontakt-167e52-e78085a364d0f30a4b7daedb?preview=e0f0ea4e917fd3f6b7f100905c2cdb4d


#9

Hi!
In the examples, too complex code, I would like without JS code


#10

Hi @Alex30 cc @Waldo

I think it’s a simple fix after all :slightly_smiling_face:

In your site, you have used another ‘text field’ for the larger text box, so when you resize it, the placeholder text stays central (built-in Webflow styling for the component?)

The solution is to swap it out for a ‘text area’ box instead, then give it a minimum height of 100px to match the original. The placeholder text then stays positioned top left in the box. :arrow_upper_left:

Using ‘text area’, allows the person filling the form to be able to scroll when they enter a lot of text.

However…if you really want to use a ‘text field’ instead, it looks like you would need to add around 65px padding to position correctly:

Hope that solves it for you :slightly_smiling_face:


#11

Hi! Yes, I realized that I had inserted the wrong block. Thank you so much.