What are some potential workarounds for the issue of Webflow automatically adding "http://" at the beginning of a URL scheme in a CMS collection link?

Published on
September 22, 2023

When using Webflow's CMS collection, you might encounter the issue of Webflow automatically adding "http://" at the beginning of a URL scheme for a link. This can lead to broken links or incorrect redirections. Fortunately, there are a few workarounds you can use to address this problem:

  1. Manually remove "http://": One way to handle this issue is to manually remove the "http://" from the link field in the CMS collection. This can be done by editing the URL field and removing the protocol before saving the changes. However, this approach can be time-consuming if you have a large number of links to modify.

  2. Use a Text Field: Instead of using a URL field in the CMS collection, you can utilize a Text Field. By using this field type, Webflow won't automatically add the "http://" to the link. However, keep in mind that it won't validate the format of the entered URL like it does with the URL field, so you may need to ensure correct formatting manually.

  3. Custom Code: Another workaround involves using custom code to alter the behavior of the link. You can add custom code through the <head> tag or by using Webflow's "Custom Code" section in the project settings. With custom code, you can overwrite the default behavior of Webflow and prevent the automatic addition of the "http://" when rendering the link.

<script>  $(document).ready(function() {    $('.my-link').each(function() {      var originalLink = $(this).attr('href');      var modifiedLink = originalLink.replace(/^https?:\/\//i, '');      $(this).attr('href', modifiedLink);    });  });</script>

Replace .my-link with the appropriate class or ID of the link element in your CMS collection.

These workarounds should help you resolve the issue of Webflow automatically adding "http://" at the beginning of a URL scheme in a CMS collection link. By using manual modification, utilizing a different field type, or implementing custom code, you can regain control over the link formatting in your Webflow project.

Additional Questions:

  1. How can I prevent Webflow from automatically adding "http://" to my links in a CMS collection?
  2. What are some common issues related to link formatting in Webflow's CMS collection?
  3. Can I use custom code to modify the behavior of link elements in Webflow?