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";
}
Comments
Please sign in to leave a comment.