Webflow CMS Collection Limit Issue

Design help CMS
1

Hi,

I have encountered an issue wherein I want to develop approximately 300 calculators on a CMS template page. However, since each calculator’s form fields differ (which also includes radio buttons coming from different CMS collections), I have run out of the limit for adding more Collection list wrappers on the template page.

I could not add the calculators to static pages as the website has 4+ languages, and I want the calculators to be visible only in one language.

Can anybody help me find a workaround for this issue?

Thanks in advance!

2

@bhavyarao

Webflow’s Collection List Wrapper limit (20 per page) combined with multilingual and dynamic content like calculators makes it tough.

Use Webflow CMS + Custom JavaScript with JSON Configuration

Instead of trying to build every calculator’s fields through Webflow CMS structure, use the CMS to:

  • Create one CMS item per calculator
  • Store a JSON config (e.g. in a plain text field) that defines the calculator logic and fields

Then, on the template page:

  1. Use one dynamic Embed to render the calculator form via JavaScript.
  2. Parse the JSON from the CMS and generate the form dynamically with JS.
  3. Use a shared JavaScript logic to compute the result for each calculator.
3

Where exactly is the problem you’re facing?
It’s not clear why you’re trying to create a collection list for each calculator, are the calculators extremely different from each other?

If so, I’d probably go;

  • CMS with a rich text field
  • One record per calculator
  • Store the HTML for your form, and the JS for you calculator inside of an Embed in the rich text
  • Bind it to a Rich text element

From there you can try factoring out custom code… especially any reusable JS function or UX elements from your forms.

4

Thanks for your reply.

Yes, each calculator are different from each other and hence need a dedicated page.

Are you suggesting to use form html and css inside a rich text field?

5

Thanks, I will give this a try.

6

That’s the obvious way to make each of them different and support your 300 item-specific UI’s.

If you wanted to build your calculator UIs in the designer you could build them on separate hidden pages and then fetch the HTML with script. If they’re built with the calculator code inside of the form as an embed, then the code could potentially be retrieved and executed dynamically as well. Build a proof of concept first to ensure you don’t run into any eval() security problems with the browsers you’re targeting.

Another thing you might look at is Finsweet’s “powerful rich text” attribute which has a component feature. You can embed a chunk of HTML from another page. It might do some or all of the fetch work you need.

That way you can have e.g. /calcs/page1 20 calculators the /calcs/page2 another 20, etc.

7

Thanks a lot for your reply and support.

I could not find Finsweet’s “powerful rich text” attribute. Do you mean Inject - Add Components to Rich Text or other pages in Webflow one?

If I design all my calculators in a hidden page, I will have to get its HTML code and then paste it in the rich text. Is that the correct method?

8

If you google it, it’s the first result.
They’ve release Attributes v2 last week and are renaming everything it seems.