Why are spaces being removed from one of my form's pre-filled fields?

  • Profile Image
    Asked on January 26, 2011 at 11:30 AM

    Hi guys.

    Well, I've finally been able to get an acceptable "registration/confirmation" system working except for one problem: Spaces between words are being removed from the pre-filled Caption field of the second "Confirmation" form.

    The form can be found at http://www.anglican.bb/~stmatthias/photoalbum

    I just need someone to complete the form (type a caption of about 50 characters) and submit it, click the confirmation link in the emailed autoresponse you get and observe how the Caption field is pre-filled in the "confirmation" form with what you would have earlier entered in the first form.

    Initially, I thought it was only long captions that caused the problem but it seems that it's happening regardless of the length. You can test it more than once if you wish, using different length captions each time. It's also up to you if you wish to upload a photo or just provide a link to one. (It can even be a bogus link or any alphanumeric string. Actually, that's another matter that needs to be discussed in another thread: The need for more robust validation.)

    Thanks in advance. (Incidentally, just ignore the notice advising you not to use the form. I only put it there there to discourage our church members from using the form until I got the system properly configured.)

    EDIT: Something recently occurred to me but when I tried the solution, it didn't work. I had been wondering if the problem had to do with the fact that the character limit settings for the Caption fields were not synced. The character limit for the first form the user sees (that is to say, the one at the link I provided above) was set to 100 letters while no limit was set for the "confirmation" form (the one that displays the pre-filled fields). The screenshots below illustrate what I mean:

    These were the settings for the registration form


    While these were the ones for the confirmation form:


    So, figuring the conflicting settings might have been causing the problem, I set the confirmation form to 100 letters as I had done with the registration form. Unfortunately, it didn't make any difference: When I entered The quick brown fox jumps over the lazy dog. into the "Caption" field of the registration form, the link in the autoresponse email message came out like this: https://www.jotform.com/form/10253357117?email3=username@domain.com&caption=The quick brown fox jumps over the lazy dog. which looks perfectly fine. Unfortunately, when clicked, it pre-fills the confirmation form like this:

    UPDATE: Interestingly enough, I just discovered that the removal of the spaces only happens when the link is clicked (edit: it also happens when the link is right-clicked and "Copy link address" is chosen from the contextual menu and it is pasted into the address bar). When it is selected (by dragging the mouse over it) copied into the browser's address bar everything comes out just fine:

    No problems here.

    To see what I mean, first click the link above. See how it comes out in the "Caption" field with the spaces missing between The and quick and between lazy and dog? Now, instead of clicking the link, copy it into the browser's address bar by dragging your mouse over it and pressing Ctrl+C and then click in the address bar and press Ctrl+V and hit Return (Enter). See the difference?

    Man, what on earth is going on here? How can I fix this so that when the user clicks the link in the autoresponse, the caption they had previously entered in the registration form displays the same way in the confirmation form? I don't want all of my form's users having to copy the link to the address bar. That should only be necessary when the confirmation link appears as a plain text string. (Some email accounts are set up to display links as plain text URLs or in some way disable links.)

    I want what is entered in both fields to be identical so that they can be easily cross referenced in the Excel records generated by each form.

  • Profile Image
    Answered on January 26, 2011 at 05:36 PM

    Oops! Somehow this extra post popped up. I must've clicked the wrong button.

  • Profile Image
    Answered on January 27, 2011 at 06:15 AM
  • Profile Image
    Answered on January 27, 2011 at 02:28 PM

    Thanks for your response, aytekin.

    Your link pre-fills the "Confirmation" form correctly but the problem is that people don't type like that (with %20 between each word).

    To recap what I'm trying to achieve, an example might prove useful:

    A user (Jane Doe) visits a page on my site which contains a photo album and a form (let's call it a Registration Form, for want of a better term) which allows visitors to contribute photos to the album. Jane decides to use the form to submit a photo. She enters her full name. She enters her email address. Jane decides to upload a photo rather than send a link to one on already on the Internet and so chooses the "from my computer" option. (See screenshot below) She clicks the "Choose File" button and selects a photo of a fox jumping over a sleeping dog. She enters a caption for the photo: The quick brown fox jumps over the lazy dog. (Exactly like that, with spaces between the words) She completes the CAPTCHA She submits the form and after a little while sees a "thank you" page informing her that a confirmation link has been sent to the email address she provided. (Hopefully, it's really her email address but that is what this whole Registration/Confirmation exercise is about: To verify that the person whose email address was submitted with the Registration Form is the same person that submitted the photo). Jane checks her inbox and sees the message (only if the email address she gave in the form was hers). She opens the message and sees that it contains a notice with a confirmation link below it. The notice tells her that she needs to click the link. Otherwise, the photo will not be accepted. She clicks the link which opens a page containing another form. This is the Confirmation Form and it contains duplicates of just some of the fields she saw in the Registration Form: Full Name, E-mail and Caption plus a RECAPTCHA field. All of the fields (except the RECAPTCHA) are pre-filled with the information Jane gave in the Registration Form, formatted exactly as she had entered it. In other words, none of the spaces between the words in the Caption field are missing. There is a notice in this Confirmation Form telling Jane NOT to change any of the pre-filled information. She just needs to complete the RECAPTCHA and submit the form. After she submits this second form, a page loads thanking her for confirming that she was the person who sent the photo.

    Presently, the system works perfectly:

    Jane submits the Registration Form and her entries are stored in that form's records. Simultaneously, an autoresponse email is sent to her (if the email address she entered was hers) and I receive notification of the submission. (If the email address was not hers, whoever opens the message will see, in addition to the link, a note telling them to just ignore it.) Jane clicks the confirmation link which loads a pre-filled Confirmation Form. Her submitting that second form causes duplicate entries of what is already stored in the Registration Form's records to be sent to the Confirmation Form's records, and notification of her confirmation is emailed to me.

    The last hurdle I need to clear is the missing spaces between words in the Caption field of the Confirmation Form. While it is true that the Confirmation Form would contain all of the spaces between the words if Jane were to write (type) her caption as shown in the screenshot of the Registration Form below, , nobody writes (or types) like that!

    So, what do I need to do to get the information in the pre-filled Caption field of the Confirmation Form to be identical to what was entered by the user in the Caption field of the Registration Form? I want all of the information in the fields of the Confirmation Form to exactly match the information in the equivalent fields of the Registration Form, so that the records from each form can be easily cross referenced in Microsoft Excel.

    Perhaps the easiest way to understand what I mean is to test the form for yourself. Make as many submissions as you wish.



    Update: After doing some research, it seems to me that the answer lies in using a URLencode function of some sort to replace all spaces in strings generated by the {caption} tag with %20. However, since there is no standard {caption} tag (there are only four standard tags that I know of: {id}, {form_title}, {edit_link} and {ip}), what is needed is an option to URLencode entries in text boxes and text areas. In other words, a button on the toolbar to enable or disable URL encoding for a particular text field.

  • Profile Image
    Answered on January 28, 2011 at 09:11 AM

    I see. You need a new tag like this on the email wizard:


    If the value for {caption} is "quick brown", the value for {URLENCODE:caption} would be "quick%20brown". 

    I added this to our todo list. 

  • Profile Image
    Answered on January 28, 2011 at 09:14 AM

    Thanks, aytekin. That's exactly the sort of capability I want.

    LOL, you guys must have a MASSIVE to do list. They're so many different feature requests. It's enough to drive one crazy!

  • Profile Image
    Answered on January 28, 2011 at 09:41 AM

    Yes, it is a massive list but most of them are minor requests. Any issue asked by many people usually get resolved within the same week. 

    But, I like this one. Many people previously asked for a way to pre-populate forms with data to make a new submissions and not an edit on a submission. This kind of solves that problem. 

    I think entering all of the fields on the link might be unnecessary. Maybe a {clone_link} similar to {edit_link} would work better for your needs. What that would do is to give you a new form with pre-populated values. 

  • Profile Image
    Answered on January 28, 2011 at 12:44 PM

    Until the {URLENCODE:tag} or whichever method is eventually implemented, I'm thinking of somehow grabbing entries in my caption field and running them through the JavaScript encodeURIComponent() function that I just tested on several strings. It replaced all instances of spaces in every string I tested with %20. Plus, it encoded other elements like question marks (? became %3F), colons (: became %3A) and so on.

  • Profile Image
    Answered on January 29, 2011 at 01:42 PM

    {URLENCODE:fieldName} tag is implemented now. Please try and let me know.

  • Profile Image
    Answered on January 29, 2011 at 05:32 PM

    Thanks for all your effort, serkan.

    Unfortunately, {URLENCODE:caption} did not perform as expected. Spaces were replaced with plus signs (+) instead of "%20". This caused the problems shown in the links to screenshots below:

    This is how I composed the autoresponse in the registration form

    This is how the words were entered in the "Caption" field of that form

    How the autoresponse email looked in the Hotmail account to which it was sent. (Note how the confirmation link runs off the edge of the screen because it does not want to break the line.)

    Clicking "Show full message" (see top area, highlighted in yellow, of previous screenshot) exposed the entire link but even then, the table was slightly too wide.

    Most importantly, here is how the text entered in the registration form was displayed in the confirmation form: Plus signs (+) were where spaces should have been. Additionally, those plus signs were attempting to prevent line breaks, as was the case with the autoresponse.

    (I redacted personal information from the screenshots as it was not pertinent to the issue at hand.)

    According to the fourth answer to the question posed at this link, a function similar to PHP's rawurlencode() might do the trick. More on rawurlencode().

    I am yet to run a full test on the reserved and unsafe characters (plus the carriage return) to see what is returned in the URL. I may do that later tonight and let you know the results.


    Cheers :)


    UPDATE: I just had a thought: In case this matter of converting plus signs to %20 proves too difficult, what if in addition to {URLENCODE:fieldName} there was an equivalent {URLDECODE:fieldName} to strip those "+" out of the string and replace them with spaces? That would actually solve my problem (except for the issue of the link in the autoresponse email extending beyond the browser window) because even though the output of the caption would still look like gibberish in the confirmation form, when the user submits that form, the data sent to that form's records would indeed match what was entered in the registration form. Isn't that right? EDIT: On second thought, that can't be correct because the {FUNCTION:fieldName} feature is used when composing emails and has nothing to do with what's sent to the form's records on submission of the form.

    UPDATE: Besides spaces being replaced with "+" instead of "%20", I just discovered another more significant problem: If a user includes a question mark (?) in the caption, when she clicks the confirmation link nothing will be displayed in any of the fields of the confirmation form! However, if instead of clicking the link, the mouse is dragged over it to select it and it is copied to the address bar, everything that was entered is displayed. (It's just those annoying "+" signs in the caption! Incidentally, if a literal "+" is entered by the user, it is displayed as a space. In other words, a space is coming out as a plus sign and vice versa.)

    UPDATE: It should have been obvious to me before but I only just discovered why neither clicking the confirmation link nor right-clicking it and copying it to the address bar works. While {URLENCODE:fieldName} works in the main "Compose Email" window, it is not changing question marks (?) to their encoded equivalent (%3F) when used in the "Link URL" field of the "Insert/edit link" window (screenshot). I think that also clears up the mystery as to why some spaces were being removed when the old link (without the URLENCODE function) was clicked but worked just fine when the text of the link was copied to the address bar.

    UPDATE: You know what? I just realized there's a very simple way to get what is generated in the confirmation form's caption field to match what was entered in the registration form's caption field:

    Download the excel records for both forms Open the confirmation form's records Use Excel's "Find and Replace" tool to replace all instances of plus signs (+) with spaces

    Presto! The forms' records should now match each other perfectly! The beauty about this method is that all of the plus signs are replaced with spaces but none of the spaces are replaced with plus signs, or anything else, for that matter. (In the confirmation form you may have noticed a space after the first word but plus signs following subsequent words.) Until there's a way to automatically have what appears in the "Caption" field of the confirmation form decoded on submission to that form's records, I'll use this method. (But there's still the question mark issue. That needs to be resolved because I don't want to have to tell my users not to use them or to escape them with backslashes.)

  • Profile Image
    Answered on January 31, 2011 at 02:06 AM

    This is an easy fix, URLENCODE now uses %20 instead of + signs.

    Could you please sum up your last post :) it's really hard to follow. Do you need anything else besides "%20" fix?

  • Profile Image
    Answered on January 31, 2011 at 06:15 AM

    The "%20" fix works beautifully: All of the fields in the second form (including the caption that used to have a plus sign replacing each space) are displayed pre-filled with the information that was entered by the user on the first form (the registration form), exactly as it was entered. Thanks.

    However, there is still the question mark (?) problem: If the user puts a "?" anywhere in the caption, all of the fields in the confirmation form turn up blank. I discovered that the question mark needed to be encoded to "%3F" to prevent this problem from occurring. What I was stating was that while "{URLENCODE:caption}" functions correctly in the main "Compose Email" window, it does not encode question marks when used in the "Insert/edit link" window. So, the end result is that while the confirmation link looks correct (with "%3F" replacing any question marks) to the user who receives the autoresponse email, it actually contains a literal question mark. (This can be seen in the status bar of the browser when the user places her mouse over the confirmation link.)

    Perhaps the screenshots at the links below better explain what I'm trying to state.

    Composed autoresponse email

    This does NOT work

    This works

    To illustrate what the user sees in the status bar of her browser when the mouse is just placed on the confirmation link, without clicking it, rest your mouse on the following link and look at your browser's status bar. See what I mean? There's actually a literal question mark (?) right at the end of the link but the visible text of the link is correct: it has a "%3F" instead of a "?". If you click the link, you'll see nothing in the caption of the form that loads. But if instead of clicking the link, you were to select its text by dragging your mouse over it and copying it (Ctrl+C on Windows) and then pasting what was copied into the browser's address bar (Ctrl+V) and hitting Return (Enter), you will see that the caption field now contains the phrase "Why not?". The difference is that the text of the link has an encoded question mark (%3F) at the end, while the actual (hidden) hypertext reference contained in the opening anchor tag of the link has a literal question mark (?) at the end.

    To see the difference, it must be copied by the technique described. If you simply right-click the link and click "Copy link address" (or whatever is shown in the contextual menu, depending on your browser) and paste it into the address bar, the result will be the same as if you had clicked it normally. That's because right-clicking copies the actual hidden link instead of its visible text.


    Here is a plain (unlinked) text version of the same string. It produces the same result if the mouse is dragged over it to select, copy and paste it into the address bar. I only included it here because you may find it easier to select than the hyperlinked version:


    So, as I illustrated in the screenshots above, {URLENCODE:fieldName} performs as it should when used when used in the main "Compose Email" window but when constructing hyperlinks in the "Insert/edit link" pop-up window, {URLENCODE:fieldName} does NOT encode question marks typed by the user. 

    From what I can tell, this non-encoding issue only happens with question marks but additional tests would need to be conducted on other reserved and unsafe characters. (Plus signs are displayed as spaces when they are typed but that can actually be a handy feature if a user wants to enter an extra space between a couple of words. The only downside would be if users wanted to enter algebraic calculations and none of my users will need that capability!)

  • Profile Image
    Answered on January 31, 2011 at 10:04 AM

    @abajan I've just tested this issue and It works fine on my tests. I had no problem with question mark.

    Here is my test form


    Please test it yourself.

  • Profile Image
    Answered on January 31, 2011 at 10:35 AM

    @serkan I just tested your form and the same thing happens. (See the screenshots below. Take note of what is in the address bar and what is displayed in the text area.)

    Encoded question mark (%3F) at the end of the URL

    Un-encoded (literal) question mark (?) at the end of the URL

    What I'm saying is that when I compose an autoresponse email and I just put a plain text ... (to be continued. I have to go out for a while.)

    Never mind. I just tested your form as you had asked and you're right. Putting a question mark in the text area did not effect what was displayed but you are using a different system than I because I use two (2) forms but you're using just one and a "thank you" page that contains a table. There's no confirmation link involved in your system.

    If possible, when you get a chance, please see if you can set up a duplicate system to mine to see exactly what's taking place when I write the link text in the "Compose Email" window and then turn it into a hyperlink by copying and pasting the same text into the "Insert/edit link" pop-up window. Something in that pop-up is preventing {URLENCODE:fieldName} from turning entered question marks into their encoded equivalent.

    For the time being, I'll just put a note under the caption field telling users either not to include question marks in their text or to escape them with a backslash. EDIT: The backslash idea doesn't work. They will have to type "%3F" instead!

  • Profile Image
    Answered on September 04, 2011 at 05:15 PM

    Any news when this will be fixed... When I put someones name ie.. ...?name=clientName -- There is no space between the first and last name.. 

  • Profile Image
    Answered on September 04, 2011 at 06:37 PM

    Hi Mendy

    Assuming you're attempting to pre-populate (pre-fill) a text box labelled Name in one form with the name entered in a full name field (labelled Client Name) of another form via a URL, try name={clientName:first}%20{clientName:last} and let us know if that works.

    Otherwise, please provide details on what you want to accomplish.


    ~ Wayne