[Resolved] CRED 1.9 (latest release) form legacy styling not working!

[Author]

Posts

[tinaH]

Please assign to Nigel ...

Just installed latest Toolset updates. (on a copy of my site ...)
Form legacy styling does not work.

Attaching images for my "old forms" and how they look after the update.

I did turn on legacy form styling option in CRED settings.

I have 54 post forms and 20 user forms, I do not want to have to rebuild them all to be able keep up with future versions of CRED. Do I have to go through them all just to add "output = bootstrap"?

Last update took my site down for over a month, I do appreciate that your intention to improve your products but it is not nice to not be able to trust the quality of your work. As it is now I get scared when you release new versions ...

Image comments:
Bootstrap buttons are displaying even if you haven't clicked "show bootstrap buttons", if you click on the button you get double button rows output.

The strange look on the "show popular" taxonomy button us due to CRED not outputting classes "btn btn-default" as standard in the latest release so one of my custom style sheets kicks in with the class "popular" that I didn't have any conflict with before.

Submit buttons don't output "btn btn-default"
and more ...

[Christian Cox]

Hi, Nigel is currently unavailable and Mohammed has the day off. If it's okay with you, I'll be glad to take a look at these issues and try to figure out what we can do.

Bootstrap buttons are displaying even if you haven't clicked "show bootstrap buttons", if you click on the button you get double button rows output.

I'm able to replicate this right out of the box with a clean installation of CRED. I'm reporting this as a bug, I can't imagine it's supposed to work like this.

The strange look on the "show popular" taxonomy button us due to CRED not outputting classes "btn btn-default"
Submit buttons don't output "btn btn-default"
When a new form is auto-generated, these classes will be added by default to the generated submit button:

[cred_field field='form_submit' value='Submit' urlparam='' class='btn btn-primary btn-lg']

By making the class attribute more customizable in the new version, I see that this has actually caused problems for existing forms. Your custom CSS relied on those classes, which are not present now. Unfortunately I think the best solution here is to add the classes you want into the submit button cred_field shortcode as shown above.

Is the "Show Popular" button something custom? Please copy + paste the code from your CRED form that renders this section of the form. I'll be glad to take a look.

[tinaH]

Hello Christian.
I'm happy to get help from you ????

Bootstrap buttons toolbar - great if you forward this

Show popular and Submit button.
Well, I am reporting this because I don't want to have to edit all my forms, I think that enabling the legacy setting should make the forms behave exactly as they did in previous version. As you mention this is causing problems for existing forms.

Show popular button - when the classes btn and btn-default aren't added by default another class from my custom style sheet takes over thus the strange look.

What about all other fields? Did you see my before/after images? ALL fields lost their bootstrap styling!!

[Christian Cox]

Well, I am reporting this because I don't want to have to edit all my forms, I think that enabling the legacy setting should make the forms behave exactly as they did in previous version.
I see what you mean, it appears that some backwards compatibility was lost in exchange for allowing more customization of specific field classes. Can I request login information for your staging site? I'll take a look and see if there is a better way to handle this update and retain more Bootstrap styles for your forms.

[tinaH]

1. The same problem applies to all Views "filtering fields".

2. Please also report that form buttons (submit etc) should never output class btn-lg as standard generated code. The sized of the button should be an option that the user decides. It is annoying to have to remove this.

3. My site is in Swedish, It might be hard to find your way around it.
Instead, I'm sending you a sample form code, that contains both standard and generic fields.
I'm also attaching images of how this form looked before update and after update.
You can play around with it until it looks as it should with legacy settings enabled.

4. Ignore the styling of the "popular" button. It is due to the fact that btn and btn-default is no longer outputted.

As you can see the form is based on standard CRED code.

[credform class='cred-form cred-keep-original']

	[cred_field field='form_messages' value='']

<div class="cred-group cred-group-Name row">
	<div class="cred-field cred-field-post_title col-sm-8">
		<label class="cred-label">
[wpml-string context='cred-form-Ny Yta-3684' name='Yta Name']Namn[/wpml-string]
</label>
		[cred_field field='post_title' post='space' value='' urlparam='']
	</div>

		<div class="cred-field cred-field-price col-sm-4">
			<label class="cred-label">
              [wpml-string context='cred-form-Ny Yta-3684' name='Pris']Pris <b>exklusive/utan</b> moms[/wpml-string]
</label>
			[cred_field field='price' post='space' value='' urlparam='']
		</div>
</div>

	<div class="cred-field cred-field-post_content">
		<label class="cred-label">
[wpml-string context='cred-form-Ny Yta-3684' name='Yta Description']Beskrivning[/wpml-string]
</label>
      [cred_generic_field field="post_content" post="space"  type="textarea" class="" urlparam=""]
{
"required":0,
"validate_format":0,
"persist":1,
"default":""
}
[/cred_generic_field]
	</div>


	<div class="cred-group cred-group-taxonomies">
		<div class="cred-taxonomy cred-taxonomy-size">
			<div class="cred-header"><h3>Storlek</h3></div>
			[cred_field field='size']
			<div class="cred-taxonomy-auxilliary cred-taxonomy-auxilliary-size_popular">
				[cred_field field='size_popular' taxonomy='size' type='show_popular']
			</div>
		</div>
		
	</div>

	<div class="cred-group cred-group-parents hidden">
		<div class="cred-field cred-field-_wpcf_belongs_event-plan_id">
			<label class="cred-label">
		[wpml-string context='cred-form-Ny Yta-3684' name='event-plan Parent']Tillhör planritning[/wpml-string]
		</label>
[cred_field field='_wpcf_belongs_event-plan_id' value='' order='date' ordering='desc' no_parent_text='No Parent']
		</div>
		
	</div>
<div>
[cred_field field='form_submit' value='Spara' urlparam='']<div role="button" class="btn btn-danger reload pull-right" onClick="window.location.reload()">Stäng</div>
</div>

[/credform]

[Christian Cox]

Hi, I'll be able to give you more effective help if I can inspect these forms live in the browser, where your custom CSS is being applied. With only the form contents, I don't have a true replication of your site and environment. I also want to be able to switch back and forth between CRED versions. For those reasons, a Duplicator clone is essential. I'll manage to find my way around in Swedish, so no worries there. I will need URLs to see the forms you have pictured so far in this ticket.

[Christian Cox]

Thanks Tina, I've been able to set up an old CRED version and a new CRED version so I can toggle back and forth to see how the markup is rendered differently and why your styles do not match up identically. Most of what I see is related to CSS class differences. I'm seeing several missing CSS classes that your code depends on. The classes are different depending on the field type, and it does not seem to be consistent. I've documented all the fields in the two linked forms you mentioned, so I've got a list of things to discuss with the team.

I'm reaching out to see if there is a good way to apply those missing classes globally so that you don't need to manually change form elements after an update. Please stand by and I will update you as soon as I have more information.

[tinaH]

The class differences are all bootstrap classes. My theme loads bootstrap. To my understanding it is the legacy setting that doesn't work correctly. It should generate the bootstrap classes it did before the update.
I cannot add these classes manually (well I can, but I don't want to have to do this manually throughout all forms and views when there is a legacy setting available).

And please please please, while your fixing everything else, make sure to remove the standard output of the class btn-lg for buttons.

[Christian Cox]

Hi Tina, I understand that you are in contact with Amir as well as our developers to resolve the style issues and retain all the appropriate classes / styles on your forms. Is there any additional communication I can help facilitate regarding those styles?

[tinaH]

I am in contact with a developer via email. I will update this ticket when all is resolved 🙂

[Christian Cox]

OK thanks 🙂

[tinaH]

This is resolved with latest update