Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: form styling

  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    form styling

    Hi everyone, I'm trying to style a contact form, never really used forms before and I can't seem to figure out what bits I need to style to achieve this design that was given to me.



    Below is the form code, I think this is correct but if not please let me know.

    Code:
    <form name="htmlform" method="post" action="html_form_send.php">
    	<label for="name">Name</label>
    	<input type="text" name="first_name" maxlength="30">
    	<label for="email">Email</label>
    	<input  type="text" name="email" maxlength="80" size="30">
    	<label for="telephone">Phone</label>
    	<input  type="text" name="telephone" maxlength="15" size="30">
    	<input class="button" type="submit" value="Submit Enquiry">
    </form>
    I've managed to style the button with the code below but no matter what I do I can't seem to get everything to line up with the form itself.

    Code:
    .button {
    	background-color: #36741d;
    	border: none;
    	padding:5px 20px 5px 10px;
    	color: white;
    	float: right;
    	margin-top: 10px;
    	font-size: 12px;
    	background-image: url(images/submitbg.jpg);
    	background-position: right;
    	background-repeat: no-repeat;
    }

  • #2
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't worry about this, I finally managed to get it working using the code below. I think what I was doing wrong originally was using .label and .input, schoolboy error.

    Code:
    label {
    	display: block;
    	background-color: #4a4a4a;
    	width: 42px;
    	height: 16px;
    	float: left;
    	margin-bottom: 10px;
    	border:solid 1px #4a4a4a;
    	padding: 7px 6px;
    }
    input, input:focus {
    	width: 165px;
    	height: 28px;
    	margin-bottom: 10px;
    	background-color: #323232;
    	border:solid 1px #4a4a4a;
    	padding-left:5px;
    	color: white;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •