Styling an ugly CSS form with code from another CSS form?

I had a form made for me with a form creating program. I want to style it using the CSS that applies to my contact form, I want the styles to be the same.

I am just having trouble meshing the two together, I have tried numerous times and have gotten close but then I get scrambled up somewhere.

So I am hoping someone has done this before and knows how to do this efficiently and effectively, I have a lot of projects and I am trying to save time.

Thanks for all your help.

P.S I will post code upon request, if you need to see my code then so be it I will post it. Just let me know :slight_smile:

Yes, we certainly need to see you code, but preferably a live link, as then we can really see what rules are applying to each form. Otherwise we are shooting in the dark. There may be styles overriding your code that you are not aware of. We at least need to see the HTML for both forms (an perhaps their on-page context, such as what divs they sit inside), and probably your whole style sheet(s) just to be sure.

yep :), post your code.

A lot of people come to forums like this asking for help with code without posting any evidence showing they are making a legitimate attempt at solving the problem. In my experience at least a small number of those, and I’m not saying you are one of them, think forums like this are nothing more than a free coding and debugging service, which it obviously it isn’t.

Well there’s your problem. Automated tools to make code, particularly for websites are almost ALWAYS rubbish. It sucks that there are no easy approaches to form building (actually there is, it’s called “write the code yourself!”) but universally anything that “does it for you” is total junk – forget it even exists.

But as everyone else said, no code, no help… and a copy of what you’re trying to work with “live” somewhere would be a billion times more helpful as we’re all stuck guessing wildly otherwise.

Yeah I agree with you.

Sorry guys been busy all day here it is.

HTML for the form I want, don’t like the css style though.

   <div class="block_post block_single_post">
                        	<h2>&nbsp;</h2>
                        	<div class="quoteform">
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            <div class="TTWForm-container">
      
      
     <form action="form.php" class="TTWForm" method="post" novalidate=""
     enctype="multipart/form-data">
           
           
          <div id="field3-container" class="field f_100">
               <label for="Timeline">
                    What is your timeline for this project?
               </label>
               <select name="Timeline" id="Timeline" required="required">
                    <option id="Timeline-1" value="Less than 1 week">
                         Less than 1 week
                    </option>
                    <option id="Timeline-2" value="1 week ">
                         1 week
                    </option>
                    <option id="Timeline-3" value="2 weeks">
                         2 weeks
                    </option>
                    <option name="Timeline" id="Timeline-4" value="3 weeks">
                         3 weeks
                    </option>
                    <option name="Timeline" id="Timeline-5" value="More than 1 month">
                         More than 1 month
                    </option>
               </select>
          </div>
           
           
          <div id="field5-container" class="field f_100">
               <label for="Budget">
                    What is your estimated budget?
               </label>
               <select name="Budget" id="Budget" required="required">
                    <option id="Budget-1" value="$ 500-1,000">
                         $ 500-1,000
                    </option>
                    <option id="Budget-2" value="$ 1,000-1,500">
                         $ 1,000-1,500
                    </option>
                    <option id="Budget-3" value="$ 1,500-2,000">
                         $ 1,500-2,000
                    </option>
                    <option name="Budget" id="Budget-4" value="$ 2,000-3,000">
                         $ 2,000-3,000
                    </option>
                    <option name="Budget" id="Budget-5" value="$ +3,000">
                         $ +3,000
                    </option>
               </select>
          </div>
           
           
          <div id="field7-container" class="field f_100 checkbox-group required">
               <label for="field7-1">
                    What do you need for your project?
               </label>
                
                <div class="checkbox">
                
               <div class="option clearfix">
                    <input type="checkbox" name="field7[]" id="field7-1" value="Logo">
                    <span class="option-title">
                         Logo
                    </span>
                    <br>
               </div>
                
                
               <div class="option clearfix">
                    <input type="checkbox" name="field7[]" id="field7-2" value="Website">
                    <span class="option-title">
                         Website
                    </span>
                    <br>
               </div>
                
                
               <div class="option clearfix">
                    <input type="checkbox" name="field7[]" id="field7-3" value="CMS">
                    <span class="option-title">
                         CMS
                    </span>
                    <br>
               </div>
                
                
               <div class="option clearfix">
                    <input type="checkbox" name="field7[]" id="field7-4" value="Flash">
                    <span class="option-title">
                         Flash
                    </span>
                    <br>
               </div>
                
                
               <div class="option clearfix">
                    <input type="checkbox" name="field7[]" id="field7-5" value="E-commerece">
                    <span class="option-title">
                         E-commerece
                    </span>
                    <br>
               </div>
                
                
               <div class="option clearfix">
                    <input type="checkbox" name="field7[]" id="field7-6" value="Mobile website">
                    <span class="option-title">
                         Mobile website
                    </span>
                    <br>
               </div>
               
               
               
               <div class="option clearfix"><br>
               </div>
               
               
               
               
                
                
               <div class="option clearfix">
                    <input type="checkbox" name="field7[]" id="field7-7" value="Other">
                    <span class="option-title">
                         Other
                    </span>
                    <br>
               </div>
          </div>
           
           </div>
          <div id="field13-container" class="field f_100">
               <label for="field13">
                    Approximately how many pages will your website have?
               </label>
               <input type="number" name="field13" id="field13" required="required" min="1"
               max="1000">
          </div>
           
           
          <div id="field8-container" class="field f_100">
               <label for="field8">
                    Your current website url?
               </label>
               <input type="url" name="field8" id="field8">
          </div>
           
           
          <div id="field16-container" class="field f_100">
               <label for="field16">
                    Your name
               </label>
               <input type="text" name="field16" id="field16" required="required">
          </div>
           
           
          <div id="field15-container" class="field f_100">
               <label for="field15">
                    Phone number
               </label>
               <input type="text" name="field15" id="field15" required="required">
          </div>
           
           
          <div id="field17-container" class="field f_100">
               <label for="field17">
                    Email Address
               </label>
               <input type="email" name="field17" id="field17" required="required">
          </div>
           
           
          <div id="field21-container" class="field f_100">
               <label for="field21">
                    Upload files that relate to your vision. (optional)
               </label>
               <input type="file" name="field21" id="field21">
          </div>
           
           
       
           
          <div id="field11-container" class="field f_100">
               <label for="field11">
                    Tell us more about your project.
               </label>
               <textarea rows="5" cols="20" name="field11" id="field11"></textarea>
          </div>
           
           
          <div id="form-submit" class="field f_100 clearfix submit">
               <input type="submit" value="Submit">
          </div>
     </form>
</div>
                            
                            
                            
                            </div>
                   	    <div class="cl"></div>
                            <div class="line"></div>
                        </div>
                    </div>
                    
                    <div class="column2">
                    	<div class="block_search">
                        	<form action="#">
                            	<div class="block_field"><input type="text" class="w_def_text" value="" /><span>Site search</span></div>
                                <input type="submit" class="button_search" value="" />
                            </form>
                        </div>

CSS code for the ugly form :slight_smile:

.TTWForm{
    width: 500px;
}
 
 
.TTWForm-container {
	font-size: 94%;
	color: #222;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	background-color: #fff;
}
 
.TTWForm-container h2 {
    font-size: 2em;
    margin-bottom: 0.75em;
    color: #333333;
    font-weight: normal;
}
 
 
/** Field Styles **/
.TTWForm .field, #form-title.field {
    padding-bottom: 12px;
    padding-top: 12px;
    position: relative;
    clear: both;
}
 
/** Field Widths */
.f_25 {
    width: 21%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
 
.f_50 {
    width: 46%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
 
.f_75 {
    width: 71%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
 
.f_100 {
	width: 76%;
	display: inline;
	float: left;
	margin-left: 2%;
	margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
 
 
.TTWForm input, .TTWForm textarea, .TTWForm select, div.selector, div.uploader  {
    width:100%;
    font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
    padding: 6px 0;
    color: #999999;
    border: 1px solid #d9d9d9;
    outline: none;
    display: inline-block;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px #eee inset;
    -moz-box-shadow: 0 0 10px #eee inset;
    -webkit-box-shadow: 0 0 10px #eee inset;
    -ms-box-shadow: 0 0 10px #eee inset;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
}
 
.TTWForm input:focus, .TTWForm textarea:focus, .TTWForm select:focus {
    -webkit-box-shadow: 0px 0px 5px #bfdeff;
    -moz-box-shadow: 0px 0px 5px #bfdeff;
    box-shadow: 0px 0px 5px #bfdeff;
}
 
.TTWForm input[type=radio], .TTWForm input[type=checkbox] {
    width: 12px;
    margin: 8px 12px;
    top: 3px;
    position: relative;
}
 
.TTWForm .option{
	width: 50%;
	margin-top: 6px;
	margin-right: 0;
	margin-bottom: 6px;
	margin-left: 0;
	float: right;
}
 
.TTWForm select {
    padding: 6px 6px;
}
 
.TTWForm textarea {
    overflow: hidden;
}
 
.TTWForm label {
    color: #666;
    text-align: left;
    font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
}
 
.TTWForm .submit input {
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    text-shadow: 1px 1px 0px #fff;
    display: block;
    margin: 12px -2px 12px 0;
    text-align: center;
    float: right;
    padding: 6px 12px;
    height: 36px;
    cursor: pointer;
    min-width: 96px;
    width:auto;
    background: #FBFBFB; /* old browsers */
    background: -moz-linear-gradient(top, #FBFBFB 0%, #EEEEEE 99%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FBFBFB), color-stop(99%, #EEEEEE)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FBFBFB', endColorstr = '#EEEEEE', GradientType = 0); /* ie */
    border: 1px solid #cfcfcf;
    font-weight: bold;
    color: #666;
}
 
 
#form-title {
    padding: 12px;
}
 
#form-title h2{
    margin-bottom:0;
}
 
/** Date Input **/
 
#calroot {
    z-index: 10000;
    margin-top: -1px;
    width: 198px;
    padding: 2px;
    background-color: #fff;
    font-size: 11px;
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 0 15px #666;
    -webkit-box-shadow: 0 0 15px #666;
}
 
#calhead {
    padding: 2px 0;
    height: 22px;
}
 
#caltitle {
    font-size: 14px;
    color: #0150D1;
    float: left;
    text-align: center;
    width: 155px;
    line-height: 20px;
    text-shadow: 0 1px 0 #ddd;
}
 
#calnext, #calprev {
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    cursor: pointer;
    background: transparent url(../images/prev.png) no-repeat center center scroll;
}
 
#calnext {
    float: right;
    background: transparent url(../images/next.png) no-repeat center center scroll;
}
 
#calprev.caldisabled, #calnext.caldisabled {
    visibility: hidden;
}
 
#caltitle select {
    font-size: 10px;
}
 
#caldays {
    height: 14px;
    border-bottom: 1px solid #ddd;
}
 
#caldays span {
    display: block;
    float: left;
    width: 28px;
    text-align: center;
}
 
#calweeks {
    background-color: #fff;
    margin-top: 4px;
}
 
.calweek {
    clear: left;
    height: 22px;
}
 
.calweek a {
    display: block;
    float: left;
    width: 27px;
    height: 20px;
    text-decoration: none;
    font-size: 11px;
    margin-left: 1px;
    text-align: center;
    line-height: 20px;
    color: #666;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
 
.calweek a:hover, .calfocus {
    background-color: #ddd;
}
 
a.calsun {
    color: red;
}
 
a.caloff {
    color: #ccc;
}
 
a.caloff:hover {
    background-color: rgb(245, 245, 250);
}
 
a.caldisabled {
    background-color: #efefef !important;
    color: #ccc !important;
    cursor: default;
}
 
#calcurrent {
    background-color: #498CE2;
    color: #fff;
}
 
#caltoday {
    background-color: #333;
    color: #fff;
}
 
 
/** Range Input **/
 
.slider {
    background: #3C72E6 url(../images/range_gradient.png) repeat-x 0 0;
    height: 9px;
    position: relative;
    cursor: pointer;
    border: 1px solid #333;
    width: 100%;
    float: left;
    clear: right;
    margin-top: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: inset 0 0 8px #000;
}
 
.progress {
    height: 9px;
    background-color: #C5FF00;
    display: none;
    opacity: 0.6;
}
 
.handle {
    background: #fff url(../images/range_gradient.png) repeat-x 0 0;
    height: 28px;
    width: 28px;
    top: -12px;
    position: absolute;
    display: block;
    margin-top: 1px;
    border: 1px solid #000;
    cursor: move;
    -moz-box-shadow: 0 0 6px #000;
    -webkit-box-shadow: 0 0 6px #000;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
 
}
 
.range {
    border: 1px solid #ddd;
    float: left;
    font-size: 20px;
    margin: 0 0 0 15px;
    padding: 3px 0;
    text-align: center;
    width: 50px !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
 
 
/**Error Messages **/
 
.TTWForm .error {
    height: 16px;
    font: 11px/16px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
    color: #ff0033;
    padding-left: 12px;
    z-index: 999;
    position:relative;
    top:-1px;
}
 
 
/** Loading Indicator **/
.loading-text{
    position:relative;
    top:-3px;
}
 
 
/** Clearfix */
.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
 
/*
    The following zoom:1 rule is specifically for IE6 + IE7.
    Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}

CSS code for the contact form, I want to implement this style on the HTML form up there. This is not all of the style.CSS just the bit of code I believe applies to the contact form. I hope I am not missing any parts.

.block_send_message {overflow:hidden;}
.block_send_message h2 {margin-bottom:23px;}
.block_send_message .cl {height:12px;}
.block_send_message .block_field {width:211px; height:32px; margin-left:11px; float:left; overflow:hidden; position:relative; background:url(images/bg_field_send_message.png) no-repeat;}
.block_send_message .block_field:first-child {width:212px; margin-left:0px;}
.block_send_message .block_field input {width:195px; height:17px; line-height:17px; margin-left:5px; margin-top:6px; display:none; background-color:transparent; border:0px; font-size:12px; color:#ababab;}
.block_send_message .block_field span {width:195px; display:block; position:absolute; left:6px; top:8px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ababab; cursor:text;}
.block_send_message .block_field span b {color:#232323; font-weight:normal;}
.block_send_message .block_textarea {width:656px; height:122px; margin-bottom:14px; overflow:hidden; position:relative; background:url(images/bg_textarea_send_message.png) no-repeat;}
.block_send_message .block_textarea textarea {width:640px; height:110px; line-height:17px; margin-left:5px; margin-top:6px; display:none; background-color:transparent; border:0px; font-size:12px; color:#ababab;}
.block_send_message .block_textarea span {width:640px; height:110px; display:block; position:absolute; left:6px; top:8px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ababab; cursor:text;}
.block_send_message .block_textarea span b {color:#232323; font-weight:normal;}
.block_send_message .buttons_send_mess {float:right; overflow:hidden;}
.block_send_message .main_button {margin-left:5px; float:left; position:relative;}
.block_send_message .main_button a {padding:0px;}
.block_send_message .main_button input {width:70px; height:30px; line-height:30px; display:block; overflow:hidden; background-color:transparent; border:0px; cursor:pointer;  font-size:13px; color:#717171; text-align:center;}
.block_send_message .main_button_act input {color:#e7e7e7;}

.block_corporation_info {padding-bottom:34px; overflow:hidden;}
.block_corporation_info h2 {margin-bottom:17px;}
.block_corporation_info p {line-height:17px;}
.block_corporation_info .pic {margin-right:12px; padding-top:3px; float:left;}

.block_contact_info {padding-top:28px;}
.block_contact_info div {padding-left:25px; margin-top:10px; overflow:hidden;}
.block_contact_info div:first-child {margin-top:0px;}
.block_contact_info div p {line-height:normal;}
.block_contact_info a {color:#bf4c17; text-decoration:none;}
.block_contact_info a:hover {text-decoration:underline;}
.block_contact_info .corp_info {background:url(images/icon_corp_info.png) no-repeat 2px 0px;}
.block_contact_info .corp_phone {background:url(images/icon_corp_phone.png) no-repeat 1px 1px;}
.block_contact_info .corp_fax {background:url(images/icon_corp_fax.png) no-repeat 0px 0px;}
.block_contact_info .corp_email {background:url(images/icon_corp_email.png) no-repeat 1px 2px;}

HTML code for my contact form.

 <div class="block_send_message">
                    	<h2>Send a Message</h2>
                        
                       <form name="contactform" method="post" action="../../send_form_email.php">

<div class="block_field fl">
  <label for="first_name"></label>
   <input type="text"  name="first_name"  class="w_def_text" value="" />
                  <span>Name</span></div>
 
 
  
<div class="block_field fr">
  <label for="email"></label>
 <input type="text" name="email"    class="w_def_text" value="" />
                    <span>E-mail</span></div>
  
<div class="cl"></div>
<div class="block_textarea">
  <textarea name="comments" cols="1" rows="1" class="w_def_text"></textarea>
  <label for="comments"></label>
  <span>Message</span></div>
                 
                 
                  <div class="buttons_send_mess">
                            	<div class="main_button">
                                    <span class="l"></span>
                                    <a><input type="submit" value="Send" /></a>
                                    
                                        <span class="r"></span>
                                </div>
                                
                                <div class="main_button">
                                    <span class="l"></span>
                                    <a><input type="reset" class="button_reset" value="Clear" /></a>
                                    
                    </div></div>
                </form>
                        
                    </div>
                </div>

I guess my best bet would be to just create a new form from scratch and apply the CSS Styles from my desired CSS file. The problem is I am not good at creating forms from scratch, I would be better at stripping parts of the code ex. using the created form as a layout I guess. Any suggestions and solutions are more than welcome :slight_smile: