zendesk_autopopulate_fields.js

/**
 * 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)

Hi There, this is working on desktop but breaks on mobile, do you have any idea why? The ids are the same.

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).

Hi Andrew, can you please share a example with me so I can look at the set up?

The URL will follow a pattern like this:
https://support.yourdomain.com/hc/en-us/requests/new?ticket_form_id=[form_id_number]&[field_id_number1]={value1}&[field_id_number2]={value2}
Where
[form_id_number], [field_id_number1,2] are replaced with the actual Zendesk form id number (e.g. 360001213533) and field id numbers
{value1,2} are replaced with the info you want to auto-populate in those fields.

example:
https://support.yourdomain.com/hc/en-us/requests/new?ticket_form_id=360001216543&360019850345=content+here&360019850373=more+content+here

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 works great, thanks.

But does anyone know the syntax for using the url to add an attachment?
It does not seem to follow the same format as for instance hc/en-us/requests/new?attachments=C:\file.txt does not work like hc/en-us/requests/new?email=test@test.com does. Or perhaps my paramater for the files is wrong?