Why is there extra space or gaps on my form?

Why is there extra space or gaps on my form?

Some themes and plugins have been found to modify the form HTML output. It is easy to identify the problem when viewing the HTML output of the form. The form code has a beginning and end HTML comment tag, in between the tags you will find the form HTML. An opening form tag, some hidden fields, then the field HTML with DIV elements surrounding them, finally a submit button and the closing form tag.

The problem is some theme or plugin might run an Auto-Formatting filter to insert paragraph or line break HTML tags in the_content HTML. This is what causes the extra space and gaps.

examples:

Example of good form output:

<!-- Fast Secure Contact Form plugin 4.0.6 - begin - FastSecureContactForm.com -->
<div style="clear:both;"></div>
<p>Comments, questions, and testimonials are welcome.</p>
<div id="FSContact1" style="width:99%; max-width:555px;">
<form action="" id="fscf_form1" method="post">
<input type="hidden" name="fscf_submitted" value="0" />
<input type="hidden" name="fs_postonce_1" value="" />
<input type="hidden" name="si_contact_action" value="send" />
<input type="hidden" name="form_id" value="1" />

<div id="fscf_required1">
  <span style="text-align:left;">*</span> 
</div>

<input type="hidden" name="mailto_id" value="1" />

<div id="fscf_div_clear1_0" style="clear:both;">
  <div id="fscf_div_field1_0" style="">
    <div style="text-align:left; padding-top:5px;">
      <label style="text-align:left;" for="fscf_name1">Name:</label>
    </div>
    <div style="text-align:left;">
      <input style="" type="text" id="fscf_name1" name="full_name" value=""  />
    </div>
  </div>
</div>

<!-- Fast Secure Contact Form plugin 4.0.6 - end - FastSecureContactForm.com -->

Example of bad form output:

<p><!-- Fast Secure Contact Form plugin 4.0.6 - begin - FastSecureContactForm.com --></p>
<div style="clear:both;"></div>
<p>Comments, questions, and testimonials are welcome.</p>
<div id="FSContact1" style="width:99%; max-width:555px;">
<form action="" id="fscf_form1" method="post">
<input type="hidden" name="fscf_submitted" value="0" /><br />
<input type="hidden" name="fs_postonce_1" value="" /><br />
<input type="hidden" name="si_contact_action" value="send" /><br />
<input type="hidden" name="form_id" value="1" /><br />

<div id="fscf_required1">
  <span style="text-align:left;">*</span>
</div>

<p><input type="hidden" name="mailto_id" value="1" /></p>

<p></p>
<div id="fscf_div_clear1_0" style="clear:both;">
  <div id="fscf_div_field1_0" style="">
    <div style="text-align:left; padding-top:5px;">
      <label style="text-align:left;" for="fscf_name1">Name:</label>
    </div>
    <div style="text-align:left;">
      <input style="" type="text" id="fscf_name1" name="full_name" value=""  />
    </div>
  </div>
</div>

<p><!-- Fast Secure Contact Form plugin 4.0.6 - end - FastSecureContactForm.com --><p>

Notice the <br /> and <p> tags in there? They are surrounding the comment tags, after the hidden inputs, and even just random.

The form plugin did not do that! the theme or another plugin did.

The theme you are using could be causing it…
Do this as a test:
In Admin, click on Appearance, Themes.
Temporarily activate your theme to a WP default one…
“WordPress Default” theme(default for WP 2.0+), or
“Twenty Ten” (default for WP 3.0+), or
“Twenty Eleven” (default for WP 3.2+) or
“Twenty Twelve” (default for WP 3.5+) or
“Twenty Thirteen” (default for WP 3.6+)

It does not cause any harm to your WP to temporarily change the theme, test if the errors went away, and then and change the theme back.
Does it work properly with a default WP theme?
If it does, then the theme you are using is the cause. Use a different theme or report the errors to the theme developer.

Maybe another plugin is conflicting.
Look on the Admin – Plugins – menu.
Temporarily Deactivate (not delete) all your other plugins.
Did the problem you were having go away? If yes, Activate each of the plugins, one by one, to determine which one conflicts. Test if the problem goes away after activating each plugin one at a time. This way you can determine which plugin was causing the problem. Once you determine a plugin is conflicting, check the plugin version to be sure it is compatible with your version of WP. Sometimes plugins are no longer updated, then new WP versions come out and the plugin will generate errors or no longer function as intended. Report any problems you find to the plugin author.

Possible solutions
1) Stop using the theme or plugin that does this because they are doing it wrong.

2) Put this in your functions.php file and see if the problem goes away.
If it does not fix it, take it out, it might cause problems with something else.

//move wpautop filter to AFTER shortcode is processed
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99);
add_filter( 'the_content', 'shortcode_unautop',100 );

Plugins reported causing this issue:

Shortcodes Ultimate
(Solution – go to the Settings tab for Shortcodes Ultimate and disable the setting “Custom formatting”).

Since there are over 27,000 plugins for WP, it can be caused by other plugins not yet reported here.

PHP error can be the cause
Note: this symptom of gaps (but not br and p tags) can also be caused by a PHP error showing in the HTML somewhere, this would be found when View HTML source.
See this help page for troubleshooting WordPress errors.

Do you need help?

Donations by PayPal:

If you find this free contact form program/plugin useful to you, please consider making a small donation to help contribute to further development. My time is very limited and I get dozens of support emails every day. If you are not able to donate, that is OK. Thanks for your kind support! - Mike Challis

Donations by cash or check:
Mike Challis
PO Box 819
Long Beach WA 98631

Comments are closed.