How do we do forms like these?

Ashwin_Satyanarayana

Hi

I was wondering how we achieve the following look for Unbounce forms. With the form field names like “name” and “email” removed and to have “name” and “email” inside the form fields.

I know it can be done, but I just can’t figure out how.

I look forward to your answers 🙂

Ash

4 replies

Stefano
Userlevel 7
Badge +4

Copy paste this script into the “head” 🙂

<script type="text/javascript">
jQuery(document).ready(function() {
  var hints = {
    "name": "Your Name*",
    "email": "Your Email*",
  };
  
  var hideHint = function(field, text){
    if (jQuery(field).val() === text) {
      jQuery(field).val("");
      jQuery(field).removeClass('hint');
    }
  };
  
  var showHint = function(field, text){
    if (jQuery(field).val() === "") {
      jQuery(field).val(text);
      jQuery(field).addClass('hint');
    }
  };

  var text;
  
  for (fieldName in hints) {
    text = hints[fieldName];
    jQuery("#"+fieldName).val(text).focus((function(text) {
      return function() {hideHint(this, text);};
    })(text)).blur((function(text) {
      return function() {showHint(this, text);};
    })(text)).addClass('hint');
  }
  
  var submitButton = jQuery('#'+window.module.lp.form.data.formButtonId);
  var submitAction = submitButton.data('events').click[0];
  var field;
  
  submitButton.unbind('click', submitAction);
  submitButton.click(function(e) {
    for (fieldName in hints) {
      field = jQuery("#"+fieldName);
      if (field.val() === hints[fieldName]) {
        field.val('');
      }
    }
    
    submitAction.handler(e);
    
    for (fieldName in hints) {
      field = jQuery("#"+fieldName);
      if (field.val() === '') {
        field.val(hints[fieldName]);
      }
    }
  });
});
</script>
Ashwin_Satyanarayana

Doesn’t seem to work @Stefano. Am I missing something?

Ash

Alyssa
Rank
Badge +1

Hey @Ashwin_Satyanarayana!
Did you see our documentation on placeholder/hint text? Maybe give that a go and see if it is what you are after 🙂 we have some instructions to go along with it in there too.

You can find that here http://documentation.unbounce.com/hc/en-us/articles/203799174-Adding-and-Editing-Form-Fields#content8

Let me know if it helps at all! Or if you need any more guidance 🙂
Lastly - feel free to send me the page you are working on and I’ll be happy to have a look if you are still having some troubles.
Alyssa

Alyssa
digibomb
Userlevel 6
Badge +1

Hey @Ashwin_Satyanarayana the code @Stefano provided no longer works on Unbounce. You can use the code below, it has been updated. However @Alyssa pretty much gave you everything you need.

On a side note - from a design point of view form hints do look better, but recently we have been switching back to labels above fields. Why? Form hints are NOT ADA (Americans Disabilities Act) compliant. When the field names are inside screen readers can’t read them.

<script type="text/javascript">

  lp.jQuery(function($) {
  
    // Define your placeholder texts here, corresponding to Unbounce's field names
    var placeholders = {
      "first_name": "First Name",
      "last_name": "Last Name",
      "email": "Email"
    };
  
    // 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>

Reply


Terms & ConditionsCookie settings