Skip to main content

Form prefilling: issue with `&` character encoding in Slack messages

T
Forum|alt.badge.img+8

EDIT: the issue turned out to be caused by Slack - see this post

I use Airtable forms for my employees to submit reports in my business. Prefilling those forms with all of the relevant data is amazing as it speeds up the workflow, gives my employees a better user experience, and gives me cleaner data. I send these forms out to my employees in Slack using Make automations.

I recently came across an issue with a new form. I was receiving employee submissions that were missing quite a bit of data that should have been prefilled. After a week of pulling my hair out, I finally realized the problem: many of the fields in this form have field names that contain a space character in the name e.g. "Checklist A". My URL prefill formula was using the `+` character to replace the space character e.g. "prefill_Checklist+A=value"

In all of my testing on my laptop, the prefill URL's worked perfectly. Problem is, all of my employees are submitting these forms on their phones. 95% of them are on iOS. I finally tested a prefill link on my own iPhone from the Slack app, and realized the prefill URL was breaking when opened in Safari after being clicked in Slack. After some testing, I found the prefill URL would work perfectly if I replaced all `+` characters with `%20`.

Lesson #1 here is don't have spaces in your field names. 🙃
Lesson #2 is if you do have spaces in your field names, use `%20`in all form prefill URL's, not `+`.

Hope this saves some people the headache I just went through. Happy building!

    ScottWorld
    Forum|alt.badge.img+33

    All elements of a URL — BOTH field names AND prefilled values — must always be URL encoded.

    You can do this by using Airtable's ENCODE_URL_COMPONENT function.

    When you encode a space, it becomes %20
    When you encode a + sign, it becomes %2B

    You can always turn to @kuovonne's excellent Prefilled Forms Extension, which will guide you through creating the proper prefilled URLs.

    p.s. On a related note, you don't need to use any prefilled URLs at all, if you use the free Airtable forms from Fillout. Fillout let you update Airtable records from a form, without any prefilling of forms being necessary at all. Fillout also offers about 100 other advanced Airtable features that Airtable doesn't natively offer in its own forms.

    T
    Forum|alt.badge.img+8
    ScottWorld wrote:

    All elements of a URL — BOTH field names AND prefilled values — must always be URL encoded.

    You can do this by using Airtable's ENCODE_URL_COMPONENT function.

    When you encode a space, it becomes %20
    When you encode a + sign, it becomes %2B

    You can always turn to @kuovonne's excellent Prefilled Forms Extension, which will guide you through creating the proper prefilled URLs.

    p.s. On a related note, you don't need to use any prefilled URLs at all, if you use the free Airtable forms from Fillout. Fillout let you update Airtable records from a form, without any prefilling of forms being necessary at all. Fillout also offers about 100 other advanced Airtable features that Airtable doesn't natively offer in its own forms.


    Appreciate the info. I do want to point out that the '+' character is technically supported in URL's. Airtable recommends using either '+' or '%20' to replace a space character in field names in their official documentation here and I've never had an issue with '+' in a desktop browser, only mobile.


    If you use the '%2B' to replace a '+' character in a field name in a prefill URL, it will actually fail, while '%20' will work. e.g. if field name is "Example Checklist", "prefill_Example%2BChecklist" will fail, but "prefill_Example%20Checklist" will work.

    ScottWorld
    Forum|alt.badge.img+33

    I tested this on all 3 of my Apple devices with Safari, and it works just fine for me.

    The + sign works for me as an encoding replacement for the space — in either the field name or the field value — on all Safari browsers: Safari Mac, Safari iPhone, and Safari iPad.

    I’ve tried it on all 3 Safari browsers with prefilled Airtable forms, and the + sign works just fine in both field names and field values.

    In general, though, percent encoding is considered the gold standard, so a space would be replaced with %20, and a + sign would be replaced with %2B.

    I would play around with @kuovonne’s excellent Prefilled Forms extension, and you will get the hang of it very quickly!

    Or, as I mentioned above, you can skip the prefilling altogether by using Fillout.

    T
    Forum|alt.badge.img+8
    ScottWorld wrote:

    I tested this on all 3 of my Apple devices with Safari, and it works just fine for me.

    The + sign works for me as an encoding replacement for the space — in either the field name or the field value — on all Safari browsers: Safari Mac, Safari iPhone, and Safari iPad.

    I’ve tried it on all 3 Safari browsers with prefilled Airtable forms, and the + sign works just fine in both field names and field values.

    In general, though, percent encoding is considered the gold standard, so a space would be replaced with %20, and a + sign would be replaced with %2B.

    I would play around with @kuovonne’s excellent Prefilled Forms extension, and you will get the hang of it very quickly!

    Or, as I mentioned above, you can skip the prefilling altogether by using Fillout.


    After more testing, I figured out that my issue in fact had nothing to do with using `+` vs `%20` for field names in URL's.

    Turns out, Slack has an issue with how it encodes the `&` character in a URL on iOS. On desktop, it encodes it just fine, which is why my prefill URL's would work work as expected. On mobile, Slack converts `&` to `&amp;` when a URL is opened, which breaks Airtable's prefill schema. For the record, I was posting these URL's to Slack via Make automation using the markdown formatting of `<https://airtable.com|This is my link>`.

    I solved the problem by instead using Slack's "Blocks" feature to insert a link button instead of a markdown link. The button works as expected on both mobile and desktop, without the `&` encoding issue. I used the exact same URL for the link block that I was previously using with Slack's markdown format of `<URL|link text>`.

    I don't know if it's possible to change the title of my post, but I'll try. I may make a new post to reveal this issue with prefill URL's being distributed via Slack.

    ScottWorld
    Forum|alt.badge.img+33

    I reported this bug to Slack, and this is what they wrote back:

    Thanks for getting in touch about this today. You are correctly escaping the & symbol, however it seems that you are referring to a known bug on iOS clients, where ampersand is converted to &amp;
    At this time there is no workaround unfortunately.
     
    I've attached this ticket to our bug tracker so I can reach out to you when it has been fixed. Please note that it may take a bit of time for the team to track down the source of this problem which is needed before we can look into how to get this issue resolved.

    Of course, you discovered the workaround of using the blocks feature.

    T
    1 person likes this
    • T
      Tyler_The_NoCod

    Reply


    Most helpful members this week

    Terms & Conditions