/** | |
* Automatically populates Zendesk public-facing "new ticket" fields | |
* on page load. | |
* | |
* To use, copy and paste into your New Request Page template (wrapped | |
* in a `<script></script>` tag). | |
* | |
* For most fields, just use the field name (so if the field is | |
* `request[subject]`, use `subject` in the URL, while | |
* `request[custom_fields][123456]` becomes `123456`). You can also use | |
* `email` instead of `anonymous_requester_email`. For custom field | |
* dropdowns, specify the value, not the label (so something like | |
* `my_value` rather than `My Value`). | |
* | |
* You can also map custom fields to arbitrary names via the `aliases` | |
* object below. | |
* | |
* Example URL: | |
* | |
* /hc/en-us/requests/new?email=test@test.com&subject=Example+Subject | |
*/ | |
(function ($) { | |
// This is the only portion of the script you might wish to edit. | |
// It maps custom field numeric IDs to custom names you can use | |
// in the URL. So in the example below, `?custom_name=test` would | |
// set `#request_custom_fields_123` to `test`. | |
var aliases = { | |
'custom_name': '123' | |
} | |
// You should not need to edit anything past this point | |
var parsedQueryString = function () { | |
var segments = window.location.search.substr(1).replace(/\+/g, ' ').split('&'), | |
parsed = {}; | |
if (!segments) return parsed; | |
for (var i = 0, count = segments.length; i < count; i++) { | |
var parts = segments[i].split('='), | |
key = parts.shift(), | |
value = parts.length ? decodeURIComponent(parts.join('=')) : null; | |
parsed[key] = value; | |
} | |
return parsed; | |
} | |
$(document).ready(function () { | |
var query = parsedQueryString(); | |
for (var key in query) { | |
if (!query.hasOwnProperty(key) || key == 'ticket_form_id') continue; | |
var prefix = '#request_', | |
value = query[key]; | |
if (typeof aliases[key] !== 'undefined') { | |
key = aliases[key]; | |
} | |
if (key == 'email') { | |
prefix += 'anonymous_requester_'; | |
} else if (/^\d+$/.test(key)) { | |
prefix += 'custom_fields_'; | |
} | |
var field = $(prefix + key), | |
data = field.attr('data-tagger'); | |
if (data) { | |
data = JSON.parse(data); | |
var label = ''; | |
if (!value) { | |
label = data[0].label; | |
} else { | |
for (var i = 0, count; i < data.length; i++) { | |
if (data[i].value == value) { | |
label = data[i].label; | |
break; | |
} | |
} | |
} | |
field.val(value).closest('.nesty-input').text(label); | |
} else { | |
field.val(value); | |
} | |
} | |
}) | |
})(jQuery) |
This comment has been minimized.
This comment has been minimized.
Regarding mobile. This works as expected for me. I have several fields I need to auto-populate in one of our forms and this technique works both in a desktop browser as well as mobile (at least my iPhone with iOS Safari). |
This comment has been minimized.
This comment has been minimized.
Hi Andrew, can you please share a example with me so I can look at the set up? |
This comment has been minimized.
This comment has been minimized.
The URL will follow a pattern like this: The script provided above (in Git) is wrapped inside <script></script> tags and placed at the top of the new_request_page.hbs file in your Zendesk templates. I made no changes to the script. That's all I had to do to make it work for browsers and iPhone/iPad iOS (again, I have not tested to see if it works on Android devices yet). |
This comment has been minimized.
This comment has been minimized.
This works great, thanks. But does anyone know the syntax for using the url to add an attachment? |
This comment has been minimized.
This comment has been minimized.
Anyone try this recently? It's not working for me. I first added <script> and </script> tags to the top of the new_request_page.hbs, then pasted lines 22-78 after the <script> and before </script>. Saved the changes and publish. Then test with hc/en-us/requests/new?email=test@test.com doesn't autofill. Full test: https://georgetest.zendesk.com/hc/en-us/requests/new?email=test@tester.com and another: https://georgetest.zendesk.com/hc/en-us/requests/new?description=Your+string+goes+here |
This comment has been minimized.
This comment has been minimized.
@GeorgeManning Sorry, I haven’t used Zendesk for years. It’s quite likely they have updated their form logic in a way that breaks this script. |
This comment has been minimized.
This comment has been minimized.
Hi George, the issue is jQuery is not added to your site. As this script relies on Jquery it fails. Once you add jQuery to Zendesk the script will work as expected. Thanks |
This comment has been minimized.
This comment has been minimized.
Thanks @JesseNovice. Appreciate your help. |
This comment has been minimized.
Hi There, this is working on desktop but breaks on mobile, do you have any idea why? The ids are the same.