Streaming live at 10am (PST)

Math using CMS fields

Hello there,

I am creating a “Recipe” page using the CMS. I would like to do some very basic math and display the result as a value on the CMS item page.

My collection items have:

  • Prep time
  • Cook time

I would like to then add those two variables and display a “Total time” field.
I know I can just use a custom embed and add the two fields within it.
I guess my issue is that I don’t know the proper syntax to calculate the two and display the information on the page.

Any help is appreciated!


simply use custom fields pulled from your CMS inside your custom code embed. Have a look at this article (how to use dynamic embeds ony our webflow site).

Hope that helps.

Hey Anthony, I guess my question was more about the actual syntax. I wouldn’t know where to begin.

Would it be in JS, CSS or HTML?
Maybe stack overflow is a better place for this kind of question

Well I guess you could use a simple vanilla Javascript snipet like so:


// 🥑 on DOM loaded
document.addEventListener("DOMContentLoaded", event => {
  const element = document.getElementById("element");
  // getting the values of prep and cook time
  let prep = Number(document.getElementById("prep").value),
    cook = Number(document.getElementById("cook").value);

  const sum = (a, b) => a + b,
    result = sum(prep, cook);

  element.innerHTML = `${result} minutes`;
}); // end DOM listener

Webflow HTML embed:

<!--need to replace the values by whatever {{your cms field name}} are-->
<input type="hidden" id="prep" value="20">
<input type="hidden" id="cook" value="10">
<span id="element"><span>

Where instead of the actual integer values I used for example, you’d use the CMS field from Webflow I talked to you earlier.

Here is a quick codepen for you.


Thanks for this! I’ve since started a JS course and this is extremely helpful.
I love the addition of the little food emojis in the code btw :joy:

1 Like