Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Placeholder text on any form WordPress

  • SOLVED

There are plugins for the form builders but I cannot use those as the form needed is a third party form to be placed in a widget and I need to display placeholder text in all current browser.

<em>Please note that I will be using this form inside a text widget (if I need another form of widget, please let me know).

I did not build this form and the action and js for it are linked to at another site (please let me know if that is the issue and if I should put the js link in the header instead)</em>

I tried installing the modernizr plugin and html5 boilerplate but must be missing something as the placeholder text does not show up.

To get modernizr or html5 boilerplate to do the job - is there something I need to put in my functions or in the form? Alternatively is there another/better method to do this?

Thank you

2012-07-26 by Connie Taylor

Answers (3)

2012-07-26

Martin Pham answers:

You can using jquery plugin: [[LINK href="http://fuelyourcoding.com/scripts/infield/"]]http://fuelyourcoding.com/scripts/infield/[[/LINK]]

Connie Taylor comments:

This looked promising but it is not set up as a wordpress plugin and I'm just not skilled enough to write plugins. But thank you for this anyway.

Martin Pham comments:

I think it's simple so you can add to your theme. It includes a script and the css file to work. I can help you do this

Connie Taylor comments:

OK - let me know where to put the script and how to enque (sp) and I'll give it a try.

Martin Pham comments:

please give me information on access wp-admin mail: [email protected]
I will do this quickly.

2012-07-26

Michael Caputo answers:

The best that i've found is:


<input onfocus="if (this.value == 'Enter your email and hit enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your email and hit enter';}" value="Enter your email and hit enter" />

Connie Taylor comments:

This works with one exception so if the client doesn't like it will have to pass. It seems that the js they are calling to the form is adding a mask on the phone number field. So if martin can help I will try his method.

2012-07-26

Luis Abarca answers:

Try this way

1.- Html code

<style>
.some_special_class { color: gray; font-size: small }
</style>

<input type="text" name="email" id="email" title="Ex.: [email protected]" class="placeholder">


2.- Add the placeholder text with jQuery

$('.placeholder').each(function()
{
var obj = $(this);

var txt = obj.attr('title');

if ( $.trim(obj.val()) == '') {
obj.val(txt);
obj.addClass('some_special_class');
}
});

$('.placeholder').focus(function()
{
var obj = $(this);

var txt = obj.attr('title');

// if input has default text, clear it
if ( $.trim(obj.val()) == txt) {
obj.val('');
obj.removeClass('some_special_class');
}
});

$('.placeholder').blur(function()
{
var obj = $(this);

var txt = obj.attr('title');

if ( $.trim(obj.val()) == txt) {
// when empty, put the default text
obj.val(txt);
} else {
// value changed, remove special style
obj.removeClass('some_special_class');
}
});

Luis Abarca comments:

Have a look runing this code [[LINK href="http://jsfiddle.net/Z8Vy4/1/"]]http://jsfiddle.net/Z8Vy4/1/[[/LINK]]

Luis Abarca comments:

With more fields

[[LINK href="http://jsfiddle.net/Z8Vy4/3/"]]http://jsfiddle.net/Z8Vy4/3/[[/LINK]]