Remove Span elements from Contact form 7 (17 posts)

  1. godsdead
    Posted 5 years ago #

    I love this simple contact form 7, although it puts in loads of un-needed html, which is conflicting and breaking my designs.

    How can i stop contact form 7 from wrapping inputs in <span>, i can see adding code to my wp-config to disable the line breaks, but nothing to get rid of this annoying SPAN!

    <br />
                    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-text wpcf7-validates-as-required" size="40" /></span><br />

    it would be absolutely stupid if i have to let extra un-nessasary code bloat the fronted, and have to re-design AROUND it.

  2. Joey Kudish
    Posted 5 years ago #

    You would have to modify the plugin itself and remove it from the functions that output the extra html...

  3. godsdead
    Posted 5 years ago #

    Balls, that means i wouldn't be able to update the plugin!
    Looks like im going to have to design around it, unless you can recommend a better plugin?

  4. Joey Kudish
    Posted 5 years ago #

    For sure that wouldn't be great for updates.

    I personally use Gravity Forms for all the sites that I build - http://jkudi.sh/gravityf, it's by far the best forms plugin and one of the best all-around plugins ever built for WordPress. It does have a price tag, but a well worth one. Note: I am not affiliated with them in any ways, just a user and fan of their product.

    There's also Grunion which is made by Automattic and a few of the core developers of WordPress. http://wordpress.org/extend/plugins/grunion-contact-form/

    Good luck

  5. kato
    Posted 5 years ago #

    Grunion is not customizable.
    Gravity forms costs money.
    Contact Form 7 adds html that can only be removed by hacking the php files. Grr.

    Memo to self - do not upgrade Contact Forms 7.

    in wp-contact / plugins / contact-form-7 / text.php, change line 93 from:

    $html = '<span class="wpcf7-form-control-wrap ' . $name . '">' . $html . $validation_error . '</span>';


    $html = $html . $validation_error;

    in textarea.php change line 92 from:

    $html = '<span class="wpcf7-form-control-wrap ' . $name . '">' . $html . $validation_error . '</span>';


    $html = $html . $validation_error;

  6. kato
    Posted 5 years ago #

    P.S. - blank fields will no longer be automatically highlighted upon form validation fail. I consider this not a big deal.

    Reminder to self: don't upgrade Contact Form 7.

  7. dashaluna
    Posted 5 years ago #

    It would be great if there was a hook into the output HTML that would allow to use default Contact Form 7 HTML or strip out all additional HTML that's added.

    Is there a way to use a WP standard hook to hook into the Contact Form 7 HTML structure and strip out additional HTML?


  8. kato
    Posted 5 years ago #

    Not that I know of.

    I understand the developer needs some way to identify the bad fields on validation. But the more correct way to do it would be to attach a class or ID rather than adding new html tags. i.e. input class="validate-name" or something.

    Normally adding the spans don't present any problem, but in my case, I wanted to use jquery sliding labels with my form and the span tags broke the script. It's working now. But not in an ideal way.

  9. kato
    Posted 5 years ago #

    For the record, the folder is:


    must've been high when i wrote that.

    Coming back to this post as a refresher, because today I'm doing it to quiz.php also...

  10. Pandonym
    Posted 5 years ago #

    Hey kato,

    thanks for your work. I tried the same thing, but without any success :)

    When I change the text.php and textarea.php as described, then my website get blank. Nothing works anymore. Any hint?
    When I reset the plugin (backup files) then everything is ok.

  11. kato
    Posted 5 years ago #

    I'm using Version 2.4.6. Are you using the same?

    Could be you're missing the semi-colon at the end? PHP loses its brain when it can't find a statement end.

    If you're using 2.4.6 you can download my modified files and overwrite the ones in: wp-content/plugins/contact-form-7/modules

    Let me know if it works!

  12. Pandonym
    Posted 5 years ago #

    Yes, I am using the same version.

    Semicolon is at the end of the line. Unfortunately your files didn't change something. Pity!

    Anyway I thank you ;-)

  13. kato
    Posted 5 years ago #

    Whoops. I checked the files and realized I grabbed them from the wrong WP install (unmodified.)

    Here are the corrected files if you're willing to try again.

    Sorry 'bout that.

  14. Pandonym
    Posted 5 years ago #


    today I set the report level from php to a higher level and get these error codes:

    Fatal error: Cannot redeclare wpcf7_quiz_shortcode_handler() (previously declared in [...]/wp-content/plugins/contact-form-7/modules/backup_quiz.php:10) in [...]/wp-content/plugins/contact-form-7/modules/quiz.php on line 88 
    Fatal error: Cannot redeclare wpcf7_textarea_shortcode_handler() (previously declared in [...]/wp-content/plugins/contact-form-7/modules/backup_textarea.php:11) in [...]/wp-content/plugins/contact-form-7/modules/textarea.php on line 95 
    Fatal error: Cannot redeclare wpcf7_text_shortcode_handler() (previously declared in [...]/wp-content/plugins/contact-form-7/modules/backup_text.php:13) in [...]/wp-content/plugins/contact-form-7/modules/text.php on line 96

    I just renamed my old files as backup_*.

    Now I deleted the original files and uploaded your corrected files and it works!

    Thank you very much!

  15. Steph Wells
    Posted 4 years ago #

    You might want to try out Formidable. The HTML is customizable, and the forms are easier to build than Contact Form 7. FYI, I am the main developer.

  16. Pandonym
    Posted 4 years ago #

    I still had some problems till today!

    I tested many other plugins and form-templates. None of them were like I wanted. One template didn't allow a https-connection, I don't know why. So I get back to contact form 7 plugin.

    Now I have my problems solved. My theme has a shortcode-function "[noformat]" which removes unwanted formatting of WordPress and co.
    Then I get a table inside my CF7 inside the formbuilder (I hope you will understand me).

    For example:
    [Code moderated as per the Forum Rules. Please use the pastebin]

    And so on...

    Maybe this will some other people. I was so annoyed with all that stuff, but now I am happy :D

    Thank you, but I don't want to try out further plugins - I hope you know why ;-)


  17. Andrew Tegenkamp
    Posted 4 years ago #

    My issue was simply adding a new line inside my code and that was turning into a break tag in the output (much like WP auto format). The span tags on the current version do not cause a problem for me when putting the contact form in a table and having fields next to each other as long as I keep the fields on the same row of source code so you could try upgrading but YMMV.

Topic Closed

This topic has been closed to new replies.

About this Topic