Define new CSS class for #fbuilder_1

Hello @graicifyd

Please, send me the link to the page where you have inserted the forms to check the styles you have defined in detail.

Best regards.

I have added link to the page to special site field of the 1st topic message.
The other link is to the homepage of that site.

This field is not indexed by search engines and not shown to unregistered users.

Hello @graicifyd

The preferred solution would be add “class” attributes to the forms’ shortcodes, to assign these class to the forms, for example:

[CP_CALCULATED_FIELDS id="1" class="form-a"]

or

[CP_CALCULATED_FIELDS id="1" class="form-b"]

And then you can customize the forms’ designs based on the new class names:

.form-a #fbuilder{
    background: #fff !important;
    padding: 5px 15px !important;
    border-top: 5px solid #10c0e7 !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.form-b #fbuilder{
    background: #ff00ff !important;
    padding: 5px 15px !important;
    border-top: 5px solid #10c0e7 !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

Best regards.

Thank you so much

The class defined in the shortcode is not working

In the shortcode I used [CP_CALCULATED_FIELDS id=”7″ class=”first”] while in the CSS I used

.first #fbuilder_1 {
	background: #fff; 
	padding: 5px 15px;
	border-top: 5px solid #10c0e7;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

but it didn’t work

Hello @graicifyd

You should use #fbuilder and not #fbuilder_1

Please, use the following style definition:

.first #fbuilder {
	background: #fff !important; 
	padding: 5px 15px !important;
	border-top: 5px solid #10c0e7 !important;
	border-bottom-left-radius: 5px !important;
	border-bottom-right-radius: 5px !important;
}

Best regards.

I tried that too, it’s not selecting the elements.

Hello @graicifyd

I can’t see the form where you are using the first class name.

Best regards.

This [ redundant link removed ]

[CP_CALCULATED_FIELDS id=”7″ class=”first”]

This is how I inserted the shortcode https://imgur.com/a/rrF42NS

Hello @graicifyd

Your form does not have assigned any class name. Please, look at the screenshot below:

Please, contact me through my private website to check your form in detail: Contact Us

Best regards.

Thank you, I found a way around it. I simply added the css for each calculator in the form setting instead of adding it in the customizer which will affect both calculators at the same time.

Thank you so much for your support, you are the best.