Set pricing decimals and remove symbol spacing
Want to achieve that clean pricing look in each of your option cards? Well that’s pretty easy, just use the below Javascript snippets below to help customise the look and feel of your data.
Remove all the decimals after the price
To remove all the decimals, or set them to how many you want, simply copy and paste the below Java Script into a new HTML field, and add it to your form. You can also add this Javascript directly into your theme or theme editor of choice.
<script>
gform.addFilter('gfec_choice_price', (priceText, selectedPrice, price, formId, fieldId) => {
let currencyConfig = JSON.parse(JSON.stringify(gf_global.gf_currency_config));
currencyConfig.symbol_padding = "";
currencyConfig.decimals = 0;
let currency = new Currency(currencyConfig);
priceText = currency.toMoney(price);
if (currencyConfig.symbol_left) {
priceText = priceText.replace(currencyConfig.symbol_left, `<span class="gfec-currency-symbol-left">${currencyConfig.symbol_left}</span>`);
}
if (currencyConfig.symbol_right) {
priceText = priceText.replace(currencyConfig.symbol_right, `<span class="gfec-currency-symbol-right">${currencyConfig.symbol_right}</span>`);
}
return priceText;
});
</script>Make the currency symbol smaller on your pricing field card options.
Just add the below CSS example to your form or theme editor to increase or decrease the font size of the currency symbol on each of your product choice option cards. You can also use the vertical-align CSS property to better position the element, relevant to the pricing.
span.gfec-price:first-letter {
font-size: 24px;
vertical-align: text-top;
}