Support » Plugin: Contact Form 7 » Get rid extra and tags in form code output

  • Resolved digitalrain

    (@digitalrain)


    I’m using CF7 v 3.3.3 on a WP 3.5 clean installation and one thing has been plaguing me. I cannot get rid of the extra paragraph and linebreak tags that CF7 inserts into my form code.

    I’ve tried “hiding” it via CSS but every now and then one manages to sneak through anyway.

    I tried disabling it by adding the following to my wpconfig.php:

    define (‘WPCF7_AUTOP’, false );

    Nothing works.

    Please help! This is an irritating function that serves no real purpose. There should at least be something in the CF7 settings to allow the user to decide whether WPCF7_AUTOP should be enabled or not.

    Don’t get me wrong – I love CF7. It’s an incredible plugin. It’s just this one little issue that’s driving me nuts.

    Please help!

    http://wordpress.org/extend/plugins/contact-form-7/

Viewing 9 replies - 1 through 9 (of 9 total)
  • CF 7 normally only puts in the paragraph and linebreak tags defined in your form. Like in the default form shown below.

    <p>Your Name (required)
    [text* your-name] </p>

    <p>Your Email (required)
    [email* your-email] </p>

    <p>Subject
    [text your-subject] </p>

    <p>Your Message
    [textarea your-message] </p>

    <p>[submit “Send”]</p>

    If you could post a snippet from one of your forms and a link to that form live, members should be able to give some advice.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Maybe this is a theme issue. Try switching theme to the default one.

    Takayuki Miyoshi – it isn’t a theme issue. The first thing I did was switch to the default theme to see if that fixed it. It did not.

    Buzztone – my form is at http://digitalrainmakers.com/contact/

    Here is the form structure from the CF7 Form Mgr:

    <div class="form-row">
    <div class="form-cell"><label><strong>Please enter your name:</strong> (required)</label>[text* first-name watermark "First name"]</div>
    <div class="form-cell"><label>&nbsp;</label>[text* last-name watermark "Last name"]</div>
    </div>
    
    <div class="form-row">
    <div class="form-cell"><label><strong>Email Address:</strong> (required)</label>[email* your-email watermark "Your e-mail"]</div>
    <div class="form-cell"><label><strong>Phone Number:</strong> (incl. area code)</label>[text phone watermark "(XXX) XXX-XXXX"]</div>
    </div>
    
    <div class="form-row">
    <div class="form-cell"><label><strong>City:</strong></label>[text city watermark "City"]</div>
    <div class="form-cell"><label><strong>State:</strong></label>[text state watermark "State"]</div>
    </div>
    
    <div class="form-row">
    <div class="form-cell"><label><strong>Are you located in the U.S.?</strong> [radio in-us "Yes" "No"]</label></div>
    </div>
    
    <div class="form-row">
    <div class="form-cell"><label><strong>If you are NOT located in the U.S.</strong> please enter your country below:</label>[text country watermark "Country"]</div>
    </div>
    
    <div class="form-row" style="margin-top:32px">
    <div class="form-cell"><label><strong>Company Name:</strong> (required)</label>[text* company-name watermark "Company name"]</div>
    <div class="form-cell"><label><strong>Business Type:</strong></label>[select business-type "Education" "Entertainment" "Health & Fitness" "Legal" "Medical" "Real Estate" "Retail" "** Other **"]</div>
    </div>
    
    <div class="form-row">
    <div class="form-cell"><label><strong>If "Other" please explain:</strong></label>[text company-other watermark "Other business type"]</div>
    </div>
    
    <div class="form-row" style="margin-top:32px">
    <div class="form-cell"><label><strong>What services are you interested in?</strong> (select all that apply)</label></div>
    </div>
    
    <div class="form-row">
    <div class="form-cell">[select* menu-722 multiple "Ecommerce" "Ecommerce - Magento" "Ecommerce - OpenCart" "Joomla Web Design" "Joomla Conversion" "Joomla Template Design" "Link Building" "Organic SEO" "SEO Copywriting" "Web Design" "Website Redesign" "WordPress Web Design" "WordPress Conversion" "WordPress Theme Design"]</div>
    </div>
    
    <div class="form-row" style="margin-top:32px">
    <div class="form-cell"><label><strong>What is your budget range?</strong> (required)</label></div>
    </div>
    <div class="form-row">
    <div class="form-cell">[select* budget "Less than $500" "$501 - $1000" "$1001 - $2500" "$2501 - $5000" "$5000 and up"]</div>
    </div>
    
    <div class="form-row" style="margin-top:32px">
    <div class="form-cell"><label><strong>Please describe your project:</strong> (required)</label></div>
    </div>
    <div class="form-row">
    <div class="form-cell">[textarea* project-description watermark "Enter project description"]</div>
    </div>
    
    <div class="form-row" style="margin-top:32px">
    <div class="form-cell">[submit id:submit "Send Email"]</div>
    <div class="form-cell"><input type="reset" name="reset" value="Clear Form" /></div>
    </div>
    
    <br clear="both" />

    This issue is driving me bugnuts.

    I had good look through your form with Firebug (using Firefox) and it appears be rendering as per your form structure (which looks fine). I can’t see any “extra paragraph and linebreak tags”.

    I note that you say “every now and then one manages to sneak through”. Is it possible for you let us see what you are seeing in some more detail?

    buzztone,

    Actually, it is not rendering per my form structure. The plugin is inserting a <br> before Services and Budget drop downs. It also inserts <p></p> text after them as well.

    Here is the actual rendered HTML for those drop downs:

    <div class="form-row" style="margin-top:32px">
    <div class="form-cell"><label><strong>What services are you interested in?</strong> (select all that apply)</label></div>
    </div>
    <div class="form-row">
    <div class="form-cell"><span class="wpcf7-form-control-wrap menu-722"><br />
    <select name="menu-722[]" class="wpcf7-form-control  wpcf7-select wpcf7-validates-as-required" multiple="multiple">
    <option value="Ecommerce">Ecommerce</option>
    <option value="Ecommerce - Magento">Ecommerce – Magento</option>
    <option value="Ecommerce - OpenCart">Ecommerce – OpenCart</option>
    <option value="Joomla Web Design">Joomla Web Design</option>
    <option value="Joomla Conversion">Joomla Conversion</option>
    <option value="Joomla Template Design">Joomla Template Design</option>
    <option value="Link Building">Link Building</option>
    <option value="Organic SEO">Organic SEO</option>
    <option value="SEO Copywriting">SEO Copywriting</option>
    <option value="Web Design">Web Design</option>
    <option value="Website Redesign">Website Redesign</option>
    <option value="WordPress Web Design">WordPress Web Design</option>
    <option value="WordPress Conversion">WordPress Conversion</option>
    <option value="WordPress Theme Design">WordPress Theme Design</option>
    </select>
    <p></span></div>
    </div>
    <div class="form-row" style="margin-top:32px">
    <div class="form-cell"><label><strong>What is your budget range?</strong> (required)</label></div>
    </div>
    <div class="form-row">
    <div class="form-cell"><span class="wpcf7-form-control-wrap budget"><br />
    <select name="budget" class="wpcf7-form-control  wpcf7-select wpcf7-validates-as-required">
    <option value="Less than $500">Less than $500</option>
    <option value="$501 - $1000">$501 – $1000</option>
    <option value="$1001 - $2500">$1001 – $2500</option>
    <option value="$2501 - $5000">$2501 – $5000</option>
    <option value="$5000 and up">$5000 and up</option>
    </select>
    <p></span></div>
    </div>

    See what I mean?

    Yes – I can see “extra paragraph and linebreak tags” at the 3 locations where you have used Dropdowns.

    Business Type:

    <div class="form-cell"><label><strong>Business Type:</strong></label><span class="wpcf7-form-control-wrap business-type"><br />
    <select name="business-type" class="wpcf7-form-control  wpcf7-select">
    ...
    </select>
    <p></span></div>

    What services are you interested in? (select all that apply)

    <div class="form-row">
    <div class="form-cell"><span class="wpcf7-form-control-wrap menu-722"><br />
    <select name="menu-722[]" class="wpcf7-form-control  wpcf7-select wpcf7-validates-as-required" multiple="multiple">
    ...
    </select>
    <p></span></div>
    </div>

    What is your budget range? (required)

    <div class="form-row">
    <div class="form-cell"><span class="wpcf7-form-control-wrap budget"><br />
    <select name="budget" class="wpcf7-form-control  wpcf7-select wpcf7-validates-as-required">
    ...
    <p></span></div>
    </div>

    I see it is exactly the same output in the 3 locations – no paragraph closes </p> though just opens <p>, which could cause further rendering issues in HTML following the CF7 form on the page.

    I can’t see anything in your Form that might be causing this.

    I haven’t seen “extra paragraph and linebreak tags” in CF7 dropdown menus before, so I am unclear what is causing this.

    It may be a bug in Contact Form Select and Select* dropdown menus.

    That’s just it. I didn’t put those paragraph tags in. CF7 is doing that. I didn’t put the line break tags either.

    I also just had I look at a couple of my sites with CF7 dropdown menus and they definately do not have any “extra paragraph and linebreak tags” in there.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Contact Form 7 doesn’t insert such extra paragraph or linebreak tags.

    I often see this kind of trouble on this forum. As I commented before, try switching theme to the default one then you’ll see it resolved. If not, try deactivating all other plugins.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Get rid extra and tags in form code output’ is closed to new replies.