Answered

Here is a Customized version of the "Free members signup form"..

Im new here, Just getting into member mouse and looking to customise it heavily for my own use so thought I would post up a modification i made on my first night.



After having a look around i could not find much information on customising the "free membership signup form" So i created my own modifications.



This form has had a few style improvements and also moved the text inside the input fields.The text is removed when someone clicks inside the input field.



I will improve this as time goes on, but for now its a solid starting point. Will update with a picture later, (my site is currently offline due to technical issues)



If you implement it test it on a test page first to make sure their are no conflicts. also replace your URL where i put "replace" in the form. i will update will a link to download the icon later, but you can easily add your own icon. Also make sure you place the membership id you want people to sign up to.



Hopefully i can update this post, if not check for my most recent post for newest version. If you have your own styles please upload them for the community and feel free to imrpove my code . I am new to it all ;)





The HTML CODE:





































THE CSS CODE:



input[type="submit"] {

cursor: pointer;

-webkit-appearance: button;

width: 300px;

font-size:24px;color:#ffffff;font-family:"Gill Sans", "Gill Sans MT", Calibri, sans-serif;font-weight:bold;text-shadow:#000000 0px 1px 0px;}





input[type="submit"]:hover {border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px; background: #999999;

}



input[type=text] {

background: url(http://replace.com/wp-content/uploads/youricon.png) 3px 13px no-repeat, linear-gradient(to bottom, #A2A2A2 0%,#FFFFFF 100%);

border-radius: 12px;

border: none;

box-shadow: 0 1px 2px rgba(255, 255, 255, 1) inset, 0 -1px 0 rgba(240, 240, 240, 1) inset;

transition: all 0.2s linear;

font-family: "Helvetica Neue", sans-serif;

font-size: 15px;

color: #315C74;

position: relative;

width: 300px;

padding-left: 30px;

text-align: left;

text-transform: capitalize;

height: 36px;

}

Thanks :) will try it out and report back. Look forward to your updates.
I have kinda scrapped the CSS code now. But the html code is good, it removes the text from the side of the form and puts it inside the text input fields. It also disappears when a user clicks that field.

You can see the form in action here: http://streamism.com/

I will tweak it more to style it once i have completed other parts of my site. But its getting their.

Will post the final code in the next few days :)
Answer Thanks for providing this as a starting point!

Login or Signup to post a comment