Hiding the 'Your email address' field | Community
Skip to main content

Hiding the 'Your email address' field

  • June 28, 2024
  • 3 replies
  • 0 views
J

Is there a way to hide the default ‘Your email address’ field from a ticket form using JavaScript/other? We allow users at our retail locations to submit tickets after-hours from an iPad that is not signed in to any accounts, and we capture their info using a dropdown field for their store number; most of the users submitting these tickets would have no idea what the store's email address is, and it would be much easier if we could simply hide the field, or even turn it into another field entirely without the email validation being done (for instance, capturing the user's phone # rather than email address.)

    3 replies

    Davor
    • Davor
    • June 29, 2024

    Hey! 

     

    Not an expert, but this might be worth a shot. Here's the articles I used as sources for reference: 

    Add Custom Field for Store Number:

    • Go to Admin Center > Objects and rules > Tickets > Fields.

    • Click the Add field and create a dropdown field for the store number.

       

    Customize the Help Center JavaScript:

    • Go to Guide Admin > Customize design and then Edit code.
    • In the script.js file of your theme, add the following JavaScript code to hide the email field and autofill it if necessary:
    • $(document).ready(function() {
    // Hide the email field
    $('#request_anonymous_requester_email').hide();
    
    // Alternatively, you can set a default value if required
    $('#request_anonymous_requester_email').val('default@example.com').hide();
    
    // Hide the email label
    $('label[for=request_anonymous_requester_email]').hide();
});

    Ensure the Form is submitted without Email:

    • Since the email field is a default required field in Zendesk, you may need to ensure that it has a default value as shown above. This approach ensures that the form can be submitted without requiring user input for the email field.

    If this works, you're good to go! If not…

    Alternative Method Using API:

    • If the JavaScript method does not suffice, consider creating a custom form using Zendesk API. This allows complete control over the form fields and eliminates the default email requirement:
      • Zendesk License: Ensure you have a Zendesk Support account with API access. The API is available on all Zendesk Support plans, but some customization options may require higher-tier plans (e.g., Professional, Enterprise).
      • API Token: You need an API token from your Zendesk account.
         

    Enable API Token Access

    • Navigate to Zendesk Admin Center:
      • Go to Admin Center > Channels > API > Settings.
    • Enable Token Access:
      • Toggle on the Token Access option.
    • Create a New API Token:
      • Click Add API token.

      • Copy and save the token in a secure place.

         

    Create a Custom HTML Form

    • Create an HTML file (index.html) and add the following form code. This form will be used to collect user inputs and submit them via the Zendesk API.

       

    <!DOCTYPE html>
<html>
<head>
    <title>Submit Ticket</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="ticketForm">
        <label for="storeNumber">Store Number:</label>
        <select id="storeNumber" name="storeNumber">
            <option value="Store 1">Store 1</option>
            <option value="Store 2">Store 2</option>
            <!-- Add more store numbers as needed -->
        </select>
        <br>
        <label for="description">Description:</label>
        <textarea id="description" name="description" required></textarea>
        <br>
        <button type="button" onclick="submitTicket()">Submit</button>
    </form>

    <script>
        function submitTicket() {
            const storeNumber = $('#storeNumber').val();
            const description = $('#description').val();

            const data = {
                request: {
                    requester: {
                        name: `Store ${storeNumber}`,
                        email: 'default@example.com' // Default email to bypass required field
                    },
                    subject: `Issue reported by store ${storeNumber}`,
                    comment: {
                        body: description
                    }
                }
            };

            $.ajax({
                type: "POST",
                url: "https://YOUR_ZENDESK_DOMAIN/api/v2/requests.json",
                headers: {
                    "Authorization": "Basic " + btoa("YOUR_ZENDESK_EMAIL/token:YOUR_ZENDESK_API_TOKEN"),
                    "Content-Type": "application/json"
                },
                data: JSON.stringify(data),
                success: function(response) {
                    alert('Ticket created successfully: ' + response.request.id);
                },
                error: function(error) {
                    console.error('Error creating ticket:', error);
                }
            });
        }
    </script>
</body>
</html>

    Please replace YOUR_ZENDESK_DOMAIN, YOUR_ZENDESK_EMAIL, and YOUR_ZENDESK_API_TOKEN with your actual Zendesk credentials.


    Host the HTML Form

    • Choose a Hosting Service:
      • The HTML file can be hosted on any web hosting service, such as GitHub Pages, Netlify, or your internal server.
    • Upload the HTML File:

      • Follow the instructions of the chosen hosting service to upload and publish the HTML file.

         

    Customize the Zendesk Guide (Optional)

    • If you want to embed this form in your Zendesk Guide:
    • Navigate to Guide Admin:
      • Go to Guide Admin > Customize design and then Edit code.
    • Add Custom HTML:

      • Embed the hosted form URL in an iframe or use a script to fetch and display the form.

         

    Testing the Custom Form

    • Access the Form:
      • Open the hosted HTML file in a web browser.
    • Submit a Ticket:
      • Fill out the form fields and click the Submit button.
    • Verify Ticket Creation:
      • Check your Zendesk Support dashboard to ensure the ticket was created successfully.


    Hope this helps! 

      J
      • Justin28
      • Author
      • July 1, 2024

      @davor you're an absolute legend. The first suggestion you made under ‘Customize the Help Center JavaScript’ gave me what I needed right away. Thank you so much!!

        Davor
        • Davor
        • July 1, 2024

        @justin28 happy to help man! :) 

          Terms & ConditionsCookie settingsAccessibility statement