Add words to end of calculation

It is possible to append a calculation field with text so it displays the values.

Ex: Field A x Field B = Field C and field C is a number field showing the result of the calculation. We want to add “Sq. Ft” after the calculation so the answer looks like “1,000 Sq. Ft” and not just “1,000”

How/Is this possible?

Take a look at this page:
https://chrishajer.com/calculator/

You can add this CSS to your theme (or child theme) stylesheet or via the Appearance Customizer (Appearance → Customize → Additional CSS):


div#field_118_4 .ginput_container input {
  margin-top: 10px;
}
div#field_118_4 .ginput_container:after {
  content: "Sq. Ft";
  font-size: 14px;
  color: black; 
  margin-left: 5px;
}

Result:

See also this article for additional information about placing CSS snippets: Where to Put Your Custom CSS - Gravity Forms Documentation

I used the pseudo element :after to put the “Sq. Ft” after the input. The form ID and field ID are specific to my form (form 118 and field 4) so you will need to adjust for your form. Also, you may need to adjust the appearance of the field under the Appearance tab in the form editor, to make it small, medium or large. Or, you could add additional CSS to give it a fixed width when it is rendered.

Let me know if you have any questions.

For a no-code solution, the plugin Advanced Number Field might also be helpful here.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.