Building a custom ticket form with the Zendesk API Follow

Comments

31 comments

  • Avatar
    Abdellah Taha

    Hello,
    Please, I have a contact form created using the Feedback tab with former Zendesk interface.
    Then I built this form in a web page using iframe ==>
    <Iframe src = "https://yout_domain.zendesk.com/account/dropboxes/0000000"> </ iframe>.

    My question is that I can still use this link to call my form from my website in the new interface after
    the depreciation of the old interface?.
    Thank you in advance.

  • Avatar
    Michael Ervin

    I am having trouble getting my app to run because it says  No module names 'bottle'  I have installed bottle though.


    I also checked the Library, and see it under python 2.7


     


    Has anyone had this issue? Any insight on this would be much appreciated.

  • Avatar
    Charles Nadeau

    Hi Michael, 


    If you have Python 3.4 or above, try installing bottle with the pip3 command:


    $ pip3 install bottle


    If you have Python 3.3 and below, you'll need to install pip for Python 3. See https://pip.pypa.io/en/latest/installing/#install-pip. Once installed, try installing bottle again:


    $ pip install bottle


    With two versions of pip on your system, you might have to run the following command to install bottle in Python 3:


    Mac:


    $ python3 -m pip install bottle


    Windows:


    $ py -3 -m pip install bottle



     

  • Avatar
    Michael Ervin

    Thanks for the help.  That worked for me.  


     

  • Avatar
    Sam Germein

    FYI, the issue was causes by a . when there should have been a _


     


     


    Hello,


    I have this form working, until the point I try to submit a ticket with the 'verified_email' cookie set, at which point I am getting a 500 Internal Server Error


    AttributeError("'function' object has no attribute 'cookie'",)


      File "C:\Users\germeisw\Documents\Projects\ZenDesk\CustomForm\app.py", line 20, in handle_form
    
    if 'verified_email' in request.cookies:
    AttributeError: 'function' object has no attribute 'cookie

    can anyone help?


    Sam

  • Avatar
    Nate Legakis

    I was working though this example and got to the point where I tried to create a test ticket.  And, I got a 405 Error.  Please see the screenshot and please let me know what might be causing this.

  • Avatar
    Nate Legakis

    Nevermind, I ended up jumping to the last step and just copied and pastied the final step with complete code and it works without an error.

  • Avatar
    Charles Nadeau

    Cool. The method in the error message was probably the HTTP method, like GET and POST. You specify POST as a method for your `create_ticket` route:


    @route('/create_ticket', method=['GET', 'POST'])

    See "Receive the form data" around https://help.zendesk.com/hc/en-us/articles/229488948#toc_6.


     

  • Avatar
    Nate Legakis

    I have another question.  This describes how to create tickets for agents and users that are registered already.  Is there a way to create custom web form for users that are not already registered?  

  • Avatar
    Charles Nadeau

    Yes, you can use the Requests API instead of the Tickets API. The Create Requests endpoint lets anonymous users create tickets. See https://developer.zendesk.com/rest_api/docs/core/requests#create-request.


     

  • Avatar
    Nate Legakis

    Can you add custom ticket fields to the form?  Or, can you only use a subject and description field?

  • Avatar
    Charles Nadeau

    With some tweaks to your code, you can add form fields for any writeable property of a ticket or request. For example, see the properties of a request at https://developer.zendesk.com/rest_api/docs/core/requests#json-format.


     

  • Avatar
    Nate Legakis

    Has anyone tried this plugin for Wordpress?  https://wordpress.org/plugins/zendesk-request-form/ From what I can tell, it's just as powerful as this option, but quite a bit easier to install.  

  • Avatar
    Jessie - Community Manager

    Hey Nate!


    I'm not familiar with this one personally...I'll check with our Community Moderators to see if they're familiar at all. Otherwise, hopefully some other members here in the Community will be able to help you out!

  • Avatar
    Pete Robertshaw

    Hi Charles,


    Great article - we're working through this now and noticed your comment above about being able to add form fields for any writable property of a ticket or request. We have a custom drop down ticket field on our support account where we select why a customer wants to return a product to us. 


    Are you saying it is possible to include this drop down field on our own custom form? If so, how do we pass the value the customer selects so it marries up with the pre-set values we have in our account?


    Finally, is it also possible to capture uploaded files on our own form and pass them over with the ticket?


    Thanks in advance!

  • Avatar
    Charles Nadeau

    Hi Pete,


    You can add a dropdown to your custom form and assign the value to the request object's custom_fields property. Example:


    ...
    
    reason = request.forms.get('reason') # dropdown is named 'reason'

    data = {
    'request': {
    'subject': subject,
    'comment': {'body': description},
    'custom_fields': [{ 'id': 34, 'value': reason }]
    }
    }


    See Setting ticket fields. The "id" is the id of the custom field that was created in the Support admin interface. You can find the id using the List Ticket Fields endpoint.


    Attachments are trickier because they're an attribute of a ticket comment, not the ticket itself. See the attachments property in the ticket comment object. I've never actually done it so I'm not sure what's the best way to do it. Upload the user's file to your server first, then use the Upload Files endpoint to upload the file to the Zendesk infrastructure, then include the attachment's id from the response in the ticket comment object? Just spitballing here...

  • Avatar
    Pete Robertshaw

    Thanks Charles, that's really helpful!

  • Avatar
    Nate Legakis

    Can someone post some instructions on how you might create a custom ticket form in Wordpress?  I'm guessing that you wouldn't use bottle and python, and instead use something else that is already installed by Wordpress to handle the request and route.  Any information that you can give me would be very much appreciated.

  • Avatar
    Joseph May

    Hey there Nate-


    You are correct, you probably wouldn't want to use bottle & python with WordPress! We have our own WordPress plugin which can be found here. If you were looking for something more robust, I found this plugin, 'Zendesk Request Form.' Even if this isn't quite what you want, the package can be unzipped for your review.

  • Avatar
    Tom Charland

    Hey Charles,


    Very well written article, thank you so much for this and for building this on top of the Bottle Framework to make it simple for people like myself. I have one issue that I'm not sure how I should resolve. 


    Note that I'm on Mac OS X High Sierra and leveraging the latest version of Chrome to build this. Using a simple text editor as well, Atom. 


    I've completed this tutorial up to the Minimum  Viable Product and I'm just debugging. The step where you ask if we're getting the correct HTTP response is what has me stuck and not willing to move on to the next step.


    I'm getting a 422 error when I should clearly be getting a 401 returned. I'll supply you with what I have up to this point. Could be a setting in Zendesk I need to configure as well but who knows haha :) Note that my Zendesk URL and API Key are both matching in the system but I've removed them for security.


    Here's app.py:



    And here's ticket_form.tpl:



    Any idea why I'm getting a 422 returned? Have you seen this before?


    Thanks for any help you can provide!


    Tom

  • Avatar
    Charles Nadeau

    Hi Tom,


    The good news is that I was able to replicate the problem.


    The bad news is that it's related to a change made to the Request API back in September. See the note under Authentication at https://developer.zendesk.com/rest_api/docs/core/requests#authentication.


    To make a long story short, the tutorial app now only accepts emails that have been verified. See Verifying a user's email address in the Support Help Center.


    I added the 422 to the error checking line:


    if r.status_code == 401 or 422:

    There's a way to create tickets with no authentication at all, but that'll require rewriting the tutorial. See Create Request in the dev docs. I'll make it clearer in the tutorial that the email has to be verified -- if nothing else in order to limit spam tickets.


    Thanks.
    Charles

  • Avatar
    Moran Alkobi

    Thanks for the article, I used it as a reference for some of the integration with Bottle and it helped.

    A couple of comments, for the sake of everyone: 

    1. In "Enhancement: Provide better feedback to the user" Section 4, there's a typo that should make the code broken: 

    <div class='title">Submit a ticket</div>
    

    There's a mismatch of quotes around "title".

    2. Under "Enchancement: Reuse the user's email address" > "Code complete", it says:

    a) The complete Bottle application, including the form template and CSS, is attached to this article. See the link at the end of the article. - but there's no link as far as I can tell.

    b) Your completed app.py file should look as follows. - but from what I see, there's no code block that shows the complete app.py.

    (Also notice there's a typo in the word Enhancement).

     

    I hope it helps.

  • Avatar
    Charles Nadeau

    Thank you, Moran. I made the required fixes.

  • Avatar
    Moe Dev

    Thanx for a great tutorial.

    I was hoping to find something similar that shows how to do the same thing using the Tickets API, so that I can also set the ticket assignee and update custom ticket fields that are not visible to customers.

    Do you have a reference to such tutorial?

  • Avatar
    Ladislav Jenšík

     

    Hello,

    is here anyone who can help in creating my form?

    Thank you ;-)

  • Avatar
    Nicole - Community Manager

    Hi Ladislav, 

    What form are you trying to create? 

  • Avatar
    Ladislav Jenšík

    Hello Nicole,

    thank you for your question. I need HTML form for my tech help zone on my page, but creating of form code is very difficult for me.

    I need simple form for my customers for create tickets through my site.

    Thank you.

     

  • Avatar
    Bryan Flynn

    Hi Ladislav -- custom coding is beyond the scope of community support. However, Help Center has a pretty flexible built-in form that comes with it that you can use.

    This article describes the feature along with other information: Submitting and tracking support requests in Help Center

     

  • Avatar
    Chris Apgar

    Hi - thanks to everyone who has contributed to this tutorial and discussion, it's all been really helpful to me.

    What other options are there to do this without a standalone app (Python or otherwise) needing to run on a server? Hosting a new external app, even this simple one, would introduce a huge number of challenges in our environment - security/compliance, responsibility for maintenance, etc. I would guess that lots of other customers are in the same boat.

    I built the app and it runs great locally, but now I'm trying to reverse engineer the solution and build it in a way that doesn't need an app. Pure javascript would be wonderful but seems impossible for security reasons. My next guess would be PHP? If anyone has suggestions or documentation they can point me to, I would really appreciate it!

  • Avatar
    Robert Achu

    Hi,

    Is there a way to change the font-weight of the customForm title and form labels?

Please sign in to leave a comment.

Powered by Zendesk