Adding icons to form inputs

To get the above effect, choose 'label inside' on the form editor. To add the icons, on the page, add the following javascript:

  

Js
<script type='text/javascript'>
 $(function(){
$(".activedemand input[type=email]").parent().addClass("email-input");
$(".activedemand input.tel").parent().addClass("phone-input");
$(".activedemand input[id^='form_1_']").parent().addClass("name-input");
$(".activedemand input[id^='form_11_']").parent().addClass("name-input");
$(".activedemand input[id^='form_121_']").parent().addClass("address-input");
$(".activedemand input[id^='form_101_']").parent().addClass("city-input");
$(".activedemand input[id^='form_131_']").parent().addClass("postal-input");
});
</script>

  

 

Then in the CSS block for the page add:

 

CSS
form.activedemand div.form_input.name-input input,
form.activedemand div.form_input.phone-input input,
form.activedemand div.form_input.email-input input,
form.activedemand div.form_input.address-input input,
form.activedemand div.form_input.postal-input input,
form.activedemand div.form_input.city-input input {
  padding-left: 25px !important;
}

form.activedemand div.form_input:before {
  content: "";
  font-family: 'FontAwesome';
  position: absolute;
  margin: 5px 7px;
  color: rgba(0, 0, 0, 0.2);
}

form.activedemand div.form_input.name-input:before {
  content: "\f007";
}

form.activedemand div.form_input.phone-input:before {
  content: "\f095";
}

form.activedemand div.form_input.email-input:before {
  content: "\f003";
}
form.activedemand div.form_input.address-input:before {
  content: "\f1ad";
}

form.activedemand div.form_input.city-input:before {
  content: "\f1ad";
}
form.activedemand div.form_input.postal-input:before {
  content: "\f1ad";
}

 

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.