Buy Now
Sign in

Cut development times

web2xs , February 16 2007, 00:07
W
web2xs 1
February 16 2007, 00:07 #132
Hi All,

Came across a wicked partner to ChronoForms http://www.wufoo.com. The site is for form creation via an amazing ajax interface.

So how to get the info to your Joomla site??

    [*]Register for a free account https://signup.wufoo.com/signup/[/*]
    [*]Create your form via the form manager - It's so easy, your grandma could do it[/*]
    [*]View the code via the code button - Select XHTML/CSS Code Only[/*]
    [*]Copy code to favourite editor[/*]
    [*]Seperate form code and CSS - CSS goes in your template_css.css and form code goes to ChronoForm in the 'Form HTML:' section[/*]
    [*]Configure the rest of the form as normal[/*]
Hey presto you have professional looking forms created in minutes, rather than hours.

Hope this helps someone.

2XS
P.S. I am in no way affiliated with wufoo, just thought I would share the experience.
J
jaycosmo 2
March 13 2007, 06:59 #174
didn't find this site useful, seemed really complex for me. dreamweaver was simpler, at least i don't have to deal with any of this fancy css cut and paste.
J
jaycosmo 2
March 13 2007, 06:59 #175
didn't find this site useful, seemed really complex for me. dreamweaver was simpler, at least i don't have to deal with any of this fancy css cut and paste.
M
Momo 2
March 30 2007, 01:34 #242
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&ocirc;te d'Ivoire">C&ocirc;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>
M
Momo 2
April 03 2007, 22:39 #246
Here is the link to my form...
http://www.wamba-mall.co.za/chronocontact/2.html

How do I get Joomla to only change the look colours and feel of just the form and not my site??

heres the link again FYI:
http://www.wamba-mall.co.za/chronocontact/2.html

Any suggestions to improve is welcome, was my first try...