Forminator Update Made Forms Align/Format Incorrectly

Update.. I just rolled the plugin back to the previous version I had on the site two days ago, and the formatting is now fixed. Thanks guys.

Hi @stumur,

Glad to hear you have managed to figure a workaround. Is there any screenshot you could share regarding the alignment issue so that we could have a better idea?

Also, if possible please share the form export, so that we could test in the latest version and see what exactly is causing it. Please check the following doc on how to export a form:
https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

You can share the export file via Google Drive, Dropbox or any such cloud services in the next reply so that we could check further.

Kind Regads,
Nithin

Hi Nithin,

This is still a bug for me for some reason.. could I please get you fabulous lads to diagnose what’s going on, so I am able to update successfully like I always used to? Every time I upgrade to 1.14.12.1 (I think I was on 1.14.10.1 ?), the formatting, colours and fonts all go awry on this home page form I linked to above. Here are the dropbox links to my three screenshots, in chronological oder, with explanations of what’s occuring, and then the exported code from the perfect file pictured in screenshot #1. I hope you can assist asap?:

1. https://www.dropbox.com/s/zri779qlug8dkir/Screen%20Shot%202021-07-28%20at%203.10.35%20PM.png?dl=0

2. https://www.dropbox.com/s/oac5il7xsv4qtqo/Screen%20Shot%202021-07-28%20at%203.20.58%20PM.png?dl=0

3. https://www.dropbox.com/s/3t3jy9l15gg533m/Screen%20Shot%202021-07-28%20at%203.26.36%20PM.png?dl=0

Exported Perfect File: https://www.dropbox.com/s/v2g4vkz69wwni29/Exported%20Code%20From%20Perfect%20Form.rtf?dl=0

Thank you,
Stu.

Hi @stumur,

Thanks for providing further details. Could you please share the form export as a file? It seems like you have copied the content of the export inside a .rtf file which I’m afraid doesn’t help much when we try to copy due to copied content loses its format. I did try to format export but it doesn’t help much.

If you could upload the downloaded form export file directly to Dropbox instead of copying the content of the export into another file then it would be helpful in troubleshooting the issue further.

Looking forward to your response.

Best Regards,
Nithin

Sorry mate – I’ll do it now. By the way, do you need this latest Forminator update 1.14.12.1 to be installed on my site to diagnose this, or can I just leave it sat on 1.14.10.1 while you do your thing? I can do either, but if you don’t need it, I’ll just leave it on 1.14.10.1 for now, cos it displays correctly? Just let me know.. either way, here’s the exported file:

https://www.dropbox.com/s/vr7u13og0gu5zhs/forminator-check-artists-availability-form-export%20%284%29.txt?dl=0

Hello @stumur,

We were able to replicate the same on our end using the latest version of Forminator and we have now sent this to the SLs team to check the same further and to see if there can be a quick fix for the same.

We would be getting back to you with an update once the SLS team has looked into it. I appreciate your patience and cooperation here.

Thank you,
Prathamesh Palve

Thanks mate, great. Did you need the custom CSS code I’ve been using on this form? If so, Dropbox again? Or just paste here?:

.forminator-custom-form #submit {background: none; border: none; box-shadow: none;}

/** Desktop CSS **/
@media screen and (min-width: 768px){
#forminator-module-1076{
display: flex;
justify-content: space-between;
}

.forminator-datepicker{
width: -webkit-fill-available !important;
}

#forminator-module-1076 #address-1 input{
margin-left: 0 !important;
width: -webkit-fill-available !important;
}

#forminator-module-1076 .forminator-col{
width:240px !important;
}

#forminator-module-1076 .forminator-error-message{
margin-left: 0 !important;
}

}

#forminator-module-1076 input,
#forminator-module-1076 button {
max-width:440px;
}

#forminator-module-1076 button {
background:#C00000;
margin-top:0px!important;
}

#forminator-module-1076 #submit {
margin-top:20px;
height:35px!important;
margin-left:91px;
}

• This reply was modified 3 years, 4 months ago by stumur.
• This reply was modified 3 years, 4 months ago by stumur.
• This reply was modified 3 years, 4 months ago by stumur.

Just checking if there are any developments on this yet, guys?

Hello @stumur,

We deeply checked this again on multiple themes to check if this could be further replicated and we did not notice any issues with the colours and the fonts.

We did notice an issue with the placement of the (YOUR EVENT LOCATION? *) field in the form which looked to be distorted. This is happening due to the font size and the (*) Required sign icon beside the text. We tried making a small addition to the CSS and that worked. Here is the added CSS:

label.forminator-label {
    font-size: 11px !important;
}

To check the issues with the colours and fonts, we did make tests with all the default themes and a few more popular themes to see if the same can be replicated but we could not replicate the change of colours and fonts.

To check if there is a happening due to a theme or a plugin, could you please export this to a local site with the default theme and just the forminator plugin and check if the colours and fonts are affected?

Here is how you can install the WordPress locally:

Installing WordPress on your own Computer

Do let us know how that works for you.

Thank you,
Prathamesh Palve

Thanks Prathamesh, but I haven’t changed anything on this form for about a year, so it’s been through many of your updates with never an issue – I always update when a new version is available. It’s only this latest 1.14.12.1 update that’s wrecked the form (actually, to be specific, it was the 1.14.11 update when it first went crazy – but it’s displaying exactly the same errors on 1.14.12.1 currently too, so I’ve left it on 1.14.10.1 now until it’s resolved).

Not only are the elements misaligned, but all the form customisations (colours, fonts, sizes, background colours etc) are all completely incorrect now.. the form resembles nothing of the previous one – as per the screenshots I included. Are all my customisations likely to be lost going forward, if I update the plugin at all?

Hi @stumur,

Not only are the elements misaligned, but all the form customisations (colours, fonts, sizes, background colours etc) are all completely incorrect now..

I gave a closer look at the export file and unfortunately, this is more of a site-specific issue and a conflict. Most probably a conflict with your theme stylesheet.

Was the theme updated recently? The latest update of Forminator is causing the styles of the fields in Forminator to get overridden via the theme.

It seems like the website is no longer loading, so we weren’t able to check which theme you had. Either a theme or another plugin stylesheet is what’s overriding the Forminator field style and hence the issue.

Could you switch to a default WP theme like Twenty Twenty One and then see whether the fields load correctly? This should help in ruling out if it’s the themes that are overriding the CSS or not. If switching to a default WP Theme still causes the same issue then please do check how the form loads if you deactivate all the plugins except forminator.

Are all my customisations likely to be lost going forward, if I update the plugin at all?

It’s tough to say at the moment, without inspecting the page URL where you had the issue. At the moment, the site isn’t loading too.

Maybe you could share the page URL by updating the plugin so that we could better analyse and see what was causing it and see if there is any CSS that could be shared to fix it.

Looking forward to your response.

Kind Regards,
Nithin

Thanks Nithin. Mine is a site built on the Avada theme. I’m not sure why you found the site to not be loading.. it’s been up constantly, so perhaps the server was down momentarily when you checked? Anyway, here’s what I’ve done today:

I activated the fully updated Twenty Twenty-One theme to replace my Avada theme completely. I then loaded the Forminator form in question – it displays with exactly the same errors in this new theme. This is when I have either Forminator 1.14.11, or 1.14.12.1 loaded. But if I roll Forminator back to 1.14.10.1 – it displays perfectly, regardless of which WordPress theme I use. I also disabled all of the plugins except for Forminator while doing this. I also removed all of my site-wide CSS to do it.

Doesn’t this mean the error lies with Forminator 1.14.11 and 1.14.12.1?

Hi @stumur

On Forminator 1.14.11 we modified the way the CSS loads, it is now from an external file so it could be related.

About the website, the issue was the www I was able to access the website after removing the www.

However, since the Form looks fine I guess it is loading on a not updated version, correct?

If so, could you upgrade the plugin back and let us know so we can take a closer look?

Best Regards
Patrick Freitas

Thanks mate. Yes, of course. I’ve loaded the latest version 1.14.12.1 in now, so you can see it. Please let me know what you think..? Thanks again.

Hi @stumur

Thanks for response!

Are you making some changes to the site (e.g. changed/changing domain)? I wanted to visit the URL shared in your initial post to see the form on your site (in order to check it again) but all I’m getting is the “DNS_PROBE_FINISHED_NXDOMAIN” error.

Are you aware of it and maybe I should use different URL?

Kind regards,
Adam