Background color of the form cell

Hello @pexel

Thank you very much for using our plugin.

The plugin includes the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png). It is a CSS editor with syntax highlighting and error checking to allow you to edit the appearance of every aspect of your form.

For example, to customize the background color of every input box, select tag and textarea in the form, you can enter a style definition similar to:

#fbuilder input,
#fbuilder select,
#fbuilder textarea{
background: green !important;
}

The !important; modifier increases the precedence of your CSS rules.

To vary the background of fields of a specific control, like calculated fields, you can modify the styles definition block as follows:

#fbuilder .cff-calculated-field input{
background: green !important;
}

But, if you want to customize the background color to only one field, or some specific fields, you can assign them a custom class name through their “Add CSS Layout Keywords” attributes (Ex. my-custom-field) and enter the styles’ definition below in the “Customize Form Designs” attribute in the “Form Settings” tab:

#fbuilder .my-custom-field input{
background: green !important;
}

Learn more about the form and fields components and how to customize their appearance by visiting the next blog post:

https://cff.dwbooster.com/blog/2020/01/12/form-design

Best regards.,

Thanks, our problem is solved.
So is something like this possible?

When the calculate button is pressed, “It will count down from 10 seconds without pressing the calculation result” will print the result at the end of the time.

In fact, the main logic of this is to extend the time of stay on the site..

I want to get an opinion from you

Hello @pexel

You are free to implement the behavior you need.

For example, you can insert an “HTML Content” in the form with the following tag as its content:

<div class="counter"></div>

Selects the “Button” option as the button’s type in its settings because you want to evaluate the equations after 10 seconds. And enter the following piece of code as its on-click event:

may_counter = 10; 
my_interval = setInterval(function(){
    jQuery('.counter').html(counter);
    counter = counter - 1;
    if(counter<0){
        clearInterval(my_interval);
        EVALEQUATIONS();
    }
}, 1000);

Best regards.

I understood the first part, I couldn’t understand the second part, can you show me with an example? I added it to the event section, but it did not react.

Hello @pexel

The on-click event displays a decreasing number in the tag inserted in the “HTML Content” field, and when it reaches zero, the code calls the EVALEQUATIONS(); operation to evaluate all form’s equations.

If you need a custom coding service to implement this behavior, you can contact us directly via the plugin website: Contact Us

Best regards.

As step 1, we created the HTML tag.

As the second step, we added the code you gave to the “onclick” part of the Calculate button.

But it didn’t work, is there something missing?
Thanks.

A truly exciting prospect. If this happens, we will do a great job.

Hello @pexel

Please, select the “Button” option as the button’s type, not the “Calculate” option.

To check your code in action, please, include the link to the page that contains the form.

Best regards.

A truly exciting prospect. If this happens, we will do a great job….

I shot a screen video for you.

• This reply was modified 1 year, 7 months ago by pexel.

Hello @pexel

I’m sorry, I detected the error cause. Please, replace the button on-click event code with the following one:

my_counter = 10; 
my_interval = setInterval(function(){
    jQuery('.counter').html(my_counter);
    my_counter = my_counter - 1;
    if(my_counter<0){
        clearInterval(my_interval);
        jQuery('.counter').html('');
        EVALEQUATIONS();
    }
}, 1000);

Best regards.

I changed it with the code you said. Still countdown not working?
Is it possible for you to test it with a sample if we are not a burden to you?
We did what you said one by one, we can shoot another video if you wish. We work locally.

Hello @pexel

Please, watch the following video:

https://resources.developers4web.com/cff/tmp/2023/04/25/video_o.mp4

The support service does not include the implementation of the users’ projects. If you need someone to implement your project, please, contact us via the plugin website.

Best regards.

You are super, thank you very much.

I’m doing exactly the same, it’s not working. ??

• This reply was modified 1 year, 7 months ago by pexel.

Hello @pexel

I’m sorry, but I cannot check the issue by watching a video.

Best regards.

How can I help you to solve the problem sir?