Hey Thanks this Wufoo method helped me alot to create a cool form quickly... But please help me with the CSS..
What part of this code must I cut and where/how must I add it into my template_css.css file text?
(I know what CSS is and where to edit it in Joomla admin interface, I'm just not a CSS coder yet)
My form works if I copy all the code into the Chronofomrs "Form Code" section, except my cool colours and CSS styling doesn't? I would like to keep my forms CSS and website templates CSS styling different??
Your help will greatly be appreciated!
Check my forms code below:
-----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Order Form for a Wamba-Shop...
</title>
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<!-- CSS -->
<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - -
Title : Wufoo Form CSS
Author : Infinity Box Inc.
URL :
http://wufoo.com
Last Updated : November 20, 2006
- - - - - - - - - - - - - - - - - - - - - */
body{
margin:7px 0 15px 0;
text-align:center;
font-size:small;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}
* html body{
font-size:x-small; /* for IE5/Win */
f\ont-size:small; /* for other IE versions */
}
#container{
position:relative;
text-align:left;
}
#container, #top, #bottom, #footer{
margin:0 auto;
width:580px;
}
#top, #bottom{
height:10px;
display:block !important;
}
#top{
margin-top:10px;
}
form.wufoo{
margin:20px 20px 0 20px;
padding:0 0 20px 0;
}
h1, h2, h3{
font-weight:normal;
}
/* ----- LOGO ----- */
h1{
margin:0;
padding:0;
min-height:0;
background-color:#dedede;
border:1px solid #ccc;
border-bottom:none;
text-indent:-9000px;
text-decoration:none;
}
h1 a{
height:100%;
min-height:40px;
display:block;
background:url(/images/wflogo.png) no-repeat;
}
* html h1 a{
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://wufoo.com/images/wflogo.png", sizingMethod="crop");
}
img {
behavior: url(/css/iepngfix.htc);
border:none;
}
/* - - - - - - - - - - - - - - - - - - - - -
FORM
- - - - - - - - - - - - - - - - - - - - - */
.wufoo{
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:small;
}
.wufoo li{
width:62%;
}
form ul{
margin:0;
padding:0;
list-style-type:none;
width:100%;
}
form li{
margin:0;
padding:4px 5px 2px 9px;
position:relative;
}
form li:after, .buttons:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
form li, .buttons{display:inline-block;}
* html form li, * html .buttons{height: 1%;}
form li, .buttons{display: block;}
form li div, form li span{
margin:0 5px 0 0;
padding:0 0 8px 0;
color:#444;
}
form li span{
float:left;
}
form li div.left{
display:inline;
float:left;
width:48%;
}
form li div.right{
display:inline;
float:right;
width:48%;
}
form li div.left .medium, form li div.right .medium{
width:100%;
}
.clear{
clear:both;
}
form li div label, form li span label{
margin:0;
padding-top:3px;
clear:both;
font-size:9px;
line-height:9px;
color:#444;
display:block;
}
form li .icon{
float:left;
margin:.1em 5px 0 0;
padding:0;
width: 16px;
height: 16px;
}
/* ----- INFO ----- */
.info{
display:inline-block;
clear:both;
margin:0 0 1em 0;
border-bottom:1px dotted #ccc;
}
.info[class]{
display:block;
}
.info h2{
font-weight:normal;
font-size:160%;
margin:0 0 3px 0;
clear:left;
}
.info p{
font-size:95%;
line-height:130%;
margin:0 0 1em 0;
}
/* ----- SECTIONS ----- */
form hr{
display:none;
}
fieldset.section{
border:1px dotted #ccc;
margin:12px 0 15px 0;
padding:5px 0 0 0;
}
fieldset ul{
width:97%;
margin:0 10px 10px 10px;
}
fieldset.section legend{
font-weight:normal;
font-size:110%;
line-height:110%;
margin:0 0 0 0;
padding:0 5px 0 5px;
display:inline-block;
background:#fff;
}
fieldset.section[class] legend{
display:block;
margin:0 0 0 8px;
}
fieldset.section p.secTxt{
font-size:85%;
margin:7px 15px 10px 13px;
}
/* ----- CRAP SECTIONS ----- */
fieldset.section{
display:block;
position:relative;
border-left:none;
border-right:none;
border-bottom:none;
margin-bottom:0;
}
fieldset.first{
border-top:none !important;
margin-top:0px;
padding-top:1px;
}
fieldset.first h3{
margin-top:0 !important;
}
fieldset ul{
margin:0;
}
fieldset.section legend{
display:none !important;
}
form .section h3{
font-weight:normal;
font-size:110%;
line-height:130%;
margin:9px 0 2px 9px;
}
form .section p.secTxt{
margin-left:9px;
margin-top:3px;
}
/* ----- BUTTONS ----- */
.button{
cursor:hand !important;
}
input.btTxt{
padding:0 7px;
width:auto;
overflow:visible;
}
.buttons{
clear:both;
margin-top:10px;
}
.buttons input{
font-size:120%;
margin-right: 5px;
}
/* ----- FIELDS AND LABELS ----- */
label.desc{
line-height:150%;
padding:0 4px 1px 0;
border:none;
color:#444;
display:block;
font-size:95%;
font-weight:bold;
}
input.text, textarea.textarea, select.select{
margin:0;
font-size:100%;
border-top:1px solid #7c7c7c;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-bottom:1px solid #ddd;
background:#fff url(
http://wufoo.com/images/fieldbg.gif) repeat-x top;
color:#333;
}
input.text{
padding:2px 0 2px 0;
}
input.currency{
text-align:right;
}
input.checkbox, input.radio{
display:block;
line-height:1.4em;
margin:8px 0 0 3px;
width:13px;
height:13px;
}
label.choice{
font-size:100%;
display:block;
line-height:1.4em;
margin:-19px 0 0 25px;
padding:4px 0 5px 0;
color:#444;
width:90%;
}
textarea.textarea{
margin-top:1px;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}
select.select{
margin:1px 0;
padding:1px 0 0 0;
}
select.select[class]{
margin:0;
padding:1px 0 1px 0;
}
.safari select.select{
margin-bottom:1px;
font-size:120% !important;
}
/* ----- SIZES ----- */
.third{
width:32% !important;
}
.half{
width:48% !important;
}
.full{
width:100% !important;
}
input.small, select.small{
width:25%;
}
input.medium, select.medium{
width:50%;
}
input.large, select.large, textarea.textarea{
width:100%;
}
input.tags{
width:315px;
}
textarea.small{
height:5.5em;
}
textarea.medium{
height:10em;
}
textarea.large{
height:20em;
}
/* ----- ERRORS ----- */
#errorLi{
width:97%;
background:#fff;
border:1px dotted red;
margin-bottom:1em;
text-align:center;
}
#errorMsgLbl{
margin:7px 0 5px 0;
padding:0;
font-size:125%;
color:#DF0000;
}
#errorMsg{
margin:0 0 .8em 0;
color:#000;
font-size:100%;
}
#errorMsg strong{
background-color: #FFDFDF;
padding:2px 3px;
color:red;
}
form li.error{
background-color: #FFDFDF !important;
border-bottom:1px solid #EACBCC;
border-right:1px solid #EACBCC;
margin:3px 0;
}
form li.error label{
color:#DF0000 !important;
}
form p.error{
color:red;
font-weight:bold;
font-size:10px;
margin:0 0 5px 0;
clear:both;
}
/* ----- REQUIRED ----- */
form .req{
float:none;
color:red;
font-weight:bold;
}
/* ----- INSTRUCTIONS ----- */
form li.focused{
background-color:#fff7c0;
}
form .instruct{
display:none;
position:absolute;
top:0;
left:100%;
z-index:1000;
width:42%;
margin:0 0 0 8px;
padding:8px 10px 9px 10px;
border:1px solid #e6e6e6;
background:#f5f5f5;
line-height:130%;
font-size:80%;
color:#444;
}
form .instruct small{
font-size:100%;
}
form li.focused .instruct, form li:hover .instruct{
display:block;
}
.noI form li{
width:97% !important;
}
.noI .instruct{
display:none !important;
}
/* ----- Password ----- */
ul.protected{
list-style:none;
margin:60px 0;
}
.protected li{
text-align:center;
padding:10px 0;
}
.protected h2{
font-weight:bold;
color:#DF0000;
margin:0 auto 10px auto;
}
.protected label{
font-size:120% !important;
padding-top:10px;
display:block;
}
.protected input.text{
font-size:170% !important;
width:380px;
text-align:center;
}
.protected .buttons{
margin:0;
}
.protected #saveForm{
font-size:120% !important;
}
/* ----- CUSTOM THEME ----- */
</style>
</head>
<body>
<div id="container">
<h1><a href="">Order Form for a Wamba-Shop...</a></h1>
<form id="form1" class="wufoo" method="post" action="" enctype="multipart/form-data">
<div class="info">
<h2>Order Form for a Wamba-Shop...</h2>
<p>This is my form. Please fill it out. It's awesome.<br /><br />Well that's if you want to start your path out of the rat-race and become a successful
internet entrepreneur.<br /><br />We also help current e-commerce shop owners to upgrade and join our Wamba-Mall's ranks and with it - share its
opportunities...<br /><br />Let us know if your interested, by filling in this no obligation form below.</p>
</div>
<ul id="formFields">
<li>
<p class="instruct">The Light package is cheaper and limits products to 1000, but the Pro package is unlimited with better support and marketing value.</p>
<label class="desc" for="field13">Choose Wamba-Shop Package</label>
<span>
<input id="field130" name="field13" class="field radio" type="radio" value="Wamba-Shop Lite"/>
<label class="choice" for="field130">Wamba-Shop Lite</label>
<input id="field131" name="field13" class="field radio" type="radio" value="Wamba-Shop Pro"/>
<label class="choice" for="field131">Wamba-Shop Pro</label>
</span>
</li>
<li>
<p class="instruct">Please enter your name here.</p>
<label class="desc" for="field1">Your Name</label>
<span>
<input id="field1" name= "field1"
class="field text" size="8" value=""/>
<label class="tam">First</label></span>
<span>
<input id="field2" name= "field2"
class="field text" size="14" value=""/>
<label class="tam">Last</label></span>
<p class="tam"></p>
</li>
<li>
<p class="instruct">Please enter your cellphone number here.</p>
<label class="desc" for="field11">Phone</label>
<img src="/images/icons/telephone.png" class="icon" alt="Phone Number" />
<span>
<input id="field11" name="field11" class="field text" type="text" size="3" maxlength="3" value=""/> -
<label>(###)</label>
</span>
<span>
<input id="field11-1" name="field11-1" class="field text" type="text" size="3" maxlength="3" value=""/> -
<label>###</label>
</span>
<span>
<input id="field11-2" name="field11-2" class="field text" type="text" size="4" maxlength="4" value=""/>
<label>####</label>
</span>
</li>
<li>
<p class="instruct">Please enter a valid email address here.</p>
<label class="desc" for="field12">Email</label>
<div>
<input id="field12" name="field12" class="field text large" type="text" maxlength="255"value="@gmail.com"/>
</div>
</li>
<li>
<p class="instruct">Select Your Country. <br />
Currently we only support the South African market. </p>
<label class="desc" for="field5">Address Details</label>
<div class="full">
<input id="field5" name="field5" class="field text large" type="text" value="" />
<label class="">Street Address</label>
</div>
<div class="full">
<input id="field6" name="field6" class="field text large" type="text" value="" />
<label class="">Address Line 2</label>
</div>
<div class="left">
<input id="field7" name="field7" class="field text medium" type="text" value="" />
<label class="">City</label>
</div>
<div class="right">
<input id="field8" name="field8" class="field text medium" type="text" value="" />
<label class="">State / Province / Region</label>
</div>
<div class="left">
<input id="field9" name="field9" class="field text medium" type="text" maxlength="15"value="" />
<label class="">Postal / Zip Code</label>
</div>
<div class="right">
<select class="field select medium" id="field10" name="field10">
<option value="" selected="selected"></option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Côte d'Ivoire">Côte d'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Greece">Greece</option>
<option value="Grenada">Grenada</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="North Korea">North Korea</option>
<option value="South Korea">South Korea</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia">Micronesia</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Vincent">Saint Vincent</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia and Montenegro">Serbia and Montenegro</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan" >Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City">Vatican City</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
<label class="field">Country</label>
</div>
<p></p></li>
<li>
<p class="instruct">If you do not have a website already, what domain would you like us to register for you? Preferably a .co.za domain for the South African
Market, and it's cheaper than a .com.</p>
<label class="desc" for="field14">Do you have an e-commerce website or domain already?</label>
<div>
<input id="field14" name="field14" class="field text medium" type="text" maxlength="255" value="www.your-website.co.za"/>
</div>
</li>
</ul>
<div class="buttons">
<input id="submit" name="submit" class="button" type="submit" value="Submit" />
</div>
</form>
</div><!--container-->
</body>