Workaround 1: Move pages with similar content and layout to the CMS

If you have multiple pages with similar content and layout, such as legal or policy pages, consider moving them to the CMS. The CMS pages do not count toward the page limit, so this can be a great way to free up some space for more important static pages. Plus, using the CMS allows you to update the content in one place and have it automatically updated across all pages that use that content.

Workaround 2: Delete old pages

If you have pages that are no longer relevant or useful, consider deleting them to make room for new pages. This can include old promotional or event pages, or pages that are no longer necessary for your site's structure.

Workaround 2: Delete old pages

If you need more than 100 pages and none of the above solutions work for you, you can consider using reverse proxies. The idea in this case is to create an additional Webflow project for the extra pages. Then, you can use a service such as Cloudflare Workers to create a reverse proxy so that when someone enters your-domain.com/whatever, the additional Webflow project is shown as if it’s actually under your domain. This allows you to have the additional pages you need without having to link to a separate domain or compromise your SEO.

The benefits and downsides of using reverse proxies

Using reverse proxies can be a powerful way to create additional pages while maintaining your domain authority. Some of the benefits of this solution include:

• You get the additional pages you need without having to compromise your site's structure or content.
• You don’t have to link those additional pages with a separate domain, which can negatively impact your SEO.
  
• It can be better for SEO, as you can still maintain your domain authority.
  

However, there are some downsides to consider as well:

• You will need to set up an additional Webflow project to match the design of your original site, which can be time-consuming
• You will need coding knowledge to set up the reverse proxy using a service such as Cloudflare Workers.
  
• You will need a paid account plan due to the limit of projects while on a free plan.
  

Overall, using reverse proxies can be a powerful solution for websites that require more than 100 static pages. However, it's important to carefully weigh the benefits and downsides before deciding if it's the right solution for your particular needs.

2. Limit of characters for custom/embed code

Webflow provides users with the ability to add custom code to their website. However, there is a limit to the amount of code that can be added. Specifically, the limit for the header/footer code is 20,000 characters, while the limit for the embed component is 10,000 characters.

This can be a challenge for websites that require complex customizations, particularly for those with larger amounts of custom code. However, there are a few solutions available to overcome this limitation:

Workaround: Host your code on Github or Firebase for free

One solution to overcome the limitation on the amount of custom code you can add is to host your code on a separate platform, such as Github or Firebase. Both of these services offer free hosting options and can be used to host custom code for your website.

Here's a brief overview of how you can use Github or Firebase for hosting your code:

• Github: Github is a platform for hosting and sharing code, and it can be used to host your website's custom code. To get started, simply create a new repository and upload your code. You can then access your code using Github's raw file URL and add it to your Webflow site's header, footer, or pages.
• Firebase: Firebase is a platform for building and hosting web applications. It offers a free hosting plan, which can be used to host your website's custom code. To get started, simply create a new Firebase project, deploy your code, and use Firebase's hosting URL to add your code to your Webflow site.

By using Github or Firebase for hosting your custom code, you can overcome the character limits imposed by Webflow and add as much custom code as you need to your website.

Firebase website

3. Webflow maximum video size and quality reduction

In Webflow, there are several ways to upload videos to your project. You have the option to embed videos from Vimeo or YouTube, which is suitable for videos with sound. Alternatively, you can utilize the Background Video element for soundless videos, or embed your video using an iframe.

However, embedding videos from Vimeo or YouTube can introduce performance issues for your website and also comes with the third party branding. Additionally, using background videos comes with a limitation: a maximum file size of 30MB and automatic quality reduction by Webflow upon upload.

To avoid these issues, the most optimal approach is to use iframes.

Workaround: Hosting your video for free and embedding it on your website

One option for hosting your video is Dropbox, where you can upload your video and use the URL to embed it to the site. However, this solution is not entirely free.

A better alternative we've discovered is Cloudinary, a platform where you can host your videos and images for free. The added benefit is that Cloudinary allows a file size limit of 100MB, giving you more flexibility and control over the video's quality and performance.

Code embed in Webflow

Embedding Your Video URL Example

A better alternative we've discovered is Cloudinary, a platform where you can host your videos and images for free. The added benefit is that Cloudinary allows a file size limit of 100MB, giving you more flexibility and control over the video's quality and performance.

      
<video autoplay loop muted playsinline style="width: 100%; height: 100%; object-fit: cover; position: relative; top: 0; left: 0; z-index: -1;">
  <source src="replace with video URL" type="video/mp4">
</video>
      
    

To ensure that your video autoplays and works on mobile Safari, add this code to the page body:

      
<script>
  var mobilevideo = document.getElementsByTagName("video")[0];
  mobilevideo.setAttribute("playsinline", "");
  mobilevideo.setAttribute("muted", "");
</script>
      
    

By implementing this code, you can create a seamless video experience for your visitors with autoplay functionality and compatibility across different devices, including mobile Safari.

4. No file field (uploads) for Webflow forms, except for Business Hosting

By default, Webflow forms lack a file field that allows users to upload files directly. Unfortunately, to unlock this feature and enable file uploads in your Webflow forms, you would need to upgrade your hosting plan to Business or above. However, considering that the Business plan comes with a price tag of $39 per month, it might not be the most cost-effective option if file uploads are the only feature you require from that plan.

Workaround: Upload files to Webflow forms without a plan upgrade

Thankfully, there are alternative methods to allow users to upload files to Webflow forms without the need for a plan upgrade. By leveraging third-party tools, you can achieve this functionality and still remain on your current plan.

One such tool is Uploadcare, which we have utilized in the past. Uploadcare offers a free tier that provides 10,000 monthly operations, 5GB monthly traffic, and 1GB of storage. This makes it an excellent option for adding file upload capabilities to your Webflow forms without the need for an expensive upgrade.

Uploadcare website

Another alternative is Getform, which also offers a free plan with 50 form submissions per month and 100MB of storage. This can be a suitable solution for smaller-scale projects with occasional file uploads.

To integrate file upload with Uploadcare, you can follow this guide: Uploadcare Webflow Integration Guide.

For using Getform, you can follow this tutorial: Getform Webflow Tutorial.

By following these instructions, you can seamlessly incorporate file upload functionality into your Webflow forms without the need for a costly hosting plan upgrade.

5. Limited nested collections feature

The nested collections feature in Webflow allows you to place a collection inside another collection on static pages, enabling functionalities like displaying tags or categories on your blog page. While this seems like a fundamental aspect required by most blogs, Webflow imposes certain limitations.

Webflow does provide the nested collections feature, but it comes with some constraints:

• Nested collection items are limited to a maximum of 5 items.
• Only one nested collection list is allowed per page.

Workaround 1: Finsweet's CMS Nest

To overcome the limitations on nesting collections, you can opt for Finsweet's CMS Nest, which now offers two setup options to help you nest collections within collections seamlessly.

Finsweet's CMS Nest

Workaround 2: jQuery .load() function

If you seek an easy and lightweight solution to nest unlimited collections with unlimited collection items on any single and dynamic page, you can utilize a simple jQuery code snippet.

For the setup process, you can follow the steps outlined in this article: Nesting Multiple Collections in Webflow using jQuery .load().

By employing these workarounds, you can efficiently implement nested collections, bypassing Webflow's limitations and enhancing the functionality and appearance of your website.

Takeaway

As with any tool, Webflow has its limitations. However, thanks to its dedicated community and resourceful users, numerous solutions and workarounds have emerged to tackle these challenges. While this article has highlighted a few significant limitations, it's good to remember that there is a big Webflow community ready to offer support and guidance.

To explore the full list of feature availability and limits in Webflow, you can refer to this comprehensive resource: Webflow Community: Full List of Feature Availability and Limits.

Happy Webflowing!