applying css styles to the built in contact form

(3 posts) (2 voices)

1. 

   pentego
   Member

   By adding a div container with an ID around a contactform, i am able to change the color of the form and stick an image at the top.

   -----------
   <div id="contact_us_page_form_1">
   <img src="/wp-content/uploads/2012/01/bg_heading2.jpg" width="360px" alt="" />
   [contactform ...... captcha="true"]
   [name label="Company Name"]
   [name label="Full Name" required="true"]
   [email label="Email" required="true"]
   [textfield label="Phone Number" required="true"]
   [textfield label="Subject" required="true"]
   [textarea label="Message" required="true"]
   [checkbox label="Subscribe to newsletter?"]
   [/contactform]
   </div>
   [/two_fifth_last]
   -----------

   With custom CSS, I can change the background color, set width etc....
   -----------
   #contact_us_page_form_1 {
   background-color:#F7F7F7;
   padding-left:0px;
   padding-bottom:15px;
   margin-top:0px;
   width:360px;
   }
   -----------

   Now, when I look at the Page Source code.... I will see that the generated contactform is
   ------------
   <div id="mysite_form1" class="mysite_form">
   <form action="/contact-us/#mysite_form1" method="post">
   .....
   ------------

   So, now, I want to add some padding on the left side of the form.
   ------------
   #mysite_form1 {
   padding-left:25px;
   }
   ------------

   The question that I have is this.

   is there a way to get the form 'div ID' with out reviewing the page source ?

   Jerry

   Posted 4 months ago #
2. 

   Elliott
   Support

   Hello pentego,

   For each additional form it will add 1 to the ID like so,

   mysite_form1
   mysite_form2
   mysite_form3

   etc etc

   Posted 4 months ago #
3. 

   pentego
   Member

   I thought as much..

   Thanks.

   Jerry

   Posted 4 months ago #

RSS feed for this topic

Reply

You must log in to post.