Creating pre-filled ticket forms

Return to top
Have more questions? Submit a request

19 Comments

  • 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 :-)
    0
  • Kasper Sørensen
    Zendesk Product Manager

    Hi Simon Blouner

    Thanks for raising this issue. The new feature is only available when your theme is using Templating API v2. Is your custom theme perhaps using Templating API v1?

    0
  • Simon Blouner
    Community Moderator

    Hey Kasper Sørensen

    Thanks for the quick reply!

    I can confirm my theme is built on the API v2 - but for good measure, this should probably be added to this article as a heads-up :-)

    0
  • Kasper Sørensen
    Zendesk Product Manager

    Working on that :) 

    0
  • Nova Dawn
    Zendesk Documentation Team

    Thanks for raising this Simon Blouner, it's a good addition to the documentation.

    0
  • Matt Heroux

    Can we pass through text field or numeric values as well? or just the field types listed above?

    0
  • Kasper Sørensen
    Zendesk Product Manager

    Matt Heroux absolutely! I think this article only wanted to specify the required format for field types where the format is non-trivial. For text and numbers, you just pass in the text or the number :-) Like:

    /hc/en-us/requests/new?tf_1234=Hello
    0
  • Bruce Sattler

    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

    1
  • Kasper Sørensen
    Zendesk Product Manager

    Hi Bruce Sattler,

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

    1
  • 小林

    That's a great feature!
    I wonder if the parameter keys and values are retained when the ticket form is reloaded?

    0
  • JJ
    Zendesk Customer Advocate

    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
  • Hussain Mithaiwala

    Hello!

    This feature is really good. 

    Firstly, can this be used if there is only 1 form? meaning I don't need to put in the ticket form ID.

    hc/en-us/requests/new?tf_1260812645989=

    I just want to get an idea on the dropdown values, it says to use option and value

    If I have a dropdown with 2 values
    VALUE = ABC, TAG = ABC_TEST

    VALUE = XYZ, TAG = XYZ_TEST

    What would the url be for such a case using the one I pasted above.

    Appreciate your help.

    Hussain

     

    0
  • Kasper Sørensen
    Zendesk Product Manager

    Hi Hussain Mithaiwala,

    The parameter value in this case would be the option value's tag. If it's a multi-select field you can comma-separate those tags as well. So in your case it seems it would be:

    /hc/en-us/requests/new?tf_1260812645989=ABC_TEST,XYZ_TEST
    0
  • Hussain Mithaiwala

    Hi Kasper

    Thank you for your reply.

    I did try it the same way you have written, however didn't work.

    I will try it again and will update if successful.

    Regards

    Hussain

    0
  • Darren Hua

    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
  • JJ
    Zendesk Customer Advocate

    Hello Darren Hua,

    Please note that Word Pad is indeed a rich text editor.

    You could also use Google Docs or Microsoft Word Online from your Microsoft account, if you have one.

    Hope that answers it!

    0
  • 小林

    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
  • 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
  • Michael Martello

    Simon Blouner 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>
    0

Please sign in to leave a comment.

Powered by Zendesk