WordPress.org

1. chezblue81
   Member
   Posted 2 weeks 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/

Reply

You must log in to post.