« HtmlEntities Adobe AIR widget

GeSHify: a GeSHi syntax highlighting extension for Expression Engine »

Forms with WuFoo

20 . December 2007
written by Clemens Lang at Dec 20th 2007, 22:08
Do you create web forms a lot? Doing a lot of copy and paste on this task?

I've been listening to Technikwürze Podcast, Episode 104 (a german podcast about design and webstandards) and they've been talking about WuFoo, an online service to create HTML forms. You can create forms using drag and drop on their site. If you want their server side validation, their statistics and their database power, you can purchase a paid subscription plan, but what I want to point out today is their XHTML/CSS export feature.

When you create a form, click the code-button and choose “XHTML/CSS code only” on the right they'll serve you the correct XHTML and CSS code for the form you designed ready somewhat ready to include it into your web site. I moved all their CSS rules into some kind of “namespace” so they wouldn't interfere with my site's CSS rules (particularly my CSS files require the form to be in an element with class “wf” assigned to it and the IDs being used in the form are prefixed with “wf_”). I added some jQuery JavaScript for the cool eye candy-effects and that's it. Now I can easily insert WuFoo-generated forms in my site (and oh boy, I will).

Note that you will have to take care of form validation yourself - you're not using the WuFoo guys' servers and I didn't include client-side validation in my JavaScript.

If you'd like to use my modified CSS file and my jQuery JavaScript code scroll down for a highlighted version or get it here: CSS and jQuery JavaScript. The CSS and XHTML code has been released under a CreativeCommons Attribution 2.5 license and I'm hereby releasing the jQuery code under the same license.

  1.  
  2. /* - - - - - - - - - - - - - - - - - - - - -
  3. Title : Wufoo Form Structure
  4. Author : Infinity Box Inc.
  5. URL : http://wufoo.com
  6. Last Updated : September 30, 2007
  7. - - - - - - - - - - - - - - - - - - - - - */
  8. .wf {
  9. 	margin:7px 0 15px 0;
  10. 	text-align:center;
  11. 	font-size:small;
  12. 	background:#fff3e8;
  13. 	font-family:Verdana,Geneva,Helvetica,sans-serif;}
  14. .wf #wf_container {
  15. 	text-align:left;
  16. 	background:#fff3e8;}
  17. .wf #wf_container, .wf #wf_top, .wf #wf_bottom, .wf #wf_footer {
  18. 	margin:0 auto;
  19. 	width:90%;
  20. }
  21. .wf #wf_top, .wf #wf_bottom {
  22. 	width:90%;
  23. 	height:10px !important;
  24. 	display:block !important;
  25. }
  26. .wf #wf_top {margin-top:10px;}
  27. .wf form.wufoo {
  28. 	margin:20px auto 0 auto;
  29. 	padding:0 0 20px 0;
  30. }
  31. /* ----- LOGO ----- */
  32. .wf h1 {
  33. 	margin:0;
  34. 	padding:0;
  35. 	min-height:0;
  36. 	background-color:#dedede;
  37. 	text-indent:-9000px;
  38. 	text-decoration:none;
  39. }
  40. .wf h1 a {
  41. 	height:100%;
  42. 	min-height:40px;
  43. 	display:block;
  44. 	/*background:url(/images/wflogo.png) no-repeat left top;*/
  45. 	overflow:hidden;
  46. }
  47. * html .wf h1 a {
  48. 	background-image: none;
  49. 	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/wflogo.png", sizingMethod="crop");
  50. }
  51. .wf img {
  52. 	/*behavior: url(/images/iepngfix.htc);*/
  53. 	border:none;
  54. }
  55. .wf .hide {
  56. 	display:none !important;
  57. }
  58. /* - - - - - - - - - - - - - - - - - - - - -
  59. Title : Wufoo Form Foundation
  60. Author : Infinity Box Inc.
  61. URL : http://wufoo.com
  62. Last Updated : November 13, 2007
  63. - - - - - - - - - - - - - - - - - - - - - */
  64. .wf .wufoo {font-family:Verdana,Geneva,Helvetica,sans-serif;
  65. 	font-size:small;
  66. }
  67. .wf .wufoo li {width:62%;}
  68. .wf form ul {
  69. 	margin:0;
  70. 	padding:0;
  71. 	list-style-type:none;
  72. 	width:100%;
  73. 	font-size:100%;
  74. }
  75. .wf form li {
  76. 	margin:0;
  77. 	padding:4px 5px 2px 9px;
  78. 	position:relative;
  79. 	clear:both;
  80. }
  81. .wf form li.focused label {
  82. 	color: #fff3e8;}
  83. .wf form input.focused,
  84. .wf form textarea.focused,
  85. .wf form select.focused {
  86. 	border-color: #f00;}
  87. .wf form li:after, .wf .buttons:after {
  88. 	content:"."; 
  89. 	display:block;
  90. 	height:0; 
  91. 	clear:both; 
  92. 	visibility:hidden;
  93. }
  94. .wf form li, .wf .buttons {
  95. 	display: inline-block;
  96. }
  97.  
  98. * html .wf form li, * html .wf .buttons {
  99. 	height: 1%;
  100. }
  101. .wf form li, .wf .buttons {
  102. 	display: block;
  103. }
  104. * html .wf form li div {display:inline-block;}
  105. .wf form li div, .wf form li span {
  106. 	margin:0 4px 0 0;
  107. 	padding:0 0 8px 0;
  108. 	color:#444;
  109. }
  110. .wf form li span {float:left;}
  111. .wf form li div.address {padding-bottom:0;}
  112. .wf form li div.left {
  113. 	display:inline;
  114. 	float:left;
  115. 	width:47%;
  116. }
  117. .wf form li div.right {
  118. 	display:inline;
  119. 	float:right;
  120. 	width:47%;
  121. }
  122. .wf .clear {
  123. 	clear:both !important;
  124. }
  125. /* ----- INFO ----- */
  126. .wf .info {
  127. 	display:inline-block; 
  128. 	clear:both;
  129. 	border-bottom:1px dotted #ccc;
  130. 	margin:0 0 1em 0;
  131. }
  132. .wf .info[class] {display:block;}
  133. .wf .info h2 {
  134. 	font-weight:normal;
  135. 	font-size:160%;
  136. 	margin:0 0 3px 0;
  137. 	clear:left;
  138. }
  139. .wf .info p {
  140. 	font-size:95%;
  141. 	line-height:135%;
  142. 	margin:0 0 12px 0;
  143. }
  144. /* ----- SECTIONS ----- */
  145. .wf form hr {display:none;}
  146. .wf form li.section {
  147. 	border-top:1px dotted #ccc;
  148. 	margin-top:9px;
  149. 	padding-top:13px;
  150. 	padding-bottom:0px;
  151. 	padding-left:9px;
  152. 	width:97% !important;
  153. }
  154. .wf form ul li.first {
  155. 	border-top:none !important;
  156. 	margin-top:0px !important;
  157. 	padding-top:0px !important;
  158. }
  159. .wf form .section h3 {
  160. 	font-weight:normal;
  161. 	font-size:110%;
  162. 	line-height:135%;
  163. 	margin:0 0 2px 0;
  164. }
  165. .wf form .section p {
  166. 	font-size:85%;
  167. 	margin:0 0 10px 0;
  168. }
  169. /* ----- FIELDS AND LABELS ----- */
  170. .wf label.desc {
  171. 	line-height:150%;
  172. 	padding:0 0 1px 0;
  173. 	border:none;
  174. 	color:#222;
  175. 	display:block;
  176. 	font-size:95%;
  177. 	font-weight:bold;
  178. }
  179. .wf label.choice {
  180. 	font-size:100%;
  181. 	display:block;
  182. 	line-height:1.4em;
  183. 	margin:-1.55em 0 0 25px;
  184. 	padding:4px 0 5px 0;
  185. 	color:#222;
  186. 	width:90%;
  187. }
  188. .wf form li div label, .wf form li span label {
  189. 	margin:0;
  190. 	padding-top:3px;
  191. 	clear:both;
  192. 	font-size:9px;
  193. 	line-height:9px;
  194. 	color:#444;
  195. 	display:block;
  196. }
  197. .wf input.text, .wf input.file, .wf textarea.textarea, .wf select.select {
  198. 	margin:0;
  199. 	font-size:100%;
  200. 	color:#333;
  201. }
  202. .wf input.text, .wf textarea.textarea, .wf .firefox select.select {
  203. 	border-top:1px solid #7c7c7c;
  204. 	border-left:1px solid #c3c3c3;
  205. 	border-right:1px solid #c3c3c3;
  206. 	border-bottom:1px solid #ddd;
  207. 	background:#fff3e8;
  208. 	/*url(/images/fieldbg.gif) repeat-x top*/;
  209. }
  210. .wf input.text, .wf input.file {
  211. 	padding:2px 0 2px 0;
  212. }
  213. .wf input.currency {text-align:right;}
  214. .wf input.checkbox, .wf input.radio {
  215. 	display:block;
  216. 	line-height:1.4em;
  217. 	margin:6px 0 0 3px;
  218. 	width:13px;
  219. 	height:13px;
  220. }
  221. .wf textarea.textarea {font-family:Verdana,Geneva,Helvetica,sans-serif;}
  222. .wf select.select {font-family:Verdana,Geneva,Helvetica,sans-serif;
  223. 	margin:1px 0;
  224. 	padding:1px 0 0 0;
  225. }
  226. .wf select.select[class] {
  227. 	margin:0;
  228. 	padding:1px 0 1px 0;
  229. }
  230. *:first-child+html .wf select.select[class] {
  231. 	margin:1px 0;
  232. }
  233. .wf .safari select.select {
  234. 	margin-bottom:1px;
  235. 	font-size:120% !important;
  236. }
  237. .wf span.symbol {
  238. 	font-size:115%;
  239. 	line-height:130%;
  240. }
  241. .wf form li .datepicker {
  242. 	float:left;
  243. 	margin:.1em 5px 0 0;
  244. 	padding:0;
  245. 	width: 16px;
  246. 	height: 16px;
  247. 	cursor:pointer !important;
  248. }
  249. /* ----- BUTTONS ----- */
  250. .wf input.btTxt {
  251. 	padding:0 7px;
  252. 	width:auto;
  253. 	overflow:visible;
  254. }
  255. .wf .buttons {
  256. 	clear:both;
  257. 	margin-top:10px;
  258. }
  259. .wf .buttons input {
  260. 	font-size:120%;
  261. 	margin-right: 5px;
  262. }
  263. /* ----- TEXT DIRECTION ----- */
  264. .wf .rtl .info h2,
  265. .wf .rtl .info p,
  266. .wf .rtl label.desc,
  267. .wf .rtl label.choice,
  268. .wf .rtl div label,
  269. .wf .rtl span label,
  270. .wf .rtl input.text,
  271. .wf .rtl textarea.textarea,
  272. .wf .rtl select.select,
  273. .wf .rtl p.instruct,
  274. .wf .rtl .section h3,
  275. .wf .rtl .section p,
  276. .wf .rtl input.btTxt {direction:rtl;}
  277. /* ----- SIZES ----- */
  278. .wf .third {
  279. 	width:32% !important;
  280. }
  281. .wf .half {
  282. 	width:48% !important;
  283. }
  284. .wf .full {
  285. 	width:100% !important;
  286. }
  287. .wf input.small, .wf select.small {width:25%;}
  288. .wf input.medium, .wf select.medium {width:50%;}
  289. .wf input.large, .wf select.large, .wf textarea.textarea {width:100%;}
  290. .wf textarea.small {height:5.5em;}
  291. .wf textarea.medium {height:10em;}
  292. .wf textarea.large {height:20em;}
  293. /* ----- ERRORS ----- */
  294. .wf #wf_errorLi {
  295. 	width:99%;
  296. 	margin:0 auto;
  297. 	background:#933000;
  298. 	border:1px dotted red;
  299. 	margin-bottom:1em;
  300. 	text-align:center;
  301. 	padding-top:4px;
  302. 	padding-left:0px;
  303. 	padding-right:0px;
  304. }
  305. .wf #wf_errorMsgLbl {
  306. 	margin:7px 0 5px 0;
  307. 	padding:0;
  308. 	font-size:125%;
  309. 	color:#DF0000;
  310. }
  311. .wf #wf_errorMsg {
  312. 	margin:0 0 .8em 0;
  313. 	color:#000;
  314. 	font-size:100%;
  315. }
  316. .wf #wf_errorMsg strong {
  317. 	background-color: #FFDFDF;
  318. 	padding:2px 3px;
  319. 	color:red;
  320. }
  321. .wf form li.error {
  322. 	display:block !important;
  323. 	background-color: #FFDFDF !important;
  324. 	margin:3px 0;
  325. }
  326. .wf form li.error label {
  327. 	color:#DF0000 !important;
  328. }
  329. .wf form p.error {
  330. 	color:red;
  331. 	font-weight:bold;
  332. 	font-size:10px;
  333. 	margin:-2px 0 5px 0;
  334. 	clear:both;
  335. }
  336. .wf .leftLabel p.error, .wf .rightLabel p.error {
  337. 	margin-left:30%;
  338. 	padding-left:15px;
  339. }
  340. .wf .noI .leftLabel p.error, .wf .noI .rightLabel p.error {
  341. 	margin-left:35%;
  342. 	padding-left:15px;
  343. }
  344. /* ----- REQUIRED ----- */
  345. .wf form .req {
  346. 	float:none;
  347. 	color:red !important;
  348. 	font-weight:bold;
  349. 	margin:0;
  350. }
  351. /* ----- INSTRUCTIONS ----- */
  352. .wf form li.focused {
  353. 	background: #351008;
  354. 	color: #fff3e8;}
  355. .wf form .instruct {
  356. 	position:absolute;
  357. 	top:0;
  358. 	left:100%;
  359. 	z-index:1000;
  360. 	width:42%;
  361. 	margin:0 0 0 8px;
  362. 	padding:8px 10px 9px 10px;
  363. 	border:1px solid #e6e6e6;
  364. 	background:#f5f5f5;
  365. 	line-height:130%;
  366. 	font-size:80%;
  367. 	color:#444;
  368. 	visibility:hidden;
  369. }
  370. .wf form .instruct small {font-size:105%;}
  371. .wf form li.focused .instruct, .wf form li:hover .instruct {visibility:visible;}
  372. /* ----- ALT INSTRUCTIONS ----- */
  373. .wf li.altInstruct .instruct,
  374. .wf li.leftHalf .instruct,
  375. .wf li.rightHalf .instruct {
  376. 	visibility:visible;
  377. 	position:static;
  378. 	margin:-2px 0 0 0;
  379. 	padding:0 0 7px 0;
  380. 	background:none;
  381. 	border:none;
  382. 	width:100%;
  383. 	font-size:9px;
  384. 	clear:left;
  385. }
  386. /* ----- LABEL LAYOUT ----- */
  387. .wf .leftLabel li,
  388. .wf .rightLabel li,
  389. .wf li.leftLabel,
  390. .wf li.rightLabel {
  391. 	width:97% !important;
  392. 	padding-top:9px;
  393. }
  394. .wf .leftLabel .small,
  395. .wf .rightLabel .small {width:17%;}
  396. .wf .leftLabel .medium,
  397. .wf .rightLabel .medium {width:35%;}
  398. .wf .leftLabel .large,
  399. .wf .leftLabel textarea.textarea,
  400. .wf .rightLabel .large,
  401. .wf .rightLabel textarea.textarea,
  402. .wf .leftLabel .address,
  403. .wf .rightLabel .address {width:64%;}
  404. * html .wf .leftLabel .small,
  405. * html .wf .rightLabel .small {width:23%;}
  406. * html .wf .leftLabel .medium,
  407. * html .wf .rightLabel .medium {width:55%;}
  408. * html .wf .leftLabel .large,
  409. * html .wf .leftLabel textarea.textarea,
  410. * html .wf .rightLabel .large,
  411. * html .wf .rightLabel textarea.textarea {width:97%;}
  412. .wf .leftLabel label.desc,
  413. .wf .rightLabel label.desc {
  414. 	float:left;
  415. 	width:30%;
  416. 	margin:2px 15px 0 0;
  417. }
  418. .wf .rightLabel label.desc {text-align:right;}
  419. .wf .leftLabel .address,
  420. .wf .rightLabel .address {float:left;}
  421. .wf .leftLabel p.instruct,
  422. .wf .rightLabel p.instruct {
  423. 	width:27%;
  424. 	margin-left:5px;
  425. }
  426. .wf .leftLabel .altInstruct .instruct,
  427. .wf .rightLabel .altInstruct .instruct {
  428. 	margin-left:30% !important;
  429. 	padding-left:15px;
  430. 	width:65%;
  431. }
  432. .wf .leftLabel .buttons,
  433. .wf .rightLabel .buttons {margin-left:15px;}
  434. .wf .leftLabel .buttons input,
  435. .wf .rightLabel .buttons input {margin-left:30%;}
  436. /* ----- NO INSTRUCTIONS ----- */
  437. .wf .noI .instruct {
  438. 	display:none !important;
  439. }
  440. .wf .noI form li,
  441. .wf .noI form li.buttons {
  442. 	width:97% !important;
  443. }
  444. .wf .noI form li.section {
  445. 	padding-left:9px !important;
  446. }
  447. /* ----- NO INSTRUCTIONS LABEL LAYOUT ----- */
  448. .wf .noI .leftLabel .large,
  449. .wf .noI .leftLabel textarea.textarea,
  450. .wf .noI .rightLabel .large,
  451. .wf .noI .rightLabel textarea.textarea,
  452. .wf .noI .leftLabel .address,
  453. .wf .noI .rightLabel .address {width:60%;}
  454. * html .wf .noI .leftLabel .small,
  455. * html .wf .noI .rightLabel .small {width:23%;}
  456. * html .wf .noI .leftLabel .medium,
  457. * html .wf .noI .rightLabel .medium {width:55%;}
  458. * html .wf .noI .leftLabel .large,
  459. * html .wf .noI .leftLabel textarea.textarea,
  460. * html .wf .noI .rightLabel .large,
  461. * html .wf .noI .rightLabel textarea.textarea {width:97%;}
  462. .wf .noI .leftLabel label.desc,
  463. .wf .noI .rightLabel label.desc {width:35%;}
  464. .wf .noI .leftLabel .buttons input,
  465. .wf .noI .rightLabel .buttons input {margin-left:35%;}
  466. /* ----- FIELD FLOATING ----- */
  467. .wf form li.leftHalf,
  468. .wf form li.rightHalf {
  469. 	width:46% !important;
  470. }
  471. .wf li.leftHalf {
  472. 	clear:left;
  473. 	float:left;
  474. }
  475. .wf li.rightHalf {
  476. 	clear:none;
  477. 	float:right;
  478. }
  479. .wf li.leftHalf .medium,
  480. .wf li.rightHalf .medium,
  481. .wf li.leftHalf .small,
  482. .wf li.rightHalf .small {width:100%;}

  1. $(function() {
  2. 	$('.wf input, .wf textarea, .wf select').each(function() {
  3. 		if (this.type != 'submit' && this.type != 'button' && this.type != 'hidden') {
  4. 			$(this).focus(function() {
  5. 				var parent = $(this).parent();
  6. 				while (!$(parent).is('li')) {
  7. 					parent = $(parent).parent();
  8. 				}
  9. 				$(parent).addClass('focused');
  10. 				$(this).addClass('focused');
  11. 			});
  12. 			$(this).blur(function() {
  13. 				var parent = $(this).parent();
  14. 				while(!$(parent).is('li')) {
  15. 					parent = $(parent).parent();
  16. 				}
  17. 				$(parent).removeClass('focused');
  18. 				$(this).removeClass('focused');
  19. 			});
  20. 		};
  21. 	});
  22. });

Posted in Web Development
You can trackback from your own site.