You can embed a contact form (ticket submission form) in a page on your website.

You can either embed a contact form where the user can select the department, or a contact form for an individual department. In either case, you will get a Javascript code snippet to add to the page where you want the form.

Custom forms for different parts of your site

Instead of using one generic contact form, you might want different forms for different parts of your site. For example, you probably want to collect different information on your support request form than on your sales inquiry form. 

The way to implement this is using departments. You can have a different form layout for different departments: go to Tickets > Departments and click the Layout tab to customize the user form layout.

Contact form for one department

To get the contact form for an individual department, go to Admin > Tickets > Departments, select the department you want, then click Website Embed. You can choose to get the code for a direct link, an embedded form (as show above), or a popup window.

Contact form where user can choose department

To get a multi-department form, go to Admin > User Interface > Portal > Embed and copy the code from the Contact Form section. You can specify the language to use for the form. 

If you have used custom layouts so that form layouts vary between departments, the form will update when the user changes the department. 

Prefilling user details

On a dynamic website, when you already have the user's name or email (for example because they are logged into your site) you can have them prefilled in the form by setting these variables:

DpNewTicket_Options.formUserName = '';

DpNewTicket_Options.formUserEmail = '';

Changing the style of the form

The embedded contact form is powered by the customisable CSS stylesheet and template system.

Changing the template

Go to Admin > Portal > Templates. Expand the "NewTicket" group and edit the "new-ticket-iframe.html" template.

 Changing the style

Go to Admin > Portal > Portal Editor and in the left sidebar click on "Edit Custom CSS."

Here you can add CSS rules to change the look of the new ticket form. The form resides inside of an element with the class "dp-simple-iframe" which you can use to scope rules to only the embedded form. For example, here's some CSS that you might use for a dark-themed website with black backgrounds and white text:

.dp-simple-iframe #dp, .dp-simple-iframe #dp label { color: #fff; } .dp-simple-iframe #dp input, .dp-simple-iframe #dp textarea { color: #fff; border: 1px solid #fff; background: #000; } .dp-simple-iframe #dp input:focus, .dp-simple-iframe #dp textarea:focus { box-shadow: none; } .dp-simple-iframe #dp .dp-hidden-file-upload .link { color: #fff; } .dp-simple-iframe #dp .dp-attach-limits { color: #eee; }

Creating your own form with the API

The Javascript form may not meet your needs in some scenarios; for example, if you want to have a form which combines creating a ticket with sending information to your website database or to a third-party service. 

As an alternative, if you have PHP web development skills, you can build your own HTML form and use the Deskpro API to submit tickets. See this example app on GitHub for details.