Boxes Beside Checkbox

Hello @amirrrmb

You can customize the controls appearance by entering your style definitions through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png).

For example, try with the following styles block:

#fbuilder .cff-checkbox-field input{display:none;}
#fbuilder .cff-checkbox-field input+span{
	display:inline-block;
	width:200px;
	height:200px;
	border:1px solid #ddd;
	border-radius:5px;
	padding:20px;
	margin:10px;
	text-align:center;
}
#fbuilder .cff-checkbox-field input:checked+span{border:3px solid #00C3FF;}

More information about the fields’ components by reading the following blog post:

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

If you need additional help customizing the form’s design, you should contact me directly through my private website: Click Here

Best regards.

I got that. I can style the whole form with CSS. Just a little question. for the checkboxes how can we add some descriptions to each of them? Can I use something besides the checkbox title?

And Also another question. After calculating the result does the plugin have the features to let the user go to the checkout with the details and prices?

Hello @amirrrmb

You must enter the description as part of the own choice’s text:

Text <i>description here</i>

Or the structure you prefer.

Best regards.

Hello @amirrrmb

The plugin includes its own mechanism to charge the calculated price. But, if you prefer to integrate the form with WooCommerce to use the WooCommerce cart, orders, and payment gateways, you must activate the “CFF – WooCommerce” add-on, distributed with the Developer and Platinum versions of the plugin, and integrate the form into a WooCommerce product. Please, read the following blog post:

https://cff.dwbooster.com/blog/2018/11/26/woocommerce

Best regards.