Problem Lightweight Grid Columns and Contact Form 7 in Sections

[Marcelo]

Hello Tom,
i use the plugin Lightweight Grid Columns with the plugin Contact Form 7 and it work well if you use Widgets, but if you use it in Sections the Lightweight Grid Columns shortcodes dont work well, you can see that in this print screen:

https://www.awesomescreenshot.com/image/2739406/a5e468bb7947d249f36ecbaa8ef1250c

In the top i use a section in the bottom i use a widget.

GeneratePress 1.4

GP Premium 1.4.2

[David]

Hola,
It looks like you’re using shortcodes in the Contact Form 7 form itself. That won’t work on a page. The Contact Form 7 form uses shortcodes itself, and it will only recognize Contact Form 7 shortcodes.

You could try using the column shortcodes before and after form on the page where the form is, but of course that won’t let you get columns inside the form.

Styling forms is always a pain, even for CSS geeks like me. 🙂

Dave

[Marcelo]

Ok, that is the soluction!
In the function.php page of the Generatepress Theme we need to add this code:

add_filter( 'wpcf7_form_elements', 'delicious_wpcf7_form_elements' );
 
function delicious_wpcf7_form_elements( $form ) {
$form = do_shortcode( $form );
return $form;
}

This permit shortcode in ContactForm 7.

[Leo]

Glad you found the solution and thanks for sharing!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marcelo]

Thank you Leo, iam proud of participate in this forum and help others if i can. Bye!

[David]

Nice job, Marcelo,
That’s a good workaround. I had seen some discussions of filtering output, but since most people here are not at that skill level, I didn’t recommend it. You’re at a higher level. 🙂

That could be reverse engineered, too. I’ve looked at output of that columns plugin (and others), and then used just a bit of HTML with those same classes in the CF7 form, and voila, instant columns, no filtering. 😉 What’s also interesting is that GeneratePress comes with a grid CSS file automatically, so the same can be done without any plugin if one takes note of those classes, grid-10, grid-30, grid-50, etc.

Dave

[Marcelo]

😳 Im am not a high level 🙂 , i found this code in some place in the Internet Monster.
The reverse engineered is a good solution, is most easy and intiuitive.

Thank you David.

[Author]

Posts