Mail Form is too Tall, help

I have a mail form, its just very simple , generated from a site which outputs very nice css and php code for mail forms

The form is simple, just enter your email address, your name, and push submit

The problem is that the height of the form is way too tall

http://www.jungleislandcoffee.com/emailform77.jpg

Here is the code that is generating the form

I believe the css styling code is near the bottom of the page. Can anyone tell me a simple fix.?
)_________________________________________________ _

<?php

# This block must be placed at the very top of page.
# --------------------------------------------------
require_once( dirname(__FILE__).'/form.lib.php' );
phpfmg_display_form();
# --------------------------------------------------



function phpfmg_form( $sErr = false ){
$style=" class='form_text' ";

?>

<form name="frmFormMail" action='' method='post' enctype='multipart/form-data' onsubmit='return fmgHandler.onsubmit(this);'>
<input type='hidden' name='formmail_submit' value='Y'>
<div id='err_required' class="form_error" style='display:none;'>
<label class='form_error_title'>Please check the required fields</label>
</div>



<ol class='phpfmg_form' >

<li class='field_block' id='field_0_div'><div class='col_label'>
<label class='form_field'>Email</label> <label class='form_required' >&nbsp;</label> </div>
<div class='col_field'>
<input type="text" name="field_0" id="field_0" value="<?php phpfmg_hsc("field_0", ""); ?>" class='text_box'>
<div id='field_0_tip' class='instruction'>Enter your Email</div>
</div>
</li>

<li class='field_block' id='field_1_div'><div class='col_label'>
<label class='form_field'>Name</label> <label class='form_required' >&nbsp;</label> </div>
<div class='col_field'>
<input type="text" name="field_1" id="field_1" value="<?php phpfmg_hsc("field_1", ""); ?>" class='text_box'>
<div id='field_1_tip' class='instruction'>Enter your name</div>
</div>
</li>


<li>
<div class='col_label'>&nbsp;</div>
<div class='form_submit_block col_field'>

<input type='submit' value='Join Now' class='form_button'>
<span id='phpfmg_processing' style='display:none;'>
<img id='phpfmg_processing_gif' src='<?php echo PHPFMG_ADMIN_URL . '?mod=image&amp;func=processing' ;?>' border=0 alt='Processing...'> <label id='phpfmg_processing_dots'></label>
</span>
</div>
</li>

</ol>




</form>




<?php

phpfmg_javascript($sErr);

}
# end of form




function phpfmg_form_css(){
?>
<style type='text/css'>

body{
margin-left: 18px;
margin-top: 18px;
}

body{
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 13px;
color : #ffffff;
background-color: #000000;
}

select, option{
font-size:13px;
}

ol.phpfmg_form{
list-style-type:none;
padding:0px;
margin:0px;
}

ol.phpfmg_form li{
margin-bottom:5px;
clear:both;
display:block;
overflow:hidden;
width: 100%
}


.form_field, .form_required{
font-weight : bold;
}

.form_required{
color:red;
margin-right:8px;
}

.field_block_over{
}

.form_submit_block{
padding-top: 3px;
}

.text_box, .text_area, .text_select {
width:300px;
}

.text_area{
height:80px;
}

.form_error_title{
font-weight: bold;
color: red;
}

.form_error{
background-color: #F4F6E5;
border: 1px dashed #ff0000;
padding: 10px;
margin-bottom: 10px;
}

.form_error_highlight{
background-color: #F4F6E5;
border-bottom: 1px dashed #ff0000;
}

div.instruction_error{
color: red;
font-weight:bold;
}

hr.sectionbreak{
height:1px;
color: #ccc;
}

#one_entry_msg{
background-color: #F4F6E5;
border: 1px dashed #ff0000;
padding: 10px;
margin-bottom: 10px;
}

<?php phpfmg_text_align();?>



</style>

<?php
}
# end of css

# By: formmail-maker.com
?>
Tech article writing .Native English Speaker(with Proof)
specializing in SmartPhones , Internet security, high tech gadgets, search engines, tech shows, digital cameras.

 

please give actual URL of the mail form so that someone can check it online

 

OK i uploaded it here and you can see it

its just an iframe though so not sure what you can benefit by seeing the actual form online

http://www.jungleislandcoffee.com/index77a.html

 

if it is iframe then height of iframe can be a cause for the height of visual form !

 

Hmm yes the iframe was showing 600px for the height, definitely I changed it now to 170px
but if you click on the link you will see it now changes to a scroll up and down version, odd

 

well, its height can be around 300px , say 250px to 350px (depending on where you actually use iframe)

 

I changed it now to 250 seems to be ok now, thank you for that, was driving me nuts

 

How can we decrease the length of the form?

 

^ depends on many factors ! first find out what is causing unusual height
where you have unwanted space / fields / elements ; also check html / css styling
...

 

1) why are you serving it in a IFRAME (an element we aren't supposed to be using after 1998)

2) Never seen that generator before, but the code for it is RUBBISH. Static CSS inlined in the markup, list abuse, endless pointless DIV for nothing... fat bloated javascripted crap that has no scripting off fallbacks... Basically everything that's wrong with markup AND scripting from a decade or more ago.