Formcrafts - a form and survey platform for Salesforce, HubSpot, etc
  1. Templates
    1. All templates illustration
      All templates
    2. Application forms illustration
      Application forms
    3. Calculation forms illustration
      Calculation forms
    4. Lead generation forms illustration
      Lead generation forms
    5. Customer service illustration
      Customer service
    6. Evaluation forms illustration
      Evaluation forms
    7. Survey and feedback illustration
      Survey and feedback
    8. Operations forms illustration
      Operations forms
    9. Payment forms illustration
      Payment forms
    10. Booking and registration illustration
      Booking and registration
    11. Salesforce forms illustration
      Salesforce forms
    12. Other forms illustration
      Other forms
  2. Features
    1. 18 Form Fields illustration
      18 Form Fields
    2. 19 Integrations illustration
      19 Integrations
    3. Conditional Logic illustration
      Conditional Logic
    4. Multi-step Forms illustration
      Multi-step Forms
    5. Calculations illustration
      Calculations
    6. Partial Submissions illustration
      Partial Submissions
    7. Save & Resume illustration
      Save & Resume
    8. Payments illustration
      Payments
    9. Hidden Fields illustration
      Hidden Fields
    10. Dynamic Dropdowns illustration
      Dynamic Dropdowns
    11. Engagement analysis illustration
      Engagement analysis
    12. Multilingual forms illustration
      Multilingual forms
  3. Pricing
  4. Help
  5. Login
  6. Signup
    →
  • Help index
  • Features
    • Conditional logic
    • Prefill forms
    • Multi-step forms
    • Calculations
    • Partial submissions
    • Field references
    • Save and resume
    • Hidden fields
    • Dynamic lookup
    • Workflows
    • Dynamic dropdowns
    • Multilingual forms
    • Privacy mode
    • Success message
    • Form redirect
    • GA/GTM
    • Accept payments
    • Linked forms
    • Disable form
  • Styling
    • Custom CSS
    • Custom fonts
    • Color scheme
    • Form background
  • Analytics
    • Test mode
    • Overview
    • Field analytics
    • Form engagement
  • Workflows
    • Send emails
    • Form redirect
    • Success message
    • Webhooks
    • Create PDF
    • ActiveCampaign
    • Asana
    • Mailchimp
    • Front app
    • Freshdesk
    • Google Sheets
    • Pipedrive
    • Linear
    • Klaviyo
  • Sharing
    • Custom form link
    • Embed on a page (inline)
    • Embed on a page (popup)
    • Embed in emails
    • Embed on WordPress
    • Embed on Shopify
    • Embed on Squarespace
  • Salesforce
    • Overview
    • Create records
    • Update records
    • Related records
    • Dynamic picklists
    • Attach files
    • Create PDFs
    • Form prefill
  • HubSpot
    • Overview
    • Create contact form
    • Create lead capture form
    • Create customer survey
    • Prefill HubSpot form
    • Embed on HubSpot page
    • Uninstall
  • Zendesk
    • Create ticket form
    • Create CSAT survey
    • Embed on Help Center
    • Prefill ticket form
  • Admin
    • Users
    • Custom domain
    • Vanity subdomain
    • Subscription
  • Developers
    • Embed Library
    • API keys
    • API v1
    • API v2
  • Others
    • Partner program
    • GDPR compliance
    • Workflow logs
    • White labeling
    • Form speed
    • Zapier
    • Migration
  • Contact
  1. Help
  2. ›
    Zendesk
  3. ›
    Embed on Help Center

Embed Forms on a Zendesk Help Center

On this page
  1. Get the field IDs
  2. Get the embed code
  3. Edit the Zendesk theme

Before you start make sure you already have a ticket form that is connected to Zendesk. If you don’t have a form yet, following the instructions here to create a Zendesk ticket form.

Get the field IDs

In the ticket form tutorial we created Name and Email fields to ask for the user’s name and email address.

If the users is logged into the Help Center, we can use the user’s name and email address to prefill these fields.

To make this work grab the field IDs of the Name and Email fields.

Finding the field ID
Finding the field ID

Get the embed code

Go to Share → Embed on a page in the form builder. Here you can enable Seamless mode which will modify your embed code to ensure your form is without borders and background, allowing it to blend seamlessly with your Zendesk Help Center.

Copy the inline embed code on this page.

Edit the Zendesk theme

The below steps also work when embedding the form in a Zendesk article. However, before you proceed you have to allow the option to display unsafe content in your Zendesk Guide.

  1. In Guide click the Settings icon in the sidebar.
  2. Under Guide Settings > Security, check Display Unsafe Content.
  3. Click Update.

Go to your Zendesk Guide and click on Guide Admin → Customize design and click on the Customize link next to your theme. Now look for the Edit code button.

We will now edit the new_request_page.hbs file. This file is used to display the form for creating a new ticket.

If this file already has a form, you can remove it and replace it with the embed code we copied earlier.

Edit the Zendesk theme to add a custom form
Editing the Zendesk theme file

Your embed code should look something like this:

<div
data-fc-seamless="true"
data-fc-key="abcd1234"
style="max-width:500px;height:600px"></div>
<script src="https://app.formcrafts.com/embed.js"></script>

We have to modify this to prefill the name and email fields. Assuming the field IDs are field1 and field2, we can modify the embed code to:

<div
data-fc-prefill-field1="window.HelpCenter.user.name" 
data-fc-prefill-field2="window.HelpCenter.user.email"
data-fc-seamless="true"
data-fc-key="abcd1234"
style="max-width:500px;height:600px"></div>
<script src="https://app.formcrafts.com/embed.js"></script>

window.HelpCenter.user.name and window.HelpCenter.user.email are the variables that Zendesk uses to store the user’s name and email address.

Now click on Publish and preview your Help Center. You should see the form embedded in the new request page.

Custom form on the Zendesk Help Center - new request page
Preview the updated new request page
Minimal, fast, and powerful. Try now.
Formcrafts - a form and survey platform for Salesforce, HubSpot, etc

Subtle Web Inc,
225 Railway St E,
T4C 2C3, Cochrane AB

Salesforce AppExchange partner logo HubSpot app partner logo
Templates
Application formsLead generation formsSurvey & feedback formsEvaluation formsSupport request formsBooking & registrationContact forms
Comparisons
vs AllFormAssemblyTypeformJotformWufooSurveyMonkey
Features
Conditional logicSalesforce formsHubSpot formsZendesk ticket formsEmail formsIntegrationsForm fields
Resources
Help centerBlogDeveloper APIGDPRStatusReport abuseContact us
Company
About usNonprofitCase studiesSecurityTerms and privacy