Placeholder text change on mobile?

Design help General
1

Hello All,

Is there a way to change the placeholder text for forms on mobile only? My placeholder text is too long to fit on phone portrait so I wanted to shorten it only for that media query. Is this possible?

Thanks!

2 
if ($('html').hasClass('w-mod-touch')){    
     $('.THE-THING').attr('placeholder','THE-NEW-WORDS');
}
1 Like
3

Okay, sorry what do I replace? The class is .formfield in my site.

4

add that code to your custom code area

5

As is? Do I replace the thing with my formfield class and the new words with what I want it to say?

6

that is correct…

7

This is what I put in the before body section and it didn’t work

if ($(‘html’).hasClass(‘w-mod-touch’)){
$(‘.formfield’).attr(‘placeholder’,‘Sign-up-for-our-newsletter!’);
}

8

Did you put script tags enclose the code in script tags also:

<script> --paste the code here-- </script>

Cheerios

9

Put this one in the Custom Code in second field and wrap it with <script>...</script> tags. Should work but I cannot guarantee anything. Wrote it without testing…

As you can see the function has two arguments. The first one text is what a smaller placeholer should look like. The second one is what the document took from the placeholder attribute of that input when the document loads. Thanks to this one you will always be able to get back to the big placeholder once you resize your browser back to the desktop version eg. :slight_smile: You can always call the bk_placeholder function remembering about two arguments to set it up. If you need this functino can be transformed to something with 3 arguments, where the first one will be the class name or unique id name of an object you want to refer to.

Any help needed? Write here.
Appreciate my help? Donate! ;D

function bk_placeholder(text, longtext) {
  if($('html').hasClass('w-mod-touch')) {
    $('#that-input-in-form').attr('placeholder', text);
  } else {
    $('#that-input-in-form').attr('placeholder', longtext);
  }
}
$(document).ready(function() {
  var bk_longtext = $('#that-input-in-form').attr('placeholder');
  bk_placeholder('Sign up!', bk_longtext);
  $(window).resize(function() {
    bk_placeholder('Sign up!', bk_longtext');
  });
});
10

Hey Bartosz,

Which parts of that code should I change? And how is it different from the shorter one above?

I also only want it to apply to the phone portrait version.

Thanks!

11

The code above is working both ways. The main thing is that it reads the placeholder from Webflow site and stores it in variable. If you resize your window it will change the placeholder to the one you provide. Once you resize it back to desktop version it will restore the original one :smile:

Script provided by @PixelGeek is working only in one way.

12

Bartosz,

I see, but what do I replace with my form field class?

Sorry about my novice coding skills.

13

IU’m not sure if I understood you correctly. You don’t have to change anything inside your form fielf. In the code there is a trigger #that-input-in-form which is the unique id of an object you want this one to happen. You just have to give a unique id to that form field in settings tab and change #that-input-in-form to whatever your unique id is.

Hope that helps!

14

Hey guys,

I got PixelGeek’s code to work as it was easier for me to understand where to plug in my class and where to put in the alternate text.

I’m not really concerned with it changing for people resizing windows as I am only using it for the phone portrait media query which is pretty specific.

Thank you both for all your help!

15

Just in case here is the fixed code with config for you. You can change the class in bk_config() as well as the short text. Do not change the long text since this one is taking the attribute by itself.

In short. Change bk_input and bk_shorttext to whatever your class is and whatever you want shorttext to be :slight_smile:

function bk_config() {
	bk_input = $('.your-input-class');
	bk_shorttext = "Sign up!";
	bk_longtext = input.attr('placeholder');
}

function bk_placeholder(text, longtext) {
	if($('html').hasClass('w-mod-touch')) {
		bk_input.attr('placeholder', text);
	} else {
		bk_input.attr('placeholder', longtext);
	}
}
$(document).ready(function() {
	bk_config();
	bk_placeholder(bk_shorttext, bk_longtext);
	$(window).resize(function() {
		bk_placeholder(bk_shorttext, bk_longtext);
	});
})