The following plugins available from the wordpress.org plugin directory will convert your field labels into placeholders
http://wordpress.org/extend/plugins/gravity-forms-placeholders/
http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/
If you opt to use the jQuery instead you would use the following
<script>
jQuery(document).ready(function($){
$('#input_5_1').attr('placeholder','Name');
$('#input_5_2').attr('placeholder','Email');
$('#input_5_3').attr('placeholder','Phone');
});
</script>
Here's a guide to where to put code http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F
And with that you would use the following CSS to hide the field labels and add left side padding and increase the margin between the inputs
#field_5_1 .gfield_label, #field_5_2 .gfield_label, #field_5_3 .gfield_label, #field_5_6 .gfield_label, #field_5_5 .gfield_label {
display: none;
}
#field_5_1 input, #field_5_2 input, #field_5_3 input {
padding-left: 30px;
width: 85%;
margin-bottom: 20px;
}
The above figures are just examples so customise them until you get the positioning how you want it.
To add the background image you can target the inputs like so
#field_5_1 input{
/* your normal background rules go here*/
}
#field_5_1 input:focus{
/* your focus background rules go here*/
}
You can find out more about css backgrounds here http://www.w3schools.com/css/css_background.asp
Regards,
Richard
Posted 11 years ago on Saturday April 27, 2013 |
Permalink