[Resolved] Placeholder not working

[Author]

Posts

[Boris]

Hello

Placeholder isn't working at my cred form:

[cred_field field='post_tag' placeholder='Add here some tags']

While it works in the same form at:

[cred_field field='source' post='company' value='' urlparam='' placeholder='Add your url here ...']

Why it won't work at tag input?

Thanks

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

I double-checked on a test site, and it is not possible to add placeholder text to the built-in WordPress tags input field.

It is a text input field so in theory it could be possible, but it currently is not.

I would suggest you just use a label instructing your users to add tags, or if you really needed to add the text as a placeholder text within the text field, you could add a JavaScript snippet that, when the page loads, sets the placeholder attribute on the post tag text input field.

When you create or edit a CRED form there is a section to add custom JavaScript below where you add the markup for the CRED form content.

If you go down that route and have problems, let me know and I can help.

[Boris]

> you could add a JavaScript snippet that, when the page loads, sets the placeholder attribute on the post tag text input field

Can you explain how to implement that?

Thanks

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Just to let you know I am still working on this.

The code you need to add is very simple, but when I came to test it it was producing unexpected errors, and I may have stumbled upon a bug.

I'm double-checking things and will get back to you.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

So, the bug was in my head, not in the code, and a little coffee was all it needed to resolve this.

In your CRED form you need to add the following snippet to the custom JS box:

( function( $ ) {
	$( document ).ready( function(){
		
		$("input[name='tmp_post_tag']").attr("placeholder", "Enter your tags");

	});
})( jQuery );

Most of that is just standard wrapper code for triggering our code once the document is loaded, there is only one line doing the actual work of identifying the correct input field for the tags, and setting the placeholder attribute to the specified text. You will want to edit the text according to your needs.