Remove line breaks & paragraphs from Contact Form 7

An ordinary form built with Contact Form 7

Anyone who builds and maintains WordPress websites probably knows the “Contact Form 7” plugin. With Contact Form7, you can quickly and easily create a decent form as WordPress blogger or website operator, which also looks pretty nice.

With the “Contact form 7 – Success Page Redirects” plug-in extension, you can even redirect the website visitor to a special thank-you page after completing the form. This helps in conversion tracking. So far, so good.

Contact Form 7 has an unsightly error which I find pretty annoying: In the normal representation, the lines and fields are really far apart. This results in more horizontal space needed.

And even worse: if the form has a lot of fields underneath, the screen button slips below the screen edge – below the fold – and therefore won’t be visible to the visitor. Another valuable contact will be lost. Too bad.

The reason for the lengthy form can be found pretty fast (using dev tools in chrome for example): In Contact Form 7, a </ br> or </ p> is inserted after each form field. An extra blank line – just for nothing

This may be ok for common settings – but I still want to get rid of the extra </br> and </p> in the Contactform 7 plugin. How can this be achieved?

The solution is quite simple – apparently the plugin developer already had the problem himself: With the setting “define (, WPCF7_AUTOP ‘, false);” in your wp-config.php file this can be fixed for all forms on the affected WordPress website. This little trick removes all paragraphs and line breaks in Contact Form 7.

More about:

30 Stylish jQuery Tooltip Plugins For Catchy Designs « Jquery « Questions « wordpress-expert

Contact Form with less space between the form fields

To add this to your WordPress site:

Open your wp-config.php file. It is in the top directory of your WordPress installation
Search for the entry ‘WP_DEBUG’ or ‘WPLANG’
Insert a new line just after one of these lines
Insert the following and save the wp-config.php file

define ('WPCF7_AUTOP', false );

Then reload your WordPress Website and check your form again: The form fields are much closer together, compared to before. If you like, you can also customize individual CSS elements, until the appearance fits your design ideas or corporate identity.

About the Author
Latest Posts

About Mat Boehmichen

Mat is the founder of several businesses including Awantego.com - a digital Content agency. He is a wordpress maniac since 2008 and loves to test awesome worpress themes and new plugins. He loves to write technical howtos and tutorials as long as there is a bit of information technology inside.