How to remove span shell in contact form 7?

Question

I am using contact form 7 in a WordPress theme.

It currently returns span and input :

 <span class="wpcf7-form-control-wrap name"> <input type="text" name="name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name"> </span> 

But I only need input :

 <input type="text" name="name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name"> 

How to remove span wrapper?

Answer 1

I ran into the same problem and finally ended up using the wpcf7_form_elements filter to remove the <span> with a regex. You can, for example, copy this code into your functions.php file. Here I am passing an anonymous function as a callback, so be sure to use PHP> = 5.3.

 add_filter('wpcf7_form_elements', function($content) { $content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content); return $content; }); 

Answer 2

You can remove the span shell with jQuery:

 $("#name").unwrap(); 

It will remove the input parent, so in this case it will remove the span. Please note that after deleting a range, some Contact Form 7 functions may not work correctly. For example, verification may not work.

 $("button").click(function(){ $("#name").unwrap(); }); 

 span { background-color: #333; padding: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="wpcf7-form-control-wrap name"> <input type="text" name="name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name" aria-required="true" aria-invalid="false"> </span> <button>Remove span</button> 

Answer 3

I tried similar things the other day, and many people mentioned that Regex is not the right way to change HTML / remove tags, etc., and that sounds logical .

So I selected DOMDocument and found the following solution:

 add_filter('wpcf7_form_elements', function( $content ) { $dom = new DOMDocument(); $dom->preserveWhiteSpace = false; $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); $xpath = new DomXPath($dom); $spans = $xpath->query("//span[contains(@class, 'wpcf7-form-control-wrap')]" ); foreach ( $spans as $span ) : $children = $span->firstChild; $span->parentNode->replaceChild( $children, $span ); endforeach; return $dom->saveHTML(); }); 

EDIT: now I also added some html / text to my form, and the first title element was not properly packaged after I used the DOMDocument class. It started on the first line and ended at the very end of the form. so I wrapped my entire form in a div, which caused the markup to return correctly again.

Answer 4

Starting with version 4.9 of WPCF7, adaptation of the answer above so as not to lose error messages:

First of all, in the editor on the CMS, wrap your input field and any other elements that you want to group, for example:

 <span class="wpcf7-form-control-wrap your-name">{field codes, etc, here}</span> 

Note that you will need to use the class "wpcf7-form-control-wrap" and the class corresponding to your field name.

Then use this regex code in functions.php . Adaptation may be required for your specific needs.

 add_filter('wpcf7_form_elements', function($content) { preg_match_all('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', $content,$matches); foreach($matches[2] as $match): $content = str_replace(trim($match),trim(preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $match)),$content); endforeach; return $content; }); 

This will split the span tag around the input field, leaving your new span tag intact. The effect is to essentially move the span tag only from the input field to be around any elements you want to wrap.

The reason for this is that the code for submitting the form, unfortunately, is very hardcoded. To have complete freedom over the structure of your HTML, you need to either:

• Change the rest-api.php code around line 295 to change the value of "in" to something less specific. Naturally, this is not a recommended route, although one that gives you complete freedom to structure your content as you wish. It will be overwritten by plugin updates.

   foreach ( (array) $result['invalid_fields'] as $name => $field ) { $invalid_fields[] = array( 'into' => 'span.wpcf7-form-control-wrap.' . sanitize_html_class( $name ), 'message' => $field['reason'], 'idref' => $field['idref'], ); } 

• Click on wpcf7: invalid event and run your own result verification code. Needless to say, this duplicates most of the work that the plugin already does for you when accepting (so far) the use of the span tag with the class "wpcf7-form-control-wrap" in the manner described above preserves all the functionality of the plugin, canceling one of the most annoying hard plugin encodings.

Answer 5

In addition to the Guicara php code, the following javascript code may receive the error message text:

 document.addEventListener('wpcf7invalid',function(e){ if ('validation_failed' === e.detail.apiResponse.status){ $.each(e.detail.apiResponse.invalidFields,function(i,el){ console.log('this is error response and form object',el.message, $('#'+el.idref)); }); } });