How can I embed a custom form that contains HTML, js, and CSS on my site in Webflow due to the 10,000 characters limit in the custom code?

Published on
September 22, 2023

If you have a custom form that contains HTML, JavaScript, and CSS and you want to embed it on your Webflow site, you may face a challenge due to the 10,000 character limit in the custom code field. However, there are a few workarounds and alternative methods you can use to achieve your goal:

  1. Host the form externally: One option is to host the form on a separate server or hosting platform that allows you to add custom code without any character limits. You can then use an iframe to embed the form on your Webflow site. This way, you can keep your form separate from your Webflow project, and it won't be subject to any code length restrictions.

  2. Use a form builder service: Another approach is to use a third-party form builder service that allows you to create custom forms and provides you with an embed code. Many form builders, such as Typeform, JotForm, or Google Forms, generate an embed code that you can paste into an HTML embed element in your Webflow project.

  3. Split your code into multiple parts: If possible, you can divide your custom form's HTML, JavaScript, and CSS into smaller parts and embed them separately within Webflow's custom code fields. This way, you can distribute the code across various elements or sections of your Webflow project, avoiding the character limit for a single code block.

  4. Use external files and link them: Instead of embedding the entire code directly, you can host your HTML, CSS, and JavaScript files externally. Upload these files to a separate hosting platform or use a service like GitHub, and then link to those files in the custom code section of your Webflow project. This approach allows you to keep your code organized, as well as bypass the character limit.

These methods should help you embed your custom form on your Webflow site, even though it has exceeded the 10,000 character limit in the custom code field. Remember to test the form after embedding it to ensure that it functions as expected.

Additional Questions:

  1. How do I add an external form to my Webflow site?
  2. What are some popular third-party form builder services I can use with Webflow?
  3. Can I split my custom code across multiple code blocks in Webflow?