Extra spacing in the form

This problem is usually caused by themes which have code that alters the normal ordering of the WordPress filter functions on the post content. By default, the function that inserts HTML paragraph and newline tags to properly space the post content (wpautop) is run before the function to display shortcode content (do_shortcode). Many themes change this around so that do_shortcode is first and wpautop is after it, this adds <p></p> and <br /> tags all over the form HTML, causing the extra spacing.

Solution #1 – [raw] [/raw] tags

Some themes have a workaround, wrap the form shortcode in [raw] [/raw] tags. For example:

[raw][iphorm id=1 name="Contact form"][/raw]

Solution #2 – remove <pre> tags

If you pasted the form shortcode into the Visual tab of the WordPress page editor, it may have also pasted <pre> tags around the form shortcode. Click the Text (or HTML) tab of the WordPress page editor and remove the <pre> </pre> tags surrounding the form shortcode.

Solution #3 – use HTML instead of column shortcodes

If the form is inside another shortcode, such as one of your theme column shortcodes, this column shortcode function may be the cause of the problem. You can verify if this is the problem by inserting the form shortcode so that it isn’t inside a column shortcode, if it works in that situation then you know that the column shortcode function is the problem. You can bypass it by using the HTML for the column directly, instead of using the column shortcode. You will need to find out what the resulting HTML of the column shortcode is, you can do this by using the browser Inspect tool (or Firebug) to inspect the form and look through the parent HTML tags until you find the column.

For example, lets say the form is inside a column shortcode such as this:

[[one_half_last][iphorm id=1 name="Contact form"][/one_half_last]]

1. View the form page and inspect the form, the resulting HTML for the column is shown below. Note: this will be different for your theme.

2. Edit the page and go to the Text (or HTML) tab of the WordPress page editor. Replace the column shortcode with the HTML for the shortcode, don’t forget to replace the closing shortcode tag with the closing HTML tag of the column (usually a </div> tag).

Solution #4 – find and remove the problem code in your theme

Your theme possibly has the code shown below somewhere, a good place to start looking is the theme functions.php file, then any shortcode related file, find this code and remove it.

1
2
3

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99 );
add_filter( 'the_content', 'shortcode_unautop', 100 );

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99 );
add_filter( 'the_content', 'shortcode_unautop', 100 );

Note: removing this code will mean that any text you have inside shortcodes will no longer have paragraph and newline HTML tags added automatically. You can add these HTML tags manually or replace the code you removed with the alternative code below. The code below does the same thing but has a workaround and is compatible with Quform.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function tcr_formatter($content) {
    $new_content = '';
    $pattern_full = '{(\[raw\].*?\[/raw\])}is';
    $pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
    $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
 
    foreach ($pieces as $piece) {
        if (preg_match($pattern_contents, $piece, $matches)) {
            $new_content .= $matches[1];
        } else {
            $new_content .= wptexturize(wpautop($piece));
        }
    }
 
    return $new_content;
}
 
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');
 
add_filter('the_content', 'tcr_formatter', 99);

function tcr_formatter($content) {
    $new_content = '';
    $pattern_full = '{(\[raw\].*?\[/raw\])}is';
    $pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
    $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

    foreach ($pieces as $piece) {
        if (preg_match($pattern_contents, $piece, $matches)) {
            $new_content .= $matches[1];
        } else {
            $new_content .= wptexturize(wpautop($piece));
        }
    }

    return $new_content;
}

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'tcr_formatter', 99);

Solution #5 – contact the theme author

If all else fails you will need to ask the theme author what you need to do to get it to work. There is nothing that can be changed in the Quform plugin to fix it, it is a problem with the theme. The author should be able to provide a workaround. Tell them the wpautop filter needs to be before the do_shortcode filter on the_content as is the case in the default WordPress theme, or give them the link to this page.