Single row layout messed up after update to 5.7

  • Resolved Ashutosh

    (@ashubetta)


    1 year, 11 months ago

    I had created a single row contact form where three fields and the submit button would all be on the same row. I used CSS flex to achieve this and it worked fine till 5.6.4. The layout is totally messed up after update to 5.7 and doesn’t work.

    Contact form code:

    <div class = "cf7-single-row-flex">
	<label class = "cf7-fi">[text* your-name placeholder "Name"]</label>
	<label class = "cf7-fi">[email* your-email placeholder "Email address"]</label>
	<label class = "cf7-fi">[tel your-phone placeholder "Phone no."]</label>
	<div class = "cf7-fi-submit">[submit "Contact Me"]</div>
</div>

    CSS code:

    .cf7-single-row-flex
{
	display: flex;
	column-gap: 10px;
}

.cf7-fi
{
	min-width: 0 !important;
	flex: 1.5;
}

.cf7-fi-submit
{
	flex: 1;
}

.cf7-fi-submit input
{
	width: 100%;
}

.wpcf7-spinner
{
	display: none;
}

    How it originally looked like: https://i.imgur.com/okPfhNs.png

    How it looks like on CF7 5.7: https://i.imgur.com/eikWMiZ.png

    For now, I have manually installed 5.6.4 and disabled auto updates.

Viewing 15 replies - 1 through 15 (of 16 total)

  • same with me. all input wrap into p tag and also create empty “p tag” with <br> tag

    Thread Starter Ashutosh

    (@ashubetta)

    Oh no, I looked through the forum and looks like many have this problem! ?? Thankfully I only have one site to manage, so it wasn’t too much work to switch back to 5.6.4. I will look in the threads for any fix. I feel major releases are usually best postponed until after the “general holiday season”.

    Same here. All forms became unusable. Rolling back to the previous version.

    same here, messed up all rows in forms, what a terrible update, they need to fix it pronto or will start using another solution.

    2 column set up here and its messed up everything and caused my business to lose money this morning.

    rollbacked to previous version.

    Yipp. The reason:
    All entries/lines are created/wrapped with an empty “p-tag” and a <br>-tag.

    Rollback on last version (in my case 5.6.4), is the quick/”temp” solution.

    Thanks for your quickly “FIX” …;)

    G, Mike

    • This reply was modified 1 year, 11 months ago by mike73. Reason: optimation

    Hello,

    Same here. The new update (5.7) broke every one of my form’s designs.

    This update is adding bogus empty html tags and ruining all forms styles. For some reason some websites don’t have the extra tags added in the output.

    Anyway, Always hate it when devs add extra junk to the html output. Or when they add new functions that are turned on by default.

    If you add new features that could break stuff, set them off by default and let users turn them on if they want/need to use them.

    • This reply was modified 1 year, 11 months ago by adriansanduws.

    Hi Guys I got all the errors on the last update surprised at this because the plugin is so popular but to fix the p tag thing use this: define( ‘WPCF7_AUTOP’, false ); in the config.php file and the error is line 34 in the plugins includes/block-editor/block.json to this: “editorScript”: “./index.js” these fixes should fix all the issues. Cheers

    Thanks @jameszxr but this will only temporary fix it as the next update will re-introduce the code again that breaks it?

    The devs should really put a fix in for this ASAP, or there are other solutions to swap to.

    @b2nmusic

    This fix is much like the remove wpautop. 

    Fortunately, it is easy to turn it off, add the following line to your wp-config.php file:

define( 'WPCF7_AUTOP', false );
You can also use a filter in your theme (functions.php) or your plugin:

add_filter('wpcf7_autop_or_not', '__return_false');
The last snippet does the some but it attach the code to the theme and not to the WP instance.

    Something went wrong in the last update. All inputs now are wrapped in the p tag. Because of this, the design of the forms is spoiled. Dear author, please make corrections ASAP. Adding an autop filter to hundreds of sites is not an option.

    Still no solution, no im not going to filter anything, they need to fix this ASAP or im going to start swapping over website by website to another forms plugin, as this is a load of %8%*!

    Same boat here. Fortunately only updated a couple of sites and have subsequently rolled back. Keen to hear if this will be patched/solved…?

    I believe this has been fixed, just need to wait for 5.7.1. Keep using 5.6.x until then.

    Thread Starter Ashutosh

    (@ashubetta)

    FIXED.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Single row layout messed up after update to 5.7’ is closed to new replies.