PDA

View Full Version : Need help with jotform code.



kaloren13
Jan 21st, 2009, 11:38 PM
Hi,

I need help with some code I have inserted into my blogspot.

http://waterforallseasons.blogspot.com

I used the site jotform.com (which is great, by the way) to create a form to insert into my blog. I published the post, and the form looks great...except it is halfway down the page!

I know this is probably a very simple fix, but I really don't know anything about code and I cannot figure out how to get the form to appear at the top of the post.

I have see similar issues like this and it seems to have something to do with having too many "br" or pagebreak tags? I don't see these tags in the code I inserted into the post. Should I be looking somewhere else? In the template code?

This is the code I inserted:

<script src="http://www.jotform.com/js/form.js?v2.0.836" type="text/javascript"></script>
<style type="text/css">
.tbmain{
/* Changes on the form */
background: white !important;
}
.left{
/* Changes on the form */
color: black !important;
font-family: Verdana !important;
font-size: 12px !important;
}
.head{
color:#333333;
font-size:20px;;
text-decoration:underline;
font-family:"Verdana";
}
td.left {
font-family:"Verdana";
font-size:12px;
color:black;
}
.pagebreak{
font-family:"Verdana";
font-size:12px;
color:black;
}
.tbmain{
height:100%;
background:white;
}
span.required{
font-size: 13px !important;
color: red !important;
}

div.backButton{
background: transparent url("http://www.jotform.com//images/btn_back.gif") no-repeat scroll 0 0;
height:16px;
width:53px;
float:left;
margin-bottom:15px;
padding-right:5px;
}
div.backButton:hover{
background: transparent url("http://www.jotform.com//images/btn_back_over.gif") no-repeat scroll 0 0;
}
div.backButton:active{
background: transparent url("http://www.jotform.com//images/btn_back_down.gif") no-repeat scroll 0 0;
}
div.nextButton{
background: transparent url("http://www.jotform.com//images/btn_next.gif") no-repeat scroll 0 0;
height:16px;
width:53px;
float: left;
margin-bottom:15px;
padding-right:5px;
}
div.nextButton:hover{
background: transparent url("http://www.jotform.com//images/btn_next_over.gif") no-repeat scroll 0 0;
}
div.nextButton:active{
background: transparent url("http://www.jotform.com//images/btn_next_down.gif") no-repeat scroll 0 0;
}
.pageinfo{
padding-right:5px;
margin-bottom:15px;
float:left;
}

</style>
<table width="100%" cellpadding="2" cellspacing="0" class="tbmain">
<tr><td class="topleft" width="10" height="10">&nbsp;</td>
<td class="topmid">&nbsp;</td>
<td class="topright" width="10" height="10">&nbsp;</td>
</tr>
<tr>
<td class="midleft" width="10">&nbsp;&nbsp;&nbsp;</td>
<td class="midmid" valign="top">
<form action="http://www.jotform.com/submit.php" method="post" name="q_form_90185627172">
<input type="hidden" name="formID" value="90185627172" />
<div id="main">
<div class="pagebreak">
<table width="520" cellpadding="5" cellspacing="0">
<tr >
<td width="150" class="left" >
<label >Name: <span class="required">*</span></label>
</td>
<td class="right" >
<input type="text" size="20" name="q2_Name" class="text" value="" id="q2" onblur="validate(this,'Required')" />
</td>
</tr>
<tr >
<td width="150" class="left" >
<label >E-mail: <span class="required">*</span></label>
</td>
<td class="right" >
<input type="text" size="20" name="q3_Email" class="text" value="" id="q3" onblur="validate(this,'Required')" />
</td>
</tr>
<tr >
<td width="150" class="left" >
<label >Phone:</label>
</td>
<td class="right" >
<input type="text" size="20" name="q9_Phone" class="text" value="" id="q9" />
</td>
</tr>
<tr >
<td width="150" class="left" >
<label >State: <span class="required">*</span></label>
</td>
<td class="right" >
<input type="text" size="20" name="q15_State" class="text" value="" id="q15" onblur="validate(this,'Required')" maxlength="100" maxsize="100" />
</td>
</tr>
<tr >
<td width="150" class="left" >
<label >Zip code: <span class="required">*</span></label>
</td>
<td class="right" >
<input type="text" size="20" name="q7_Zipcode" class="text" value="" id="q7" onblur="validate(this,'Required')" maxlength="100" maxsize="100" />
</td>
</tr>
<tr >
<td width="150" class="left" valign="top" >
<label>Please indicate your preferred donation. <span class="required">*</span></label>
</td>
<td valign="top" class="right">
<input type="checkbox" name="q11_Pleaseindicateyourpr[]" class="other" id="q11_0" value=" 240 year" onblur="validate(this,'Required')" />
<label class="left">$240/year</label> <br />
<input type="checkbox" name="q11_Pleaseindicateyourpr[]" class="other" id="q11_1" value=" 20 month" onblur="validate(this,'Required')" />
<label class="left">$20/month</label> <br />
<input type="checkbox" name="q11_Pleaseindicateyourpr[]" class="other" id="q11_2" value=" 5 week" onblur="validate(this,'Required')" />
<label class="left">$5/week</label> <br />
<input type="checkbox" name="q11_Pleaseindicateyourpr[]" class="other" id="q11_3" value="Other Amount" onblur="validate(this,'Required')" />
<label class="left">Other Amount</label> <br />
</td>
</tr>
<tr >
<td width="150" class="left" valign="top" >
<label>Please indicate if you will be donating online using Paypal, or sending a check by mail. <span class="required">*</span></label>
</td>
<td valign="top" class="right">
<input type="checkbox" name="q12_Pleaseindicateifyouw[]" class="other" id="q12_0" value="Paypal " onblur="validate(this,'Required')" />
<label class="left">Paypal </label> <br />
<input type="checkbox" name="q12_Pleaseindicateifyouw[]" class="other" id="q12_1" value="Mail" onblur="validate(this,'Required')" />
<label class="left">Mail</label> <br />
</td>
</tr>
<tr >
<td width="150" class="left" valign="top" >
<label>If donating by mail, please indicate if you would like envelopes (12) mailed to you.</label>
</td>
<td valign="top" class="right">
<input type="checkbox" name="q13_Ifdonatingbymailplea[]" class="other" id="q13_0" value="Yes" />
<label class="left">Yes</label> <br />
<input type="checkbox" name="q13_Ifdonatingbymailplea[]" class="other" id="q13_1" value="No" />
<label class="left">No</label> <br />
</td>
</tr>
<tr >
<td width="150" class="left" valign="top" >
<label>Please indicate if you would like to be sent reminder emails (for monthly and weekly donations only).</label>
</td>
<td valign="top" class="right">
<input type="checkbox" name="q14_Pleaseindicateifyouw[]" class="other" id="q14_0" value="Yes" />
<label class="left">Yes</label> <br />
<input type="checkbox" name="q14_Pleaseindicateifyouw[]" class="other" id="q14_1" value="No" />
<label class="left">No</label> <br />
</td>
</tr>
<tr >
<td width="150" class="left" >&nbsp;

</td>
<td class="right">
<input type="submit" class="btn" value="Submit" />
</td>
</tr>
</table>
</div>
</div>
</form>
</td>
<td class="midright" width="10">&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td class="bottomleft" width="10" height="10">&nbsp;</td>
<td class="bottommid">&nbsp;</td>
<td class="bottomright" width="10" height="10">&nbsp;</td>
</tr>
</table>
<script type="text/javascript">
validate("q_form_90185627172");
</script>

Any help would be greatly appreciated!!!

Thanks so much,

Kaloren13

tagnu
Jan 22nd, 2009, 05:24 AM
Looks fine in Firefox 3 and IE6. In which browser do you see the issue?