Style and Form

Hello @klingbeil

Please, enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png):

.cff-form{min-height:570px;}

Best regards.

Sorry for posting on the wrong topic. Can you explain with an example for the reset button?
how exactly can i use theme styles for calculate button and reset button. thanks a lot

Hello @klingbeil

I described the process for the reset buttons in a previous entry. The calculate buttons have type="button" but they have assigned the calculate-button class name.

So, you want customize their appearance via CSS by using the #fbuilder .calculate-button selector and entering the styles definition through the “Customize Form Design” attribute in the “Form Settings” tab, like:

#fbuilder .calculate-button{background-color: green !important; border:0 !important;}

Or, if you prefer to apply the class names at the runtime, as you did previously:

<script>
fbuilderjQuery(document).one('showHideDepEvent', function(){
fbuilderjQuery('#fbuilder input[type="text"]').addClass('wpcf7-form-control wpcf7-text eduvibe-contact-form-field');

fbuilderjQuery('#fbuilder input[type="button"]').addClass('wpcf7-form-control has-spinner wpcf7-submit eduvibe-button-with-icon');

fbuilderjQuery('#fbuilder input[type="reset"]').addClass('wpcf7-form-control has-spinner wpcf7-submit eduvibe-button-with-icon');

fbuilderjQuery('#fbuilder .calculate-button').addClass('wpcf7-form-control has-spinner wpcf7-submit eduvibe-button-with-icon');
});
</script>

Best regards.

Thank you for solving both our CLS issue and our style button issue. I am fascinated with this plugin more and more every day.

Thank you very much.

Best regards.