Wufoo Form throwing up error on entry 'Could not execute nonquery' - executenonquery

Embedded a Wufoo form on my site using the downloaded HTML & stylesheets from the form on the Wufoo site.
However after embedding I continually get the error 'Could not execute nonquery' on correct entry. It takes me to the Wufoo form on the Wufoo site and then I am able to enter the form without error.
Anyone know what's going on?
#font-face{font-family:'Pictos';src:url("/fonts/pictos.eot?iefix");src:local("Pictos"),url("/fonts/pictos.woff") format("woff"),url("/fonts/pictos.ttf") format("truetype"),url("/fonts/pictos.svg#webfontIyfZbseF") format("svg");font-weight:normal;font-style:normal}.pictos{font-family:"Pictos"}.p-a:before{font-family:"Pictos";content:"a "}.p-b:before{font-family:"Pictos";content:"b "}.p-c:before{font-family:"Pictos";content:"c "}.p-d:before{font-family:"Pictos";content:"d "}.p-e:before{font-family:"Pictos";content:"e "}.p-f:before{font-family:"Pictos";content:"f "}.p-g:before{font-family:"Pictos";content:"g "}.p-h:before{font-family:"Pictos";content:"h "}.p-i:before{font-family:"Pictos";content:"i "}.p-j:before{font-family:"Pictos";content:"j "}.p-k:before{font-family:"Pictos";content:"k "}.p-l:before{font-family:"Pictos";content:"l "}.p-m:before{font-family:"Pictos";content:"m "}.p-n:before{font-family:"Pictos";content:"n "}.p-o:before{font-family:"Pictos";content:"o "}.p-p:before{font-family:"Pictos";content:"p "}.p-q:before{font-family:"Pictos";content:"q "}.p-r:before{font-family:"Pictos";content:"r "}.p-s:before{font-family:"Pictos";content:"s "}.p-t:before{font-family:"Pictos";content:"t "}.p-u:before{font-family:"Pictos";content:"u "}.p-v:before{font-family:"Pictos";content:"v "}.p-w:before{font-family:"Pictos";content:"w "}.p-x:before{font-family:"Pictos";content:"x "}.p-y:before{font-family:"Pictos";content:"y "}.p-z:before{font-family:"Pictos";content:"z "}.p-A:before{font-family:"Pictos";content:"A "}.p-B:before{font-family:"Pictos";content:"B "}.p-C:before{font-family:"Pictos";content:"C "}.p-D:before{font-family:"Pictos";content:"D "}.p-E:before{font-family:"Pictos";content:"E "}.p-F:before{font-family:"Pictos";content:"F "}.p-G:before{font-family:"Pictos";content:"G "}.p-H:before{font-family:"Pictos";content:"H "}.p-I:before{font-family:"Pictos";content:"I "}.p-J:before{font-family:"Pictos";content:"J "}.p-K:before{font-family:"Pictos";content:"K "}.p-L:before{font-family:"Pictos";content:"L "}.p-M:before{font-family:"Pictos";content:"M "}.p-N:before{font-family:"Pictos";content:"N "}.p-O:before{font-family:"Pictos";content:"O "}.p-P:before{font-family:"Pictos";content:"P "}.p-Q:before{font-family:"Pictos";content:"Q "}.p-R:before{font-family:"Pictos";content:"R "}.p-S:before,.rating span:before,.rating:hover span:hover ~ span:before{font-family:"Pictos";content:"S "}.p-T:before{font-family:"Pictos";content:"T "}.p-U:before{font-family:"Pictos";content:"U "}.p-V:before{font-family:"Pictos";content:"V "}.p-W:before{font-family:"Pictos";content:"W "}.p-X:before{font-family:"Pictos";content:"X "}.p-Y:before{font-family:"Pictos";content:"Y "}.p-Z:before{font-family:"Pictos";content:"Z "}.wufoo{font-family:"Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;letter-spacing:.01em}.wufoo li{width:64%}.info{display:inline-block;clear:both;margin:0 0 5px 0;padding:0 1% 1.1em 1%;border-bottom:1px dotted #ccc}.info[class]{display:block}.hideHeader .info,#payment.hideHeader li.first{display:none}.info h2{font-weight:normal;font-size:160%;margin:0 0 5px 0;clear:left}.info div{font-size:95%;line-height:135%;color:#555}form ul{margin:0;padding:0;list-style-type:none}* html form ul{width:99%;zoom:1}form li{margin:0;padding:6px 1% 9px 1%;clear:both;background-color:transparent;position:relative;-webkit-transition:background-color 350ms ease-out;-moz-transition:background-color 350ms ease-out;-o-transition:background-color 350ms ease-out;transition:background-color 350ms ease-out}form ul:after,form li:after,form li div:after{content:".";display:block;height:0;clear:both;visibility:hidden}* html form li{height:1%;margin-bottom:-3px}*+html form li{height:1%;margin-bottom:-3px}* html form li div{display:inline-block}*+html form ul,*+html form li div{display:inline-block}form li div{margin:0;padding:0;color:#444}form li span{margin:0 .3em 0 0;padding:0;float:left;color:#444}form li div span{margin:0;display:block;width:100%;float:left}li.twoColumns div span{width:48%;margin:0 5px 0 0}li.threeColumns div span{width:30%;margin:0 5px 0 0}li.notStacked div span{width:auto;margin:0 7px 0 0}form li.complex{padding-bottom:0}form li.complex div span{width:auto;margin:0 .3em 0 0;padding-bottom:12px}form li.complex div span.full{margin:0}form li.complex div span.left,form li.complex div span.right{margin:0;width:48%}form li.complex div span.full input,form li.complex div span.full select,form li.complex div span.left input,form li.complex div span.right input,form li.complex div span.left select,form li.complex div span.right select{width:100%}.left{float:left}.right{float:right}.clear{clear:both !important}label span,.section span,p span,.likert span{display:inline !important;float:none !important}form li div label,form li span label{margin:0;padding-top:3px;clear:both;font-size:85%;line-height:160%;color:#444;display:block}fieldset{display:block;border:none;margin:0;padding:0}label.desc,legend.desc{font-size: 125%;font-weight:bold;color:#222;line-height:150%;margin:0;padding:0 0 3px 0;border:none;display:block;white-space:normal;width:100%}label.choice{display:block;cursor:pointer;font-size:100%;line-height:150%;margin:-17px 0 0 23px;padding:0 0 5px 0;color:#222;width:88%}#public input[disabled]+label.choice{cursor:default}#public input[disabled]+label.choice span{color:#777}.safari label.choice{margin-top:-16px}form.rightLabel .desc{padding-top:2px}span.symbol{font-size:120%;line-height:135%}form li .datepicker{float:left;margin:.19em 5px 0 0;padding:0;width:16px;height:16px;cursor:pointer !important}li .choice__qty{font-size:0.9em;font-style:italic;color:#777}li.hideQty .choice__qty,li.hideQuantity .choice__qty{display:none !important}form span.req{display:inline;float:none;color:red !important;font-weight:bold;margin:0;padding:0}form li div label var{font-weight:bold;font-style:normal}form li div label .currently{display:none}input.text,input.search,input.file,textarea.textarea,select.select{font-family:"Lucida Grande", Tahoma, Arial, sans-serif;font-size:100%;color:#333;margin:0;padding:2px 0}input.text,input.search,textarea.textarea{border-top: 1px dotted #ddd;border-left: 1px dotted #ddd;border-right: 1px dotted #ddd;border-bottom: 1px dotted #ddd;border-radius: 40px;/* border: 1px; */}input.nospin::-webkit-inner-spin-button,input.nospin::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}select.select{padding:1px 0 0 0}input.search{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding-left:6px}input.checkbox,input.radio{display:block;margin:4px 0 0 0;padding:0;width:13px;height: 13px;}input.other{margin:0 0 8px 25px}.safari select.select{font-size:120% !important;margin:0 0 1px 0}* html select.select{margin:1px 0}*+html select.select{margin:1px 0}.center,form li span.center input.text,form li span.center label,form li.name span label,form li.date input.text,form li.date span label,form li.phone input.text,form li.phone span label,form li.time input.text,form li.time span label{text-align:center}form li.time select.select{margin-left:5px}form li.price .right{text-align:right}.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{width:100%}.msie[class] select.ieSelectFix{width:auto}.msie[class] select.ieSelectFix.small{min-width:25%}.msie[class] select.ieSelectFix.medium{min-width:50%}.msie[class] select.ieSelectFix.large{width:100%}textarea.textarea{width:293px;min-width:100%;max-width:100%}textarea.small{height:5.5em}textarea.medium{height:10em}textarea.large{height:20em}li.file a{color:#222;text-decoration:none}li.file span{display:inline;float:none}li.file img{display:block;float:left;margin:0 0 0 -10px;padding:5px 5px 7px 5px}li.file .file-size,li.file .file-type{color:#666;font-size:85%;text-transform:uppercase}li.file .file-name{display:block;padding:14px 0 0 0;color:blue;text-decoration:underline}li.file .file-delete{color:red !important;font-size:85%;text-decoration:underline}li.file a:hover .file-name{color:green !important}li.file a:hover .file-name{color:green !important}form li.likert{margin:0;padding:6px 1% 5px 1%;width:auto !important;clear:both !important;float:none !important}.likert table{margin:0 0 .9em 0;background:#fff;width:100%;border:1px solid #dedede;border-bottom:none}.likert caption{text-align:left;color:#222;font-size:95%;line-height:135%;padding:5px 0 .5em 0}.likert input{padding:0;margin:2px 0}.likert tbody td label{font-size:85%;display:block;color:#565656}.likert thead td,.likert thead th{background-color:#e6e6e6}.likert td{border-left:1px solid #ccc;text-align:center;padding:4px 6px}.likert thead td{font-size:85%;padding:10px 6px}.likert th,.likert td{border-bottom:1px solid #dedede}.likert tbody th{padding:8px 8px;text-align:left}.likert tbody th label{color:#222;font-size:95%;font-weight:bold}.likert tbody tr.alt td,.likert tbody tr.alt th{background-color:#f5f5f5}.likert tbody tr:hover td,.likert tbody tr:hover th{background-color:#FFFFCF}.col1 td{width:30%}.col2 td{width:25%}.col3 td{width:18%}.col4 td{width:14.5%}.col5 td{width:12%}.col6 td,.col7 td{width:10%}.col8 td,.col9 td,.col10 td{width:6.5%}.col11{width:6%}.hideNumbers tbody td label{display:none}form li.buttons{width:auto !important;position:relative;clear:both;padding:10px 1% 10px 1%}form li.buttons input{font-size: 24px;margin-right:5px;font-family: lato;font-weight: 800;background-color: #3E82F8;border: none;color: white;border-radius: 50px;}input.btTxt{padding:0 7px;width:auto;overflow:visible}.safari input.btTxt{font-size:120%}.buttons .marker{position:absolute;top:0;right:0;padding:15px 10px 0 0;color:#000;width:auto}button.link{display:inline-block;border:none;background:none;color:blue;text-decoration:underline;cursor:pointer;padding:0;font-size:100%}button.link:hover{color:green}.leftLabel li,.rightLabel li{width:74% !important;padding-top:9px}.leftLabel .desc,.rightLabel .desc{float:left;width:31%;margin:0 15px 0 0}.rightLabel .desc{text-align:right}.leftLabel li div,.rightLabel li div{float:left;width:65%}* html .leftLabel li fieldset div,* html .rightLabel li fieldset div{float:right}*+html .leftLabel li fieldset div,*+html .rightLabel li fieldset div{float:right}.leftLabel .buttons,.rightLabel .buttons{padding-left:23%}.leftLabel .buttons div,.rightLabel .buttons div{float:none;margin:0 0 0 20px}.leftLabel p.instruct,.rightLabel p.instruct{width:28%;margin-left:5px}.leftLabel .altInstruct .instruct,.rightLabel .altInstruct .instruct{margin-left:31% !important;padding-left:15px;width:65%}.noI form li,.altInstruct form li{width:auto !important}.noI .leftLabel .buttons,.noI .rightLabel .buttons{padding-left:31%}.noI .leftLabel .buttons div,.noI .rightLabel .buttons div{margin:0 0 0 17px}form li.leftHalf,form li.rightHalf{width:47% !important}form li.leftThird,form li.middleThird,form li.rightThird{width:30% !important}form li.leftFourth,form li.middleFourth,form li.rightFourth{width:23% !important;_width:22% !important}form li.leftFifth,form li.middleFifth,form li.rightFifth{width:18% !important;_width:17% !important}form li.middleThird{clear:none !important;float:left;margin-left:2% !important}form li.leftFourth,form li.middleFourth,form li.leftFifth,form li.middleFifth{clear:none !important;float:left}form li.rightHalf,form li.rightThird,form li.rightFourth,form li.rightFifth{clear:none !important;float:right}li.leftHalf .small,li.rightHalf .small,li.leftHalf .medium,li.rightHalf .medium,li.leftThird .small,li.middleThird .small,li.rightThird .small,li.leftThird .medium,li.middleThird .medium,li.rightThird .medium,li.leftFourth .medium,li.middleFourth .medium,li.rightFourth .medium,li.leftFourth .small,li.middleFourth .small,li.rightFourth .small,li.leftFifth .medium,li.middleFifth .medium,li.rightFifth .medium,li.leftFifth .small,li.middleFifth .small,li.rightFifth .small{width:100% !important}form li.leftHalf,form li.leftThird,form li.leftFourth,form li.leftFifth{clear:left !important;float:left}* html form li.middleFourth{margin-left:1% !important}* html form li.middleFifth{margin-left:1% !important}form li.focused{background-color: #DBEFF9;}form .instruct{position:absolute;top:0;left:0;z-index:1000;width:45%;margin:0 0 0 8px;padding:8px 10px 10px 10px;border:1px solid #e6e6e6;background:#f5f5f5;visibility:hidden;opacity:0;font-size:105%;-webkit-transition:opacity 350ms ease-out;-moz-transition:opacity 350ms ease-out;-o-transition:opacity 350ms ease-out;transition:opacity 350ms ease-out}form .instruct small{line-height:120%;font-size:80%;color:#444}form li.focused .instruct,form li:hover .instruct{left:100%;visibility:visible;opacity:1}.altInstruct .instruct,li.leftHalf .instruct,li.rightHalf .instruct,li.leftThird .instruct,li.middleThird .instruct,li.rightThird .instruct,li.leftFourth .instruct,li.middleFourth .instruct,li.rightFourth .instruct,li.leftFifth .instruct,li.middleFifth .instruct,li.rightFifth .instruct,.iphone .instruct{visibility:visible;position:static;margin:0;padding:6px 0 0 0;width:100%;clear:left;background:none !important;border:none !important;font-style:italic;opacity:1}.altInstruct p.complex,li.leftHalf p.complex,li.rightHalf p.complex,li.leftThird p.complex,li.middleThird p.complex,li.rightThird p.complex,.iphone p.complex{padding:0 0 9px 0}.hideSeconds .seconds,.hideAMPM .ampm,.hideAddr2 .addr2,.hideSecondary #previousPageButton,.hideCents .radix,.hideCents .cents,.hideState .state{display:none}form li.section{clear:both;margin:0;padding:7px 0 0 0;width:auto !important;position:static}form li.section h3{font-weight:normal;font-size:110%;line-height:135%;margin:0 0 3px 0;width:auto;padding:12px 1% 0 1%;border-top:1px dotted #ccc}form li.first{padding:0}form li.first h3{padding:8px 1% 0 1%;border-top:none !important}form li.section div{display:block;width:auto;float:none;font-size:85%;line-height:160%;margin:0 0 1em 0;padding:0 1% 0 1%}form li.section.scrollText{border:1px solid #dedede;height:150px;overflow:auto;margin-bottom:10px;padding:10px;-webkit-box-shadow:rgba(0,0,0,0.15) 0 0 3px;-moz-box-shadow:rgba(0,0,0,0.15) 0 0 3px;-o-box-shadow:rgba(0,0,0,0.15) 0 0 3px;box-shadow:rgba(0,0,0,0.15) 0 0 3px}form li.section.scrollText h3{border:none;padding-top:8px}form li.captcha{width:auto !important;clear:both;border-top:1px dotted #ccc;margin-top:5px;padding:1.1em 1% 9px 1%;width:auto !important;position:static}form li.captcha label.desc{width:auto !important;margin-bottom:4px;float:none}*+html #recaptcha_area,*+html #recaptcha_table{min-width:450px !important}* html #recaptcha_area,* html #recaptcha_table{width:450px !important}#recaptcha_widget_div table{background:#fff}form li.captcha .noscript iframe{border:none;overflow:hidden;margin:0;padding:0}form li.captcha .noscript label.desc{display:block !important}form li.captcha .noscript textarea{margin-left:12px}iframe[src="about:blank"]{display:none}form li.paging-context{clear:both;border-bottom:1px dotted #ccc;margin:0 0 7px 0;padding:5px 1% 10px 1%;width:auto !important;position:static}.paging-context table{width:100%}.pgStyle1 td{text-align:left;vertical-align:middle}.pgStyle1 td.c{width:22px}.pgStyle1 td.t{padding:0 1%}.pgStyle1 var{display:block;float:left;background:none;border:1px solid #CCC;color:#000;width:20px;height:20px;line-height:19px;text-align:center;font-size:85%;font-style:normal;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:rgba(0,0,0,0.15) 0 1px 2px;-moz-box-shadow:rgba(0,0,0,0.15) 0 1px 2px;-o-box-shadow:rgba(0,0,0,0.15) 0 1px 2px;box-shadow:rgba(0,0,0,0.15) 0 1px 2px}.pgStyle1 .done var{background:#ccc}.pgStyle1 .selected var{background:#FFF7C0;color:#000;border:1px solid #e6dead;font-weight:bold}.pgStyle1 b{font-size:85%;font-weight:normal;color:#000}.pgStyle1 .selected b{font-weight:bold}.circle6 td,.circle7 td{vertical-align:top;text-align:center}.nopagelabel td.t{display:none}.nopagelabel .pgStyle1 var,.circle6 var,.circle7 var{width:24px;height:24px;line-height:24px;font-size:90%;margin:0 auto 7px auto;float:none;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px}.nopagelabel .pgStyle1 var{margin-bottom:0}.circle6 b,.circle7 b{padding:0}.circle2 td{width:50%}.circle3 td{width:33%}.circle4 td{width:25%}.circle5 td{width:20%}.circle6 td{width:16.6%}.circle7 td{width:14.2%}.pgStyle2 td{vertical-align:middle;height:25px;padding:2px;border:1px solid #CCC;position:relative;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;-webkit-box-shadow:rgba(0,0,0,0.1) 1px 1px 1px;-moz-box-shadow:rgba(0,0,0,0.1) 1px 1px 1px;-o-box-shadow:rgba(0,0,0,0.1) 1px 1px 1px;box-shadow:rgba(0,0,0,0.1) 1px 1px 1px}.pgStyle2 var{display:block;height:26px;float:left;background:#FFF7C0;color:#000;font-style:normal;text-align:right;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;-webkit-box-shadow:rgba(0,0,0,0.15) 1px 0 0;-moz-box-shadow:rgba(0,0,0,0.15) 1px 0 0;-o-box-shadow:rgba(0,0,0,0.15) 1px 0 0;box-shadow:rgba(0,0,0,0.15) 1px 0 0}.pgStyle2 var b{display:block;float:right;font-size:100%;padding:3px 10px 3px 3px;line-height:19px}.pgStyle2 em{font-size:85%;font-style:normal;display:inline-block;margin:0 0 0 9px;padding:4px 0;line-height:18px}.pgStyle2 var em{padding:4px 5px 3px 0}.page1 .pgStyle2 var{padding-left:7px;text-align:left;background:none;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;box-shadow:none}.page1 .pgStyle2 b{float:none;padding-right:0}.hideMarkers .marker,.nopagelabel .pgStyle1 b,.nopagelabel .pgStyle2 em{display:none !important}#errorLi,.error-container{width:99%;margin:15px auto 15px auto;background:#fff !important;border:1px solid red;text-align:center;padding:1em 0 1em 0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}#errorMsgLbl{margin:0 0 5px 0;padding:0;font-size:125%;color:#DF0000 !important}#errorMsg{margin:0 0 2px 0;color:#000 !important;font-size:100%}#errorMsg b{padding:2px 8px;background-color:#FFDFDF !important;color:red !important;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}form li.error{display:block !important;background-color:#FFDFDF !important;margin-bottom:3px !important}form li label.error,form li input.error{color:#DF0000 !important;font-weight:bold !important}form li input.error{background:#fff !important;border:2px solid #DF0000 !important}form li.error label,form li.error span.symbol{color:#000 !important}form li.error .desc{color:#DF0000 !important}form p.error{display:none;margin:0 !important;padding:7px 0 0 0 !important;line-height:10px !important;font-weight:bold;font-size:11px;color:#DF0000 !important;clear:both}form li.error p.error{display:block}form li.complex p.error{padding:0 0 9px 0 !important}.rtl h1,.rtl form *{direction:rtl;text-align:right}.rtl li span{float:right}.rtl .right{float:left}.rtl #logo a{background-position:right top}.rtl label.choice{margin:-17px 23px 0 0}.rtl .leftLabel .desc,.rtl .rightLabel .desc{float:right;margin:0 0 0 15px}.rtl .leftLabel li div,.rtl .rightLabel li div{float:right}.rtl .leftLabel .desc{text-align:left}.rtl li.focused .instruct,.rtl li:hover .instruct{left:auto;right:100%}.rtl .leftLabel p.instruct,.rtl .rightLabel p.instruct{margin-right:5px}.rtl .leftLabel .altInstruct .instruct,.rtl .rightLabel .altInstruct .instruct{margin-right:31% !important;padding-right:15px}.rtl .leftLabel .buttons,.rtl .rightLabel .buttons{padding-right:23%}.rtl .leftLabel .buttons div,.rtl .rightLabel .buttons div{float:none;margin:0 20px 0 0}.noI .rtl .leftLabel .buttons,.noI .rtl .rightLabel .buttons{padding-right:31%}.noI .rtl .leftLabel .buttons div,.noI .rtl .rightLabel .buttons div{margin:0 17px 0 0}.rtl .likert td label{text-align:center}.rtl .likert caption,.rtl .likert tbody th{text-align:right}.rtl .likert td{text-align:center;border-left:none;border-right:1px solid #ccc}.rtl .pgStyle1 var{text-align:center}.rtl .pgStyle1 td{text-align:right}.rtl .pgStyle2 var{float:right}.rtl .pgStyle2 var b{float:left;padding:3px 3px 3px 10px}.rtl .pgStyle2 em{margin:0 9px 0 0}.rtl .pgStyle2 var em{padding:4px 0 3px 5px}.rtl .page1 .pgStyle2 var{padding-right:7px}.rtl .page1 .pgStyle2 b{padding-left:0}.rtl .buttons .marker{right:auto;left:0;padding:15px 0 0 10px}.rtl #errorLi *{text-align:center}.rating span{cursor:pointer}.rating span:focus{outline:0}.rating span,.rating:hover span:hover ~ span{font-size:20px;line-height:1em;width:.9em;height:1em;padding-right:.1em;color:#c7c7c7;text-shadow:0 0 1px #444}.rating .clicked{color:#FFD954}.rating>span:hover,.rating .clicked:hover,.rating:hover span{color:#ffe487;text-shadow:0 0 1px #ff0000;cursor:pointer}.rating:hover span{_color:#c7c7c7}.msie6 .rating span,.msie7 .rating span{color:#c7c7c7;display:inline-block;*display:inline;zoom:1;height:30px;width:30px;font-family:"Pictos";font-size:20px}.msie6 .rating span:hover,.msie6 .rating span.clicked,.msie7 .rating span:hover,.msie7 .rating span.clicked{color:#ffe487}#media print{.rating span{color:#c7c7c7}}
/*# sourceMappingURL=form.css.map */
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">join in</h2>
<h3 class="section-subheading text-muted">Sign-Up to the team.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<title>
Untitled Form
</title>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="generator" content="Wufoo">
<meta name="robots" content="index, follow">
<!-- CSS -->
<link href="css/structure.css" rel="stylesheet">
<link href="css/form.css" rel="stylesheet">
<!-- JavaScript -->
<script src="scripts/wufoo.js"></script>
<!--[if lt IE 10]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<div id="container" class="ltr">
<form id="form2" name="form2" class="wufoo topLabel page" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate="" action="https://afphicklin.wufoo.com/forms/mt7ex409oxdwx/#public">
<ul>
<li id="foli3" class="notranslate focused">
<label class="desc" id="title3" for="Field3">
Name
<span id="req_3" class="req">*</span>
</label>
<span>
<input id="Field3" name="Field3" type="text" class="field text fn" value="" size="8" tabindex="1" required="">
<label for="Field3">First</label>
</span>
<span>
<input id="Field4" name="Field4" type="text" class="field text ln" value="" size="14" tabindex="2" required="">
<label for="Field4">Last</label>
</span>
</li>
<li id="foli2" class="notranslate ">
<label class="desc" id="title2" for="Field2">
Email
<span id="req_2" class="req">*</span>
</label>
<div>
<input id="Field2" name="Field2" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="3" required="">
</div>
</li><li id="foli1" class="notranslate ">
<fieldset class="">
<!--[if !IE | (gte IE 8)]-->
<legend id="title1" class="desc">
Country of Residence
<span id="req_1" class="req">*</span>
</legend>
<!--[endif]-->
<!--[if lt IE 8]>
<label id="title1" class="desc">
Country of Residence
<span id="req_1" class="req">*</span>
</label>
<![endif]-->
<div>
<input id="radioDefault_1" name="Field1" type="hidden" value="">
<span>
<input id="Field1_0" name="Field1" type="radio" class="field radio" value="United States of America" tabindex="4" checked="checked" required="">
<label class="choice" for="Field1_0">
<span class="choice__text">United States of America</span>
<span class="choice__qty">
</span>
</label>
</span>
<span>
<input id="Field1_1" name="Field1" type="radio" class="field radio" value="United Kingdom" tabindex="5" required="">
<label class="choice" for="Field1_1">
<span class="choice__text">United Kingdom</span>
<span class="choice__qty">
</span>
</label>
</span>
<span>
<input id="Field1_2" name="Field1" type="radio" class="field radio" value="Canada" tabindex="6" required="">
<label class="choice" for="Field1_2">
<span class="choice__text">Canada</span>
<span class="choice__qty">
</span>
</label>
</span>
<span>
<input id="Field1_3" name="Field1" type="radio" class="field radio" value="Japan | 日本" tabindex="7" required="">
<label class="choice" for="Field1_3">
<span class="choice__text">Japan | 日本</span>
<span class="choice__qty">
</span>
</label>
</span>
<span>
<input id="Field1_4" name="Field1" type="radio" class="field radio" value="Italy | Italia" tabindex="8" required="">
<label class="choice" for="Field1_4">
<span class="choice__text">Italy | Italia</span>
<span class="choice__qty">
</span>
</label>
</span>
<span>
<input id="Field1_5" name="Field1" type="radio" class="field radio" value="France | Française" tabindex="9" required="">
<label class="choice" for="Field1_5">
<span class="choice__text">France | Française</span>
<span class="choice__qty">
</span>
</label>
</span>
<span>
<input id="Field1_6" name="Field1" type="radio" class="field radio" value="Spain | España" tabindex="10" required="">
<label class="choice" for="Field1_6">
<span class="choice__text">Spain | España</span>
<span class="choice__qty">
</span>
</label>
</span>
<span>
<input id="Field1_7" name="Field1" type="radio" class="field radio" value="Germany | Deutschland" tabindex="11" required="">
<label class="choice" for="Field1_7">
<span class="choice__text">Germany | Deutschland</span>
<span class="choice__qty">
</span>
</label>
</span>
<span>
<input id="Field1_8" name="Field1" type="radio" class="field radio" value="Other" tabindex="12" onmouseup="document.getElementById('Field1_other').focus();" required="">
<label class="choice" for="Field1_8" onmouseup="document.getElementById('Field1_other').focus();">
<span class="choice__text">Other</span>
<span class="choice__qty">
</span>
</label>
<input id="Field1_other" name="Field1_other_Other" type="text" class="field text other" value="" onclick="document.getElementById('Field1_8').checked = 'checked';" tabindex="13">
</span>
</div>
</fieldset>
</li>
<li id="foli5" class="notranslate ">
<fieldset>
<!--[if !IE | (gte IE 8)]-->
<legend id="title5" class="desc">
Subscribe to our Newsletter.
<span id="req_5" class="req">*</span>
</legend>
<!--[endif]-->
<!--[if lt IE 8]>
<label id="title5" class="desc">
Subscribe to our Newsletter.
<span id="req_5" class="req">*</span>
</label>
<![endif]-->
<div>
<span class="subfield">
<input id="Field5" name="Field5" type="checkbox" class="field checkbox" value="Sign Up" tabindex="14">
<label class="choice" for="Field5">
<span class="choice__text">Sign Up</span>
<span class="choice__qty">
</span>
</label>
</span>
</div>
</fieldset>
<p class="instruct" id="instruct5"><small>Don't worry - we won't spam you!</small></p>
</li> <li class="buttons ">
<div style="position: absolute; left: -5000px;"><input type="text" name="b_362452d753b2a61b6d6af66f3_a4e5e06043" tabindex="-1" value=""></div>
<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Join in" style="
padding-left: 40px;
padding-right: 40px;
padding-bottom: 20px;
padding-top: 20px;
margin: 0 auto;
margin-left: 220;
">
</li>
<li class="hide">
<label for="comment">Do Not Fill This Out</label>
<textarea name="comment" id="comment" rows="1" cols="1"></textarea>
<input type="hidden" id="idstamp" name="idstamp" value="wGnXUP9KwyczMrPUtKQjbMTI4f1Hyv/yeDxVldMw5kE=">
</li>
</ul>
</form>
</div><!--container-->
<form action="http://camkix.us7.list-manage.com/subscribe/post?u=362452d753b2a61b6d6af66f3&id=a4e5e06043" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
</div>
</section>

Related

CSS for radio buttons to change to actual buttons Gravity Forms

Hi I am trying to change a radio button list to actual buttons and I was successful in doing so with the following code. However, I want them listed next to each other instead of underneath each other. Any ideas what am I doing wrong?
.donations .d_amt .ginput_container label {
display: inline-block;
width: auto;
min-width: fit-content;
white-space: nowrap;
padding: 10px !important;
border: solid 2px #ccc;
transition: all 0.3s;
}
.donations .d_amt input[type="radio"] {
display: none !important;
}
.donations .d_amt input[type="radio"]:checked+label {
border: solid 2px green !important;
}
.gform_wrapper .d_amt .gfield_radio li {
display: inline-block;
}
.gform_wrapper textarea.small {
min-height: 60px!important;
}
<fieldset id="field_13_13" class="gfield gfield--width-full d_amt gfield_price gfield_price_13_13 gfield_product_13_13 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" data-js-reload="field_13_13">
<legend class="gfield_label">Donation Amount<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span>
</legend>
<div class="ginput_container ginput_container_radio">
<div class="gfield_radio" id="input_13_13">
<div class="gchoice gchoice_13_13_0">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 10|10" id="choice_13_13_0" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_0" id="label_13_13_0">€ 10</label>
</div>
<div class="gchoice gchoice_13_13_1">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 25|25" id="choice_13_13_1" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_1" id="label_13_13_1">€ 25</label>
</div>
<div class="gchoice gchoice_13_13_2">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 50|50" id="choice_13_13_2" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_2" id="label_13_13_2">€ 50</label>
</div>
<div class="gchoice gchoice_13_13_3">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 100|100" id="choice_13_13_3" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_3" id="label_13_13_3">€ 100</label>
</div>
<div class="gchoice gchoice_13_13_4">
<input class="gfield-choice-input" name="input_13" type="radio" value="Other Amount|0" id="choice_13_13_4" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_4" id="label_13_13_4">Other Amount</label>
</div>
</div>
</div>
</fieldset>

Form Label Overlaps on textfield - CSS

I have a form from Mailchimp, that needs a bit of style modification. I am trying to create an effect when I focus on the input field, and the label will be placed on top of It; However, as soon as I unfocus from the input field, the label goes back from the previous position which overlaps the text input. I want the label to stay on top of the input field if it's not empty. I intentionally put !important to override Mailchimp styling.
I've been trying to solve this problem the whole day; I would appreciate it if someone can help me out.
Thanks!
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
#mc_embed_signup form{padding:0}
.input-field{
border: 0 !important;
padding: 0 !important;
z-index: 1 !important;
background-color: transparent !important;
border-bottom: 2px solid #eee !important;
font: inherit !important;
font-size: 14px !important;
line-height: 30px!important;
}
.floating-label {
color: #8597a3 !important;
position: absolute !important;
top: 10px !important;
-moz-transition: all 0.3s !important;
-o-transition: all 0.3s !important;
-webkit-transition: all 0.3s !important;
transition: all 0.3s !important;
}
.input-field:focus, .input-field:valid {
outline: 0 !important;
border-bottom-color: #665856 !important;
}
.input-field:focus + .floating-label, .floating-label:valid + .input-field {
color: #665856 !important;
-moz-transform: translateY(-25px) !important;
-ms-transform: translateY(-25px) !important;
-webkit-transform: translateY(-25px) !important;
transform: translateY(-25px) !important;
}
.mc-field-group{
border:none !important;
outline:none !important;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. /
</style>
<div id="mc_embed_signup">
<form action="https://m2comms.us5.list-manage.com/subscribe/post?u=3e58fab1fe0416a1387ddca81&id=42a1e07998" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="input-field" id="mce-EMAIL" required />
<label for="mce-EMAIL" class="floating-label">Email Address</label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="FNAME" class="input-field" id="mce-FNAME" required />
<label for="mce-FNAME" class="floating-label">First Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="LNAME" class="input-field" id="mce-LNAME" required />
<label for="mce-LNAME" class="floating-label">Last Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="COMPANY_NAME" class="input-field" id="mce-CNAME" required />
<label for="mce-CNAME" class="floating-label">Company name </label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3e58fab1fe0416a1387ddca81_42a1e07998" tabindex="-1" value=""></div>
<div class="mc-field-group"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" style="color: black; margin-left: 0; background:#532e77!important; color:#ffffff; font-family: Montserrat; font-size: 16px; font-weight: 700; letter-spacing: 2px;"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='COMPANY_NAME';ftypes[5]='company_name';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
There is a special css selector that you can rely on for this problem. No 'required' needed for input boxes, no complex jQuery conditions needed.
Just add empty placeholder and select the labels with input:not(:placeholder-shown) ~ label . Code in detail below.
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
#mc_embed_signup form{padding:0}
.input-field{
border: 0 !important;
padding: 0 !important;
z-index: 1 !important;
background-color: transparent !important;
border-bottom: 2px solid #eee !important;
font: inherit !important;
font-size: 14px !important;
line-height: 30px!important;
}
.floating-label {
color: #8597a3 !important;
position: absolute !important;
top: 10px !important;
-moz-transition: all 0.3s !important;
-o-transition: all 0.3s !important;
-webkit-transition: all 0.3s !important;
transition: all 0.3s !important;
}
.input-field:focus, .input-field:valid {
outline: 0 !important;
border-bottom-color: #665856 !important;
}
.input-field:focus + .floating-label, .floating-label:valid + .input-field, input:not(:placeholder-shown) ~ label {
color: #665856 !important;
-moz-transform: translateY(-25px) !important;
-ms-transform: translateY(-25px) !important;
-webkit-transform: translateY(-25px) !important;
transform: translateY(-25px) !important;
}
.mc-field-group{
border:none !important;
outline:none !important;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. /
</style>
<div id="mc_embed_signup">
<form action="https://m2comms.us5.list-manage.com/subscribe/post?u=3e58fab1fe0416a1387ddca81&id=42a1e07998" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="input-field" id="mce-EMAIL" placeholder=" ">
<label for="mce-EMAIL" class="floating-label">Email Address</label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="FNAME" class="input-field" id="mce-FNAME" placeholder=" ">
<label for="mce-FNAME" class="floating-label">First Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="LNAME" class="input-field" id="mce-LNAME" placeholder=" ">
<label for="mce-LNAME" class="floating-label">Last Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="COMPANY_NAME" class="input-field" id="mce-CNAME" placeholder=" ">
<label for="mce-CNAME" class="floating-label">Company name </label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3e58fab1fe0416a1387ddca81_42a1e07998" tabindex="-1" value=""></div>
<div class="mc-field-group"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" style="color: black; margin-left: 0; background:#532e77!important; color:#ffffff; font-family: Montserrat; font-size: 16px; font-weight: 700; letter-spacing: 2px;"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='COMPANY_NAME';ftypes[5]='company_name';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

css is causing my form to run off the page on mobile devices

<!-- Main -->
<div id="main-wrapper">
<div class="container">
<div id="content">
<article>
<!-- Form Code Start -->
<form id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' accept-charset='UTF-8'>
<fieldset>
<legend>Contact us</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
<input type='text2' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
<div class='short_explanation'>* required fields</div>
<div>
<span class='error'>
<?php echo $formproc->GetErrorMessage(); ?>
</span>
</div>
<div class='container2'>
<label for='name' >Your Full Name*: </label><br/>
<input type='text2' name='name' id='name' value='<?php echo $formproc->SafeDisplay('name') ?>' maxlength="50" /><br/>
<span id='contactus_name_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='email' >Email Address*:</label><br/>
<input type='text2' name='email' id='email' value='<?php echo $formproc->SafeDisplay('email') ?>' maxlength="50" /><br/>
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='phone' >Phone Number:</label><br/>
<input type='text2' name='phone' id='phone' value='<?php echo $formproc->SafeDisplay('phone') ?>' maxlength="15" /><br/>
<span id='contactus_phone_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='query_type' >Regarding:</label><br/>
<select name='query_type'>
<option>Support</option>
<option>Request A Quote</option>
<option>Trouble uploading a file</option>
<option>Other</option>
</select>
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='message' >Message:</label><br/>
<span id='contactus_message_errorloc' class='error'></span>
<textarea rows="10" cols="50" name='message' id='message'><?php echo $formproc->SafeDisplay('message') ?></textarea>
</div>
<div class='container2'>
<div><img alt='Captcha image' src='show-captcha.php?rand=1' id='scaptcha_img' /></div>
<label for='scaptcha' >Enter the code above here:</label>
<input type='text2' name='scaptcha' id='scaptcha' maxlength="10" /><br/>
<span id='contactus_scaptcha_errorloc' class='error'></span>
<div class='short_explanation'>Can't read the image?
<a href='javascript: refresh_captcha_img();'>Click here to refresh</a>.</div>
</div>
<div class='container2'>
<input type='submit' name='Submit' value='Submit' />
</div>
</fieldset>
</form>
</article>
</div>
</div>
</div>
#contactus fieldset{
padding:20px;
border:1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin:0 auto;
width:459px;
}
#contactus legend, h2{
font-family : Arial, sans-serif;
font-size: 1.3em;
font-weight:bold;
color:#333;
}
#contactus label2{
font-family : Arial, sans-serif;
font-size:0.8em;
font-weight: bold;
}
/* #contactus input[type="text2"], textarea{
font-family : Arial, Verdana, sans-serif;
font-size: 0.8em;
line-height:140%;
color : #000;
padding : 3px;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#contactus input[type="text2"]{
height:26px;
width:459px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#contactus #scaptcha{
width:80px;
height:26px;
}
#contactus input[type="submit2"]{
width:100px;
height:30px;
padding-left:0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#contactus textarea2{
height:120px;
width:469px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#contactus input[type="text2"]:focus,textarea:focus{
color : #009;
border : 1px solid #0E0D0D;
background-color : #D1E7FF;
font-weight:bold;
}
#contactus .container2{
margin-top:8px;
margin-bottom: 10px;
}
#contactus .error{
font-family: Verdana, Arial, sans-serif;
font-size: 0.7em;
color: #900;
background-color : #FF8088;
}
#contactus fieldset#antispam{
padding:2px;
border-top:1px solid #EEE;
border-left:0;
border-right:0;
border-bottom:0;
width:350px;
}
#contactus fieldset#antispam legend{
font-family : Arial, sans-serif;
font-size: 0.8em;
font-weight:bold;
color:#333;
}
#contactus .short_explanation{
font-family : Arial, sans-serif;
font-size: 0.8em;
color:#333;
}
/* spam_trap: This input is hidden. This is here to trick the spam bots*/
#contactus .spmhidip{
display:none;
width:10px;
height:3px;
}
#fg_crdiv{
font-family : Arial, sans-serif;
font-size: 0.3em;
opacity: .2;
-moz-opacity: .2;
filter: alpha(opacity=20);
}
#fg_crdiv p{
display:none;
}
I've tried everything, I can't figure out what is affecting the form to cause it to run off the screen on a mobile device. Here is the link to the form.
in main.css you have hard-coded some widths for example width of input fields, width of fieldset. Just remove them or make them in percentage and your page will become responsive
It is hard to tell from the snippet but when the following code is placed in the document inspector it seems to work
Your hard coded widths were causing the issue, you may have to also modify your other media queries and break points to get it working at every size
#media screen and (max-width: 736px){
body, input, select, textarea {
line-height: 2em;
width: 100%;
}
#contactus input[type="text2"] {
height: 26px;
width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
}
<link rel="stylesheet prefetch" href="https://www.munroprinting.com/assets/css/main.css">
<div class="container">
<div id="content">
<article>
<!-- Form Code Start -->
<form id="contactus" action="/upload/contactform.php" method="post" accept-charset="UTF-8">
<fieldset>
<legend>Contact us</legend>
<input type="hidden" name="submitted" id="submitted" value="1">
<input type="hidden" name="id3a31ca8adb123c3ea7b9" value="432ce4949a45b03c0299f37b81305012">
<input type="text2" class="spmhidip" name="sp5d7f1e2089582b5699eab58b16dad351">
<div class="short_explanation">* required fields</div>
<div><span class="error"></span></div>
<div class="container2">
<label for="name">Your Full Name*: </label><br>
<input type="text2" name="name" id="name" value="" maxlength="50" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"><br>
<span id="contactus_name_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="email">Email Address*:</label><br>
<input type="text2" name="email" id="email" value="" maxlength="50"><br>
<span id="contactus_email_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="phone">Phone Number:</label><br>
<input type="text2" name="phone" id="phone" value="" maxlength="15"><br>
<span id="contactus_phone_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="query_type">Regarding:</label><br>
<select name="query_type">
<option>Support</option>
<option>Request A Quote</option>
<option>Trouble uploading a file</option>
<option>Other</option>
</select>
<span id="contactus_email_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="message">Message:</label><br>
<span id="contactus_message_errorloc" class="error"></span>
<textarea rows="10" cols="50" name="message" id="message"></textarea>
</div>
<div class="container2">
<div><img alt="Captcha image" src="show-captcha.php?rand=1" id="scaptcha_img"></div>
<label for="scaptcha">Enter the code above here:</label>
<input type="text2" name="scaptcha" id="scaptcha" maxlength="10"><br>
<span id="contactus_scaptcha_errorloc" class="error"></span>
<div class="short_explanation">Can't read the image?
Click here to refresh.</div>
</div>
<div class="container2">
<input type="submit" name="Submit" value="Submit">
</div>
</fieldset>
</form>
</article>
</div>
</div>

Display check boxes in a fieldset into three columns

I have a fieldset with check boxes organized with ul, li. I have three lists (all part the same fieldset). I want to display them into three columns, each ul (list) is a column from left to right.
Do I have to wrap each ul in a DIV?... I need help.
Here's what it looks like on my site right now... MaddenUltimateZone.com
<fieldset class="position">
<legend>Position:</legend>
<ul>
<li>Offense</li>
<li>
<input type="checkbox" id="qb" value="QB" />
<label class="position" for="qb">QB</label>
</li>
<li>
<input type="checkbox" id="hb" value="HB" />
<label class="position" for="hb">HB</label>
</li>
<li>
<input type="checkbox" id="fb" value="FB" />
<label class="position" for="fb">FB</label>
</li>
<li>
<input type="checkbox" id="wr" value="WR" />
<label class="position" for="wr">WR</label>
</li>
<li>
<input type="checkbox" id="te" value="TE" />
<label class="position" for="te">TE</label>
</li>
<li>
<input type="checkbox" id="lt" value="LT" />
<label class="position" for="lt">LT</label>
</li>
<li>
<input type="checkbox" id="lg" value="LG" />
<label class="position" for="lg">LG</label>
</li>
<li>
<input type="checkbox" id="c" value="C" />
<label class="position" for="c">C</label>
</li>
<li>
<input type="checkbox" id="rg" value="RG" />
<label class="position" for="rg">RG</label>
</li>
<li>
<input type="checkbox" id="rt" value="RT" />
<label class="position" for="rt">RT</label>
</li>
</ul>
<ul>
<li>Defense</li>
<li>
<input type="checkbox" id="le" value="LE" />
<label class="position" for="le">LE</label>
</li>
<li>
<input type="checkbox" id="re" value="RE" />
<label class="position" for="re">RE</label>
</li>
<li>
<input type="checkbox" id="dt" value="DT" />
<label class="position" for="dt">DT</label>
</li>
<li>
<input type="checkbox" id="lolb" value="LOLB" />
<label class="position" for="lolb">LOLB</label>
</li>
<li>
<input type="checkbox" id="mlb" value="MLB" />
<label class="position" for="mlb">MLB</label>
</li>
<li>
<input type="checkbox" id="rolb" value="ROLB" />
<label class="position" for="rolb">ROLB</label>
</li>
<li>
<input type="checkbox" id="cb" value="CB" />
<label class="position" for="cb">CB</label>
</li>
<li>
<input type="checkbox" id="fs" value="FS" />
<label class="position" for="fs">FS</label>
</li>
<li>
<input type="checkbox" id="ss" value="SS" />
<label class="position" for="ss">SS</label>
</li>
<li>
<input type="checkbox" id="rt" value="RT" />
<label class="position" for="rt">RT</label>
</li>
</ul>
<ul>
<li>Special Teams</li>
<li>
<input type="checkbox" id="k" value="K" />
<label class="position" for="k">K</label>
</li>
<li>
<input type="checkbox" id="p" value="P" />
<label class="position" for="p">P</label>
</li>
</ul>
</fieldset>
</form>
Here's my CSS... maybe something is conflicting.
#filters {
background: #F2F2F2;
border: 1px solid #CCCCCC;
padding: 15px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
fieldset {
border: 1px solid #ccc;
border-radius:4px;
padding: 4px;
display:inline-block;
}
.tier {
float: right;
width: 125px;
}
.position {
float: right;
width: 300px;
margin: 0 10px 0 0;
}
.position ul {
display:inline-block;
vertical-align:top;
}
input[type="radio"],
input[type="checkbox"] { position: absolute; left: -999em; }
label:before {
display: inline-block; position: relative; top:0.25em; left:-2px;
content:''; width:25px; height:25px;
background-image:url(img/formelements.png); }
input[type="checkbox"] + label:before { background-position: 0 -25px;}
input[type="checkbox"]:checked + label:before {background-position: 0 0 ; }
input[type="radio"] + label:before { background-position: -25px -25px;}
input[type="radio"]:checked + label:before { background-position: -25px 0;}
/* Remove the custom styling for IE 7-8 */
.ie8 label:before { display:none; content:none; }
.ie8 input[type="checkbox"],
.ie8 input[type="radio"],
.ie7 input[type="checkbox"],
.ie7 input[type="radio"]{
position: static; left:0; }
.ie8 input[type="checkbox"],
.ie8 input[type="radio"] {
position:relative; top:5px; margin-right:0.5em;}
input[type="text"]:focus, textarea:focus {
border-color:#000;
}
.position ul{
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/w5aFW/1

Why can I not add margins to my form?

This is the HTML
<div id="header">
</div> <!-- end header -->
<div id="main">
<div id="stylized" class="myform">
<form id="form" name="form">
<label>Name
<span class="small">of company, business, etc...</span>
</label>
<input type="text" name="name" id="name"/>
<label>Status Message
<span class="small">Max 40 Characters</span>
</label>
<input type="text" name="statusmessage" id="statusmessage">
<label>URL to Menu
</label>
<input type="text" name="url" id="url"/>
<button type="submit">Submit</button>
<div class="spacer">
</div>
</form><!-- end form -->
<div id="stylized1" class="myform1">
<form id="form1" name="form">
<label>Street Address
</label>
<input type="text" name="stretaddress" id="streetaddress"/>
<label>City
</label>
<input type="text" name="city" id="city"/>
<label>State
</label>
<input type="text" name="state" id="state"/>
<label>ZIP
</label>
<input type="text" name="zip" id="zip"/>
<div class="spacer">
</div>
</form><!-- end form1-->
</div><!-- end stylized -->
</div><!-- end main -->
</div><!-- end container -->
</body>
</head>
This is the CSS
#container {
margin: auto;
width: 800px;
}
#header {
position: relative;
height: 147px;
background: url(images/header.png) no-repeat;
}
#main {
position: relative;
height: 653px;
background: url(images/main.png) no-repeat;
}
#form {
color: #c4c1c1;
margin: 100px 20px 0px 10px;
}
.spacer{
clear:both;
height:1px;
}
#stylized{
border:solid 2px #c4c1c1;
}
#stylized label{
display:block;
font-family: arial;
font-weight:bold;
width:140px;
margin: 2px 0 0px 10px;
}
#stylized .small{
color:#c4c1c1;
display:block;
font-size:12px;
font-weight:normal;
width:140px;
}
#stylized input{
float:left;
font-size:15px;
padding:5px 25px;
border:solid 1px #c4c1c1;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin:133px 0 0px 100px;
width:125px;
height:31px;
text-align:center;
line-height:3px;
color:4b4b4b;
font-size:15px;
font-weight:bold;
}
#stylized1{
position: relative;
margin: -1600px 0px 10px 450px;
}
The top margin, no matter how many times I change it, never has the correct coordinates. Every time I change the margin, it just goes back to the same place visually. How come? Is it because of the #container width? Or do I need some code? I'm fairly new to this. Thanks for your help.
#stylized1 label{
display:block;
float:left;
font-family: arial;
font-weight:bold;
width:140px;
color:#c4c1c1;
margin: 2px 0px 0px 10px;
}
#stylized1 input{
font-size:15px;
padding:5px 25px;
border:solid 1px #c4c1c1;
width:200px;
margin:0px 0px 20px 10px;
}
Cut and paste are your enemy. I doubt you want duplicate forms, one or each half of the form entry. Also, you are using position relative all over the place. If you are doing that then you are probably doing something wrong. In this solution I floated the two entry divs to the left. You can adjust the top-margin on stylized1 to position it. I also cleaned up a lot of your html structure.
I was kind of assuming you were editing top margin on the element with -1600px, but if I am wrong please let me know which one you were editing margins on.
http://jsfiddle.net/fVh23/
<div id="container">
<div id="header"></div> <!-- end header -->
<div id="main">
<form id="form" name="form">
<div id="stylized">
<label>Name
<span class="small">of company, business, etc...</span></label>
<input type="text" name="name" id="name"/>
<label>Status Message
<span class="small">Max 40 Characters</span></label>
<input type="text" name="statusmessage" id="statusmessage">
<label>URL to Menu</label>
<input type="text" name="url" id="url"/>
</div> <!-- end stylized -->
<div id="stylized1">
<label>Street Address</label>
<input type="text" name="stretaddress" id="streetaddress"/>
<label>City</label>
<input type="text" name="city" id="city"/>
<label>State</label>
<input type="text" name="state" id="state"/>
<label>ZIP</label>
<input type="text" name="zip" id="zip"/>
</div><!-- end stylized1 -->
<br style="clear: both;" />
<button type="submit">Submit</button>
<div class="spacer">
</form><!-- end form1-->
</div><!-- end main -->
</div><!-- end container -->

Resources