Calculate anf Reset Button

Hi,

To reset the values from the form, you only should insert a button in the form, and select the “reset” option as the button type, and that is all. The same for insert the “calculate” button (for the “reset” and “calculate” buttons you don’t need to add any additional code).

If you don’t want that the equations be evaluated dynamically, you should press the “Form Settings” tab, and uncheck the attribute: “Eval dynamically the equations associated to the calculated fields”

Best regards.

How to align the two buttons? Side by side?

Hi,

You only should assign the special classname: column2 to both fields, through the attribute “Add Css Layout Keywords”

Best regards.

After I add a new css class keyword and do some css and I put this

.calbutton {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fe1a00′, endColorstr=’#ce0100′);
background-color:#fe1a00;
-webkit-border-top-left-radius:37px;
-moz-border-radius-topleft:37px;
border-top-left-radius:37px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:37px;
-moz-border-radius-bottomright:37px;
border-bottom-right-radius:37px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:italic;
height:45px;
line-height:45px;
width:96px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #b23e35;
}
.calbutton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ce0100′, endColorstr=’#fe1a00′);
background-color:#ce0100;
}.calbutton:active {
position:relative;
top:1px;
}

The present button is not change. In fact, is just create only a new rounded square instead replace the present button style

Its ok now

Hi,

Because you should define the styles like follow:

#fbuilder .calbutton input{}
#fbuilder .calbutton input:hover{}

The class name is applied to the <div> tag that contains the field, so, the selector should be to the button in the div tag with the class assigned.

Best regards.

Can’t still align the two buttons in the same row/line

Here’s my code

`.cp_cff_clean #fbuilder .resetbutton input[type=”reset”],
.cp_cff_clean #fbuilder .calbutton input[type=”button”]{
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fe1a00′, endColorstr=’#ce0100′);
background-color:#fe1a00;
-webkit-border-top-left-radius:26px;
-moz-border-radius-topleft:26px;
border-top-left-radius:26px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:26px;
-moz-border-radius-bottomright:26px;
border-bottom-right-radius:26px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:9px;
font-weight:bold;
font-style:italic;
height:27px;
width:91px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #b23e35;
line-height:10px;
overflow: hidden;
}
.cp_cff_clean #fbuilder .resetbutton input[type=”reset”]:hover,
.cp_cff_clean #fbuilder .calbutton input[type=”button”]:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ce0100′, endColorstr=’#fe1a00′);
background-color:#ce0100;
}
.cp_cff_clean #fbuilder .resetbutton input[type=”reset”]:active,
.cp_cff_clean #fbuilder .calbutton input[type=”button”]:active {
position:relative;
top:1px;
}

Hi,

Have you assigned the class name column2 to both button controls?

Remember you can assign more than one class to a control, separated by space characters.

Best regards.

Could you send me a link to the webpage to take a look, please?

Yes I have already assign a new class name. Here https://www.homecredit.ph/2177-2/

Hi,

I’ve checked your webpage and neither of buttons have assigned the class “column2”

Please, be sure to add the classname column2 in the “Add Css Layout Keywords” attribute of both controls. If you want assign multiple class names, separate them by space characters.

Best regards.

The two buttons have different classname like the reset button is resetbutton while the calculate button is calbutton.

What do you mean?

Hi,

Please, read the plugin’s documentation, in particular the following FAQ entry:

Q: Is there a way to format the form in a table structure (various fields in the same line) ?
A: Into the calculated form editor click a field and into its settings there is one field named “Add Css Layout Keywords”. Into that field you can put the name of a CSS class that will be applied to the field.

There are some pre-defined CSS classes to use align two, three or four fields into the same line. The CSS classes are named:

column2
column3
column4
For example if you want to put two fields into the same line then specify for both fields the class name “column2”. The above is valid for both the classic fields and the calculated fields.

Best regards.

I follow your instruc. same classname but still the two buttons is still not aligned

Hi,

Pay attention to the code generated:

<div class="fields calbutton" id="field_1-7"><input id="fieldname32_1" type="reset" value="Reset" class="field " onclick=""><span class="uh" style="display: none;"></span><div class="clearer"></div></div>
<div class="fields calbutton" id="field_1-8"><input id="fieldname33_1" type="button" value="Calculate" class="field " onclick=""><span class="uh" style="display: none;"></span><div class="clearer"></div></div>

The buttons have not assigned the column2 classname.

Could you send me the access to your WordPress to check the classname assignments, please?

Please, contact me in private through my support page:

https://wordpress.dwbooster.com/support

Best regards.