Styling Unbounce Native Placeholder Text


#1

Hello,

I’m trying out the Unbounce native placeholder text feature, but I can’t seem to figure out how to style the placeholder text.

When I inspected the form field in my browser I couldn’t find any kind of HTML element to call out in my CSS.

Has anyone else had experience with this? I know there’s an older script floating around to add placeholder text, but I’d much rather use Unbounce’s native placeholder text feature.


#2

Hey @shoodwin I’ve added some custom CSS to my page www.zoetattersall.com that may help you out with your form field placeholder copy –

 #lp-pom-form-608 .form_elem_email, .form_elem_full_name, .form_elem_phone_number, .form_elem_message {  
     font-family: 'Open Sans', sans-serif;
     font-weight: 300;
 }

Please note, this is using .js to add the form field placeholder text, so it may not work if you use the Unbounce native placeholders on the form (mine are just left blank).

<script type="text/javascript">
  lp.jQuery(function($) {
  
    // Define your placeholder texts here, corresponding to Unbounce's field names
    var placeholders = {
      "full_name": "WHAT'S YOUR NAME",
      "email": "YOUR FAV EMAIL",
      "phone_number": "AND YOUR PHONE NUMBER",
      "message": "TELL ME ABOUT YOUR NEXT PROJECT AND HOW I CAN HELP?"
    };
  
    // Sets the HTML5 placeholders
    for(var id in placeholders){$("#"+id).attr("placeholder",placeholders[id])}
  
    // Polyfill to add support for browsers like IE<=9
    if(document.createElement("input").placeholder===undefined){$("html").attr("data-placeholder-focus","false");$.getScript("//jamesallardice.github.io/Placeholders.js/assets/js/placeholders.jquery.min.js",function(){$(function(){var e=window.module.lp.form.data.validationRules;var t=window.module.lp.form.data.validationMessages;lp.jQuery.validator.addMethod("notEqual",function(e,t,n){return this.optional(t)||$(t).attr("data-placeholder-active")!=="true"||e!==n},function(e,n){return t[$(n).attr("id")].required});for(var n in placeholders){if($("#"+n).length){if(typeof t[n].required!=="undefined"){e[n].notEqual=placeholders[n]}else{e[n]={}}}}})})}
  
  });
</script>

And the full CSS for reference:

 <style>

 #lp-pom-form-608 .lp-pom-form-field input[type=text] {
color: #07BFC8;  
 }
   #lp-pom-form-608 .lp-pom-form-field textarea {
    color: #07BFC8;
 } 
   #lp-pom-form-608 .form_elem_email, .form_elem_full_name, .form_elem_phone_number, .form_elem_message {  
     font-family: 'Open Sans', sans-serif;
     font-weight: 300;
 }
   #lp-pom-form-608 .lp-pom-form-field .text {
    color: #07BFC8 !important;  
 }
   #lp-pom-form-608 .lp-pom-form-field #message {
    color: #07BFC8 !important;  

 }
 </style>

#3

Thank you, Zoe. Handsome code :slight_smile:

I’ll give this a go.


#4

I’d love to take credit, but I think I hacked/modified it off a post on here! :wink: