Linking to SMS / Want to format body text

Design help Custom code
1

Hi all, I’ve created a button on the mobile view of a website that allows users to click to request a quote via text. I want it to include some instructions in the SMS body, to ask a few key questions to get the quote.

I’m currently using the Link Block on the button, with the following text:

sms:+13105551212?body=Hi! Paying cash or using insurance? Year: Make: Model: VIN:

It works fine, but when the SMS app opens, the text in the body is displayed in one unbroken line. I would like to add breaks between the Year, Make Model so it’s easier for users to fill out the details in their SMS app.

I’m thinking I can create the SMS link in HTML inside a Code Embed block, so I can add line breaks. Then drop the Code Embed inside the existing button. Or do I need to add a button class to the Code Embed to style it?

I’m messing with it now but was thinking somebody here might be able to give me a quicker answer how to do it.

Screenshot 2024-09-13 at 2.43.08 PM
Screenshot 2024-09-13 at 2.43.08 PM1206×824 105 KB

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

It would depend on the device, but you could try encoded CRLF’s, e.g. %0D%0A

There is of course a risk on some devices that they’d see the encoded chars directly.

This. plus desktop support, plus user SMS costs, is generally why designers prefer forms for data capture.

3

Thanks Michael, It turns out %20 and %0A worked perfectly. I wasn’t aware of URL encoding (thought it was HTML) and didn’t realize it would work in those fields. Appreciate the help.
sms:+13105551212?body=Hi! %20Paying %20cash %20or %20using %20insurance?%0AYear:%0AMake:%0AModel:%0AVIN:

1 Like
4

You may also want to encode the ? ! and : which have other meanings.
You can eliminate the extra spaces before the %20’s also ( which are already encoded spaces ).

You might also add a %20 after each colon %3A, so that when the user taps to type text there’s already a space.

sms:+13105551212?body=Hi%21%20Paying%20cash%20or%20using%20insurance%3F%0AYear%3A%0AMake%3A%0AModel%3A%0AVIN%3A