Creating pre-filled ticket forms

Return to top

89 Comments

  • Remi Saumet
    Zendesk Customer Care

    Greeting Sam,

    Thank you for your reply. Hope you are doing well today !

    In order to make this work and pass multiple parameters in your URL, you will have to "encode" your URL.

    Example :

    should be encoded as :

    • https%3A%2F%2Ftest-brand42400.zendesk.com%2Fhc%2Ffr%2Frequests%2Fnew%3Ftf_subject%3Dlorem_ipsum%26ticket_form_id%3D360005678854

    I ran this test on my JWT SSO using the "return_to" parameter and this works like a charm!

    See attached gif. (right click on it and "open in new tab" to see the gif in full size)
    and

    Hope this clarifies it! Have a great rest of your day.

    Best regards,

    3
  • Mike Martello

    @... I wrote some custom code for our help center literally the evening before seeing this article. While it was a waste of my own time (lol/sob) it may be helpful for you or anyone not using v2 of the help center.

    DISCLAIMER: I am more of a JavaScript/jQuery hobbyist than a developer, so use at your own risk. :)

    Adding the below snippet will allow you to pre-fill fields using links like this:

    https://example.zendesk.com/hc/en-us/requests/new?ticket_form_id=123&fields=request_custom_fields_456,tag1|request_custom_fields_789,tag2

    Just swap 123 for your form ID, 456 and 789 for your custom ticket field IDs you want filled out, and tag1 and tag2 for the tags associated with the options you want selected for those fields. This format should work for any number of fields you wish to add, whether it's one or 10.

    I wrote this specifically for drop-down custom fields, but you could likely adapt the script for other field types.

    Anyways, here's the script you'd want to add to your new_request_page.hbs template:

    <script>
    $(document).ready(function() {
    var url = window.location.href;
    if (url.includes('fields') == true) {
    var queryDict = {};
    location.search.substr(1).split("&").forEach(
    function(item) {
    queryDict[item.split("=")[0]] = item.split("=")[1]
    }
    )
    try {
    var fields = queryDict.fields.split("|");
    fields.forEach(function(field) {
    var thisField = field.split(",");
    document.getElementById(thisField[0]).value = thisField[1];
    })
    }
    catch {
    }
    }
    });
    </script>

    For those new to jQuery, you should also make sure your page is set up to utilize jQuery by adding something like this:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    2
  • Bruce CCL

    Hi Team,

    I love this feature! Question: will this also work with conditional fields which are not visible yet when the form is opened?

    Thanks!

    Bruce

    2
  • DS RF

    I had been wanting this for a long time and randomly stumbled across this article saying that it's now available, which is awesome, so thanks for adding this feature!

    However, please update the information above for Dropdown Menus (and/or Custom Fields) because this is not true:

    • Drop-down menu: Use "value" and replace spaces with underscores. For example, "dog beagle" becomes "dog_beagle".

    I don't know what else this applies to, but I could not get this to work because I was using the "value" as mentioned in the article, when it really needs to be the "tag" in the URL, which can be totally different than the value.

    In my case, I had the following:

    • value = My Account Access
    • id = 1234
    • tag = website_problem

    So attempting to use the below URL did not work:

    ?tf_1234=My_Account_Access 

    Changing the tag to "my_account_access" also didn't work because tags are forced lowercase, but my value was proper case.

    It should also be noted that a hyphen can be used to separate words, so I could have "my-account-access" as the tag, and that would have been valid.

    Finally, after paying a developer to check our code (and confirm nothing was wrong), the following worked:

    ?tf_1234=website_problem

    So the article should state for dropdown menus (and maybe other field types), that it needs to...

    • match the TAG, not the value
    • you can't simply replace spaces with underscores.  by default, this might be true, but not if you have custom tags or even if the value changed, which does not automatically modify a preexisting tag
    • tags are all lowercase

    Hopefully this helps someone else.

    2
  • Sam

    Hello, 

    We have enable the single sign-on connection, via JWT token.
    When we access to a form with a prefilled ticket form, (like tf_123456=lopsem), if end user is already connected, it's working well. 

    However, if end user is not connected, after connection and redirect to the form url, the prefilled ticket form parameter disappeared from the form url 
    Exemple of workflow :

    1.  Access to https://mywebsite.zendesk.com/hc/fr/requests/new?ticket_form_id=123456789&tf_987654321=lorem ipsum (end user not connected)
    2. Redirect to http://mywebsite.com/login (user connect)
    3. Automaticly redirect to https://mywebsite.zendesk.com/hc/fr/requests/new?ticket_form_id=123456789 (tf_987654321 is lost)

    How can we keep tf_ parameter when end user is redirected after connection ?




    2
  • Greg Katechis
    Zendesk Developer Advocacy

    Hi Sam! Something like this may be specific to your IdP, however this external article shows how you can use cookies, which might work for you. I'd recommend checking with your IdP to see how that data is handled and passed back to us after login.

    1
  • Albert Khasky

    Without having to create my own form and use the API, is it possible to set the value of a hidden custom field based on a url param? I'd like it to be a private/agent only field, but given the responses above, it seems unlikely. As a possible workaround, could I stick some custom js that sets the value and hides that particular field? I'm using the Copenhagen theme. 

    Any guidance would be most appreciated.

    Thanks in advance!

     

    1
  • Adam

    Hi,

    I'm trying to find a way to pre-fill a custom field with the customers organization name.

     

    &tf_7511128378637=<???>

    Would this be the a placeholder?

    1
  • Sam

    Hello Greg Katechis

    The problem does not come from our LdP.

    The problem comes from the connection url generated by Zendesk. 
    For example, on this page: 
    https://mywebsite.zendesk/hc/fr/requests/new?ticket_form_id=123456789&tf_subject=lorem%20ipsum

    the connection url generated by Zendesk will be: "/hc/fr/signin?return_to=https%3A%2F%2Fmywebsite.zendesk.com%2Fhc%2Ffr%2Frequests%2Fnew%3Fticket_form_id%3D123456789"
    The parameter "tf_subject" is not present. 

    Testing with an unknown parameter, like lorem_param=lorem ipsum, the parameter is well preserved. 
    For example, on this page: https://mywebsite.zendesk/hc/fr/requests/new?ticket_form_id=123456789&lorem_param=lorem%20ipsum
    the connection url generated by Zendesk will be : 
    "/hc/fr/signin?return_to=https%3A%2F%2Fassistance.leboncoin.info%2Fhc%2Ffr%2Frequests%2Fnew%3Florem_param%3Dlorem%2520ipsum%26ticket_form_id%3D123456789"

    Can you check why Zendesk does not generate a connection link with all the tf_ parameters?

     

    1
  • DS RF

    Look at my comment above yours.  It's...

    tf_123=tag

    1
  • Matt Taylor

    Asger Andersen there'd be a "?" after the new normally iirc.

    Example

    https://wexervirtual.zendesk.com/hc/en-us/requests/new?&tf_subject=Request to delete user account

    This isn't working though. Do you have multiple forms and can you confirm what version and theme you're on? 

    1
  • Matt Taylor

    Is this after hitting the "edit code" option in the bottom right? If so, it may be worth speaking with the theme company.Asger Andersen

    1
  • Juraj Jarmek

    Hello Xiǎolín,

    As long as the URL string is kept, if the page is reloaded, the values will be kept.

    Hope that helps!

    1
  • Matt Taylor

    Asger Andersen no problem, I ran into the same issue.

    You should see something like this against the theme when editing it.

    1
  • Ahlam Kern

    Hello, I have a scenario where I couldn't get an answer about.

    Scenario : The end user is connected on the help center and wants to submit a new request. There's a field where he must enter his contract number each time he submits a request.

    Problem : How can we automatically fill the "Contract number" field for each request by an end user ( We can only get the information about the "Contract number" ticket field on the new page request from a user field called "CO" on our domain).

    Thank you !

    1
  • Simon Blouner
    Community Moderator
    Hey team,
    This is a really neat feature and something I've been in need of on previous projects - so good job on this one!
    I have however only been able to get it working on a clean Copenhagen theme installation, and not in e.g. the heavily custom theme I'm working on at the moment, which is actually also based on the Copenhagen theme. I don't know if some of my other javascript is causing this, because I'm not getting any console errors or the like?

    Feel free to reach out if you would like some session to check it out :-)
    1
  • Sabra
    Zendesk Customer Care

    Hey @...! Let's say we have a ticket form (ID 1001) to collect information about donations. The form has the following fields:

    Field Type Field ID Field Name Field Value (tag)
    Drop down 36001 Foundation
    • Pet Rescue (pet_rescue)
    • Local Food Pantry (food_pantry)
    • Children's Learning Program (children_s_learning_program)
    Checkbox 36002 Anonymous?  
    Decimal 36003 Amount  

    If I wanted to create a pre-filled form where there was an anonymous $75.50 donation to the Local Food Pantry, here is how I would make the URL:

    https://example.zendesk.com/hc/en-us/requests/new?ticket_form_id=1001&tf_36001=food_pantry&tf_36002=true&tf_36003=75.50
    1
  • Ravindra Singh Test

    Can someone please help me with the code suppose I want auto-filled customer field then how to do for the following customer field, please provide example along with screenshot.

    1.Drop-down menu
    2.Checkbox
    3. Decimal

    1
  • Matt Taylor

    Asger Andersen sorry, i should have been more specific. 

    This feature requires that your theme uses Templating API version 2. Do you know if the theme is using this version of the API?

    1
  • Kasper Sørensen
    Zendesk Product Manager

    Hey Alejandro, yes so it depends on whether or not you use a rich text editor or a plain text editor for the description field. If you use rich text, you should provide the HTML <br> tag, so you could have a parameter like

    ?tf_subject=Hello<br>World
    1
  • Kasper Sørensen
    Zendesk Product Manager

    Hi @...,

    Yes it also works with conditional fields, even if they're not shown initially.

    1
  • Ran Geller

    Thank you, Eric!.

    Is there a plan to add this functionality to the feature?

    Any idea how can I automatically update agent-only fields during/after a ticket was created from the help center contact support form?

    Ran 

     

     

    1
  • James Thurley

    For those having the same issue as Sam with `tf_*` query string parameters being removed from the `return_to` URL by Zendesk during the SSO flow, I asked the same question separately at the following URL and have also created a workaround which I've posted as a comment there:

    https://support.zendesk.com/hc/en-us/community/posts/4703281675418-Pre-filling-ticket-forms-doesn-t-work-well-with-logged-out-users-and-SSO?page=1#community_comment_4762283979034

     

    1
  • Asger Andersen

    Thanks Matt Taylor; now I see it. We're on V1. That explains it. Thanks a lot for your help

    1
  • Alejandro Colon

    @... Is there any way to include a new line? Specifically, in the description field. I tried the following with no success:

    ASCII Character Description URL-encoding
    NUL null character %00
    SOH start of header %01
    STX start of text %02
    ETX end of text %03
    EOT end of transmission %04
    ENQ enquiry %05
    ACK acknowledge %06
    BEL bell (ring) %07
    BS backspace %08
    HT horizontal tab %09
    LF line feed %0A
    VT vertical tab %0B
    FF form feed %0C
    CR carriage return %0D
    SO shift out %0E
    SI shift in %0F
    DLE data link escape %10
    DC1 device control 1 %11
    DC2 device control 2 %12
    DC3 device control 3 %13
    DC4 device control 4 %14
    NAK negative acknowledge %15
    SYN synchronize %16
    ETB end transmission block %17
    CAN cancel %18
    EM end of medium %19
    SUB substitute %1A
    ESC escape %1B
    FS file separator %1C
    GS group separator %1D
    RS record separator %1E
    US unit separator %1F
    0
  • Dave Dyson
    Hi Federica,
     
    The dynamic content variant to be shown will be based on the user's language determined by the help center: Understanding how translated content is displayed in your help center
    0
  • Garrett Galindo

    Hello,

     

    I am trying to get this rolling and it seems like it's not possible if only one form is in use. My Help center only allows submissions at the following URL with no form ID.

    Do we need to upgrade our account in order to utilize such a simple feature?

     

    zendesk.com/hc/en-us/requests/new

    0
  • Kasper Sørensen
    Zendesk Product Manager

    If form submission fails, we try to retain the values at the time of submitting, not the pre-filled values in the URL. Because the user could have changed the pre-filled values.

    0
  • Masako K

    Hello.
    For example, if there is a submission error in a ticket form, does the re-displayed ticket form retain the value of the parameter before the error occurred?

    0
  • Darren

    Hi,

    Do you need a rich text editor or can you just use for example word pad?

    I am not a developer but this seems easy enough to implement.


    Thank you!

    0

Please sign in to leave a comment.

Powered by Zendesk