Html Embed "+ fields" > upper case url issue

Hi Everyone,

I have an uppercase url problem. To dynamically link to a profile of a user I use an html embed as a button and add the url plus the “first name”-“last name”. This would be the correct structure, but since the CMS collection fields start with a capital letter, the url gets a 404.

Is there a way to add some java script into the html embed so it makes anything inside the link lowercase?

Example:

I have:
href=“https://www.freie-trauung.ch/trauredner/{first-name}-{last-name}

The result (e.g.): https://www.freie-trauung.ch/trauredner/Robert-Jackson

I need: https://www.freie-trauung.ch/trauredner/robert-jackson

Any help?

Would be great! Best,

Patrick


Here is my public share link: LINK
(how to access public share link)

1 Like

Hi Stan,

The following script should actually make an url inside an html embed “lowercase”. The url consists of webflow cmd fields. Somehow the script does not affect the fields. Is this something you know?

Thanks for some advice / or person thata can help.

Script (placed in page settings / custom code / footer):

window.addEventListener(‘load’, function () {

let Newbtn = document.querySelector(“a.btn-form”);
let TextToLower = Newbtn.getAttribute(“href”)
Newbtn.href = TextToLower.toLowerCase();

});

1 Like

Hey @AutumnLight!
Do you think you can help @illustregrafik with this one?

Hi @illustregrafik sorry for late response as I didn’t have time to check your response. I have never come across this issue as I presumed that links are forced to lowercase on WF build time. As you do not provide links to read-only and Live site it is hard to suggest where and what is causing the issue.

anyway here are simple examples.

CleanShot 2022-03-18 at 15.12.18

your code in embed should look something like

<script>
let url = document.querySelector(".btn").getAttribute("href").toLowerCase();
</script>
<a class="btn" href=`${url}`>Mehr</a>

but other solutions are welcomed :wink:

1 Like

@Stan that is the right approach but you made a mistake, you cannot use ${url} since this is not running in javascript and rather in HTML,
@illustregrafik
here is how you need to change your code based on @Stan code

<a class"btn" id="setHref">Mehr</a>
<script>
let url = document.querySelector(".btn").getAttribute("href").toLowerCase();
document.getElementById("setHref").setAttribute("href", url)
</script>

solved it! Ping me at more issues, my goal besides helping people is to increase my reputation within the community, but sadly I’m only tech savy and don’t have much in social skill terms.

1 Like

hi @AutumnLight I agree that I didn’t pay attention to HTML and only set basic principle. To solve problem in collection can be done with function like this:

  1. set anchor in your collection

  2. in page setting before body

<script>
  function toLowercase()  {
     let anchors = [...document.querySelectorAll(".btn-custom-link")]
     anchors.forEach(anchor => {
     let url = anchor.getAttribute("href")
     anchor.setAttribute("href", url.toLowerCase())
    })
  };
  
  toLowercase()

</script>

after click on anchor the result is

uri to lowercase

NOTE: name and surname in CMS starts with Capital letter

But still IMO the easiest way is to set name and surname in CMS as lowercase and do text transform only when element is rendered in DOM as e.g author name.