Breadcrumbs

Home Web Development Styling Contact Form 7 in Wordpress
Styling Contact Form 7 in Wordpress PDF Print E-mail
Written by Administrator   

 

Below is an example of the types of styling you can achieve with Contact Form 7 used with Wordpress. You can use HTML and CCS code to style a Contact Form 7

 

 

<div style="height:38px ;"></div>

 

<div style="float:left; margin:1px; width:250px;">

<p>First name (required)<br />

[text* your-name] </p>

</div>

<div style="float:left; margin:1px; width:274px ;">

<p>Last name (required)<br />

[text* last-name-73 id:last-name] </p>

</div>

 

<p>Company name (required)<br />

[text* your-subject] </p>

 

<p>Company email (required)<br />

[text* your-email] </p>

 

<p>Telephone (required)<br />

[text* tel-405 /10 id:Phone] </p>

 

<div style="float:left; margin:1px; width:150px;">

<p>State (required)

[select* state-680 id:State include_blank "VIC" "NSW" "QLD" "WA" "SA" "NT" "ACT" "TAS"]

</p>

</div>

<div style="float:left; margin:1px; width:150px ;">

<p>Size of company

[select* menu-710 id:sizeofcomany include_blank "Less than 100" "100-250" "251-500" "501-1000"

"1001-5000" "5000+"] </p>

</div>

<div style="float:left; margin:1px; width:200px ;">

<p>How did you hear about us?

[select* menu-844 id:Hearaboutus include_blank "Internet Search" "E-mail" "Advertising"

"Press/Media" "Direct Mail" "LinkedIn" "Event" "Forum" "Referral" "Other"]</p>

</div>

 

<p>How can we help (required)

[textarea* textarea-868 id:messagebody2]</p>

 

<p>[submit "Send"]</p>

 

Below is the result

 

 

For more info visit http://contactform7.com/text-fields/