Forms without a box


#1

Hi All,

does anyone know how to style forms without a box? I’ve attached an image as an example.


Designing a form
#2

Something like this? We used the form hints script + some simple CSS styling!

Form hints JS:

<script type="text/javascript">
  /**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-07-002
  */
  
  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>

CSS:

<style>

#lp-pom-form-95 .lp-pom-form-field input[type=text] {

    background: none;
    border-bottom: 1px solid #ffffff 

}
</style>

If you need a hand getting this to work for you, give me a shout!


#3

Sweet! Let me give it a try thanks @Stefano!


#4

It is my pleasure :slight_smile: :slight_smile:


#5

I created a test page here: http://unbouncepages.com/stefanoisawesome/

I think I am missing codes for:

// Sets the HTML5 placeholders & // Polyfill to add support for browsers like IE<=9


#6

I just updated the code in my first post, give it a whirl!


#7

@Stefano, you truly are awesome! Got it: http://unbouncepages.com/stefanoisawesome/

If I want to add more fields I just adjust that in

var placeholders = {
“first_name”: “First Name”,
“last_name”: “Last Name”,
“email”: “Email”
};

right?


#8

Yep! You got it! You’ll just need some CSS to make the labels white :wink:

You need to make sure your labels match that of your form. Documentation here!

If you need a hand with that, let me know - I can help right after my lunch meeting!

P.S. awesome URL!!!


#9

Hey @Stefano - Do you know how I can style the “Let’s Work On” text field in my form - to have no background and a 1px white border box? http://unbouncepages.com/stefanoisawesome/


#10

Hey @Trevor, I just did similar edits on my page www.zoetattersall.com using the following –

#lp-pom-form-608 .lp-pom-form-field textarea {
   color: #07BFC8;
   }  

So in your case, it would be –

#lp-pom-form-11 .lp-pom-form-field textarea {
   background: none;
   border-bottom: 1px solid #ffffff
   }  

Hope this helps! :slight_smile:


#11

Hey @Zoe_Tattersall!

Thanks, this is super helpful! Love the layout & colors on your page. Nice work! :smiley: