Why can't I select and enter data in an input field?

Question

I can see this form that I have created but I can't enter an e-mail address in the field.

The problem is across all browsers although when I tested in IE, there was a validation icon that showed up that was actually working (it was a green check for a valid e-mail and a red 'X' for an invalid format.) My deduction from this is that the form is somehow receiving input but that it's not visible.

I've been trying to figure this out for a few hours now and I'm stuck. Admittedly, I'm relatively new to web development and my main troubleshooting avenue has been removing bits of code piece by piece and testing and re-testing to see if I can find the problem. I tried removing the tables (they're gone now as you can see by the large submit button), removing some scripts that I thought were extraneous and I can't seem to find a solution.

On this page, I have the form that I am using: http://dev.premierpaymentsystems.com/newsletter-sign

The form itself was generated with a marketing automation tool called "Act-on". The code that's here was pulled from the "Act-on" tool.

Any help would be greatly appreciated. When running the code in a standalone test, it works fine so another assumption I'm making is that there is somethign else on the page interfering but I don't know where to start in order to troubleshoot that.

The full code (prior to my tweaking) is here:

<form id="form_0001" method="post" enctype="multipart/form-data" action="http://info.premierpaymentsystems.com/acton/forms/userSubmit.jsp" accept-charset="UTF-8" target="_blank">
<input type="hidden" name="ao_a" value="15000"  >
<input type="hidden" name="ao_f" value="0001"   >
<input type="hidden" name="ao_d"    value="0001:d-0001" >
<input type="hidden" name="ao_p" id="ao_p" value="0"    >
<input type="hidden" name="ao_jstzo"    id="ao_jstzo" value=""  >
<input type="hidden" name="ao_cuid" value=""    >
<input type="hidden" name="ao_srcid"    value=""    >
<input type="hidden" name="ao_bot"  id="ao_bot" value="yes" >
<input type="hidden" name="ao_camp" value=""    >
<link rel="stylesheet" type="text/css" href="http://info.premierpaymentsystems.com/acton/form/15000/0001/form.css">
<div id="ao_alignment_container" align="center">
<table class="ao_tbl_container" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="ao_tbl_cell" style="padding-left: 10px; padding-right: 10px" align="center">
<div align="left">
<div class="formField">
<div class="formFieldLabel" id="form_0001_fld_0-Label">
<label for = "form_0001_fld_0">
E-mail</label>
</div>
<input type="text" class="formFieldText formFieldMedium" id="form_0001_fld_0" name="E-mail Address" onBlur="singleCheck ('form_0001_fld_0', 'EMAIL', 'form_0001_fld_0-Label')">
</div>
<script type="text/javascript">
if (typeof(addFieldToValidate) != 'undefined') { addFieldToValidate ('form_0001_fld_0', 'EMAIL'); } </script>
</div>
</td>
</tr>
<!-- BUTTONS -->
<tr>
<td>
&nbsp;</td>
</tr>
<tr>
<td style="padding-bottom: 10px" align="center" id="form_0001_ao_submit_button">
<input id="form_0001_ao_submit_input" type="button" name="Submit" value="Submit" onClick="doSubmit(document.getElementById('form_0001'))">
</td>
</tr>
<tr class="formNegCap">
<td>
<input type="text" id="ao_form_neg_cap" name="ao_form_neg_cap" value="">
</td>
</tr>
</table>
</div>
<img src='http://info.premierpaymentsystems.com/acton/form/15000/0001:d-0001/pgend.gif' width='1' height='1'>
</form>

Solution 1

You have to remove or enlarge the height attribute of your css class: .formFieldText (which is 19px at the moment)

You can analyze and test it with Chrome or Firefox (right click on the element and choose Web-Developer/Inpect-Element or something like that from the context menu. After that you can easily change the css code)

Solution 2

The height of .formFieldText is too small to show what you type in. If you remove or increase the height, you can see the letters.

If you want to keep the height of the field, you have to remove or decrease the padding inside of it.