To get the above effect, choose 'label inside' on the form editor. To add the icons, on the page, add the following javascript:
<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:
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"; }
ActiveDEMAND Support
To get the above effect, choose 'label inside' on the form editor. To add the icons, on the page, add the following javascript:
Then in the CSS block for the page add: