Question about placeholder text in my form

Design help General
1

Hello,

I have a question about the placeholder text in a simple contact form on the landing page I’m working on.

The text looks fine on larger breakpoints, but once I move to tablet and smaller, the placeholder text no longer fits in the space, and continues off to the right.

How do I modify the form field properties, so that placeholder text and any text added by the user wraps into multiple lines, instead of just running as one long line of text?

Thanks!

2

Hey Mark, can you share a specific example of the page and form you’re wanting to change? Multiline suggests you’re using a textarea field?

Please share both the readonly designer link and a published page link both to that specific page.

3

Here you go!

https://preview.webflow.com/preview/radius-design-studio?utm_medium=preview_link&utm_source=designer&utm_content=radius-design-studio&preview=1f219ea34bf3328779e2deb447ed0466&workflow=preview

https://www.radiusdesignstudio.com

4

The easiest way is to replace that input with a textarea. Your placeholder text will wrap, and the users will be able to enter multiline content.

image

But just for completeness, if you wanted to stick with and input there are some other approaches;

Shrink the placeholder font size at smaller breakpoints with custom CSS, e.g.;

@media (max-width: 479px) {
  .footer-form-field::placeholder {
    font-size: 11px; // whatever
  }
}

Or swap it with a shorter version of the text;

window.addEventListener('resize', function() {
  var inputField = document.getElementById('Details');
  if (window.innerWidth <= 479) {
    inputField.placeholder = "Help meeeee!";
  } else {
    inputField.placeholder = "I need your help with my next top secret project.";
  }
});

window.dispatchEvent(new Event('resize'));