WordPress.org

1. chezblue81
   Member
   Posted 2 years ago #

   I would greatly appreciate any help on this one, I'm stumped. :|

   The theme I use has settings for form elements, and they weren't appropriate for my contact form. So, I added styles to the styles.css form specifically for my contact form. Oddly, the first few items work like a charm in terms of how I want them to look... then all the sudden, elements start jumping all over the place half way down. Can't for the life of my figure out why.

   Here's the messed up page (assuming it's still messed up when you read this): http://www.adultcraftdaily.com/contact-us/

   Here's the CSS that I added for this form:

   /* ----------- My Form ----------- */

   .myform{
   margin:0 auto;
   width:400px;
   padding:14px;
   }

   /* ----------- stylized ----------- */
   #contact{
   border:solid 2px #b7ddf2;
   background:#ebf4fb;
   }

   #contact h1 {
   font-size:14px;
   font-weight:bold;
   margin-bottom:8px;
   }

   #contact p{
   font-size:11px;
   color:#666666;
   margin-bottom:20px;
   border-bottom:solid 1px #b7ddf2;
   padding-bottom:10px;
   }

   #contact label{
   display:block;
   font-weight:bold;
   text-align:right;
   width:140px;
   float:left;
   }

   #contact .small{
   color:#666666;
   display:block;
   font-size:11px;
   font-weight:normal;
   text-align:right;
   width:140px;
   }

   #contact input{
   float:left;
   font-size:12px;
   padding:4px 2px;
   border:solid 1px #aacfe4;
   width:200px;
   margin:2px 0 20px 10px;
   }

   #contact button{
   clear:both;
   margin-left:150px;
   width:125px;
   height:31px;
   background:#666666 url(img/button.png) no-repeat;
   text-align:center;
   line-height:31px;
   color:#FFFFFF;
   font-size:11px;
   font-weight:bold;
   }

   #contact fieldset {
   border: none;
   }

   #contact input, textarea {
   float:left;
   font-size:12px;
   padding:4px 2px;
   border:solid 1px #aacfe4;
   width:200px;
   margin:2px 0 20px 10px;
   }

   #contact textarea {
   float:left;
   font-size:12px;
   padding:4px 2px;
   border:solid 1px #aacfe4;
   width:200px;
   margin:2px 0 20px 10px;
   }

   And here's the Contact Form 7 form code I'm using:

   <div id="contact" class="myform">
   <label>Name
   <span class="small">Your Name (required)</span>
   </label>
   [text* your-name]
   <label>Email
   <span class="small">Your Email (required)</span>
   </label>
   [email* your-email]
   <label>Subject
   <span class="small">Your Subject</span>
   </label>
   [text your-subject]
   <label>Message
   <span class="small">Your Message</span>
   </label>
   [textarea your-message]
   [submit "Send"]
   </div>

   Can anyone see something that I'm missing here? Thanks for any assistance.

   http://wordpress.org/extend/plugins/contact-form-7/

2. belindajohnstone
   Member
   Posted 1 year ago #

   Would love to know how you got it looking so good. Having the same issues.

   Tried to use a table to get everything lined up, and did a similar thing to you. The table is working in everything but ie6 and 7, the labels and new css are all over the place, labels are all up high while the fields are spaced out.

   Cheers for any help.

Topic Closed

This topic has been closed to new replies.