How To Create Custom Placeholder In Form

As we know, we can’t do any custom CSS for placeholders.

In this article, We learn how to add a custom placeholder in the form.

Here We use the contact form 7 plugin for form because on most sites we use the contact form 7 plugin for form.

Here is an HTML for the contact form.

<div class="custom-placeholder-wrap"><label class="placeholder">Your name<span class="required">*</span></label>[text* your-name]</div>
<div class="custom-placeholder-wrap"><label class="placeholder">Your email<span class="required">*</span></label>[email* your-email]</div>
<div class="custom-placeholder-wrap"><label class="placeholder">Subject<span class="required">*</span></label>[text* your-subject]</div>
<div class="custom-placeholder-wrap"><label class="placeholder">Your message</label>[textarea your-message]</div>
[submit "Submit"]

Here is CSS:

.custom-placeholder-wrap .wpcf7-form-control-wrap input,
.custom-placeholder-wrap .wpcf7-form-control-wrap textarea {
    height: 45px;
    width: 100%;
    padding: 0 10px;
}
.custom-placeholder-wrap .wpcf7-form-control-wrap textarea {
    height: 100px;
    padding: 10px;
}
.custom-placeholder-wrap .wpcf7-form-control-wrap {
    display: block;
}
.custom-placeholder-wrap {
    position: relative;
    margin-bottom: 10px;
}
.placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    padding: 10px 10px;
    z-index: 9;
}
.custom-placeholder-wrap .required {
    color: #f00;
}

Here is jQuery:

jQuery(document).ready(function($) {
    
    $( '.placeholder').click(function() {
        $( this ).siblings( 'span' ).children( 'input' ).focus();
        $( this ).siblings( 'span' ).children( 'textarea' ).focus();
    });
    $( '.custom-placeholder-wrap input, .custom-placeholder-wrap textarea' ).focus( function() {
        $( this ).parent( 'span').siblings( '.placeholder' ).hide();
    });
    $( '.custom-placeholder-wrap input, .custom-placeholder-wrap textarea' ).blur(function() {
        var $this = $( this );
        if ( $this.val().length == 0 ) {
          $( this ).parent( 'span' ).siblings( '.placeholder' ).show();
        }
    });
    
});

Here is the Output:

If we use a custom form then here is the code for the custom form.

Here is an HTML:

<form action="" method="post" class="custom-form" >
  <div class="custom-placeholder-wrap">
    <label class="placeholder">Your name<span class="required">*</span></label>
    <input type="text" name="your-name" value="" size="40" class="" aria-required="true" aria-invalid="false">
  </div>
  <div class="custom-placeholder-wrap">
    <label class="placeholder" style="">Your email<span class="required">*</span></label>
    <input type="email" name="your-email" value="" size="40" class="" aria-required="true" aria-invalid="false">
  </div>
  <div class="custom-placeholder-wrap">
    <label class="placeholder">Your message</label>
    <textarea name="your-message" cols="40" rows="10" class="form-textarea" aria-invalid="false" spellcheck="false"></textarea>
  </div>
  <input type="submit" value="Submit" class="form-submit">
  
</form>

Here is a CSS:

.custom-placeholder-wrap input,
.custom-placeholder-wrap textarea {
    height: 45px;
    width: 100%;
    padding: 0 10px;
}
.custom-placeholder-wrap textarea {
    height: 100px;
    padding: 10px;
}
.custom-placeholder-wrap {
    position: relative;
    margin-bottom: 10px;
}
.placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    padding: 10px 10px;
    z-index: 9;
}
span.required {
    color: #f00;
}

Here is jQuery:

$( '.placeholder').click(function() {
        $( this ).siblings( 'input' ).focus();
        $( this ).siblings( 'textarea' ).focus();
    });
    $( '.custom-placeholder-wrap input, .custom-placeholder-wrap textarea' ).focus( function() {
        $( this ).siblings( '.placeholder' ).hide();
    });
    $( '.custom-placeholder-wrap input, .custom-placeholder-wrap textarea' ).blur(function() {
        var $this = $( this );
        if ( $this.val().length == 0 ) {
          $( this ).siblings( '.placeholder' ).show();
        }
    });

Here is an Output: