How do I put an SMS link in a collection list?

[candescent (Melissa Taylor)]

If I add a link field to my collection, and try to input “SMS:+1cellnumber” I get an error and cannot save my item. I hope that these screen shots of an added “Jane Doe” will help you understand how I am trying to create an SMS texting link so that users are able to click on the text bubble on the webpage I’ve populated with my collection items and send a text to the person at their mobile number. Ideally, I could somehow use the mobile number, which I already have populated in each item in my collection, but I was willing to input it again as an html link, but Webflow won’t let me.

Image of error I receive when I try to insert “SMS:+1cellnumber” as a link in my collection item:

Image of collection used on webpage:

If I insert a linkblock on the page and populate it myslef on the page, it accepts my html code and works to open up a user’s texting app, but unfortunately it is of course populated with whatever static number I input on EVERY person’s text bubble link.

I would rather not share my link to this password protected page as it has my client’s private group contact information.

---

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

[memetican (Michael Wells)]

Hi Melissa,

I’d probably do this;

• Create the SMS link as another CMS bound link, to a phone field, so that it generates a standard tel: link.
• Add a custom attribute to that SMS link element, of e.g. sms=yes for easy identification.
• On page load have a small piece of custom script look for those, and change the tel to sms:.
• Make sure the element is only visible in mobile views, since most PCs probably won’t handle an sms: link.

The script would go in the </body> custom code section and look something like this;

$(function() {

  $("[sms]").each(function() {
    $(this).attr("href",
      $(this).attr("href").replace("tel:", "sms:")
    );
  });
  
});

[candescent (Melissa Taylor)]

@memetican

• Create the SMS link as another CMS bound link, to a phone file, so that it generates a standard tel: link.
• Add a custom attribute to that SMS link element, of e.g. sms=yes for easy identification.
• On page load have a small piece of custom script look for those, and change the tel to sms:.
• Make sure the element is only visible in mobile views, since most PCs probably won’t handle an sms: link.

The script would go in the </body> custom code section and look something like this;

Good idea!
Thank you!