How to Create Embeddable Web Forms for your website

A web form allows you to embed a contact form and knowledge base directly into your company’s website or Help Center. This enables users to:

• View knowledge base articles.
• Submit inquiries or create tickets using the web form.

Tickets created through the web form will appear in both the agent portal and the customer portal, ensuring seamless support tracking.

Watch this video for more details about web forms:

How to add a new web form

To add a new web form, follow these steps:

1. Go to Admin → Web Forms.

2. Click the Add Web Form button on the top-right side.

   

3. On the Add Web Form page, fill in the following:

   • Web Form Name: Enter a name for the form.

   • Brand: Select the brand associated with this form.

   • Auto Tag Ticket: Optionally, select tags to auto-apply to tickets created via this form.

     

   • Form Option:

     • Contact Form – Displays basic fields (Name, Email, Phone Number, Subject, Description).
     • Contact Form with Ticket Fields – Displays basic fields mentioned in the Contact Form above plus all custom/system fields mapped to the chosen brand.

   • Form Title: Enter the title to display on the form.

   • Form Description: Add a description for the form.

   • Footer Message: Add a footer message if needed.

   • Confirmation Message: Enter the message shown after form submission.

     

   • Submit Button:

     • Name: Customize the button text.
     • Background Color and Text Color: Adjust colors as needed.
     • Form Height: Choose the height of the form.
     

   • Additional Options:

     • Include GDPR consent in forms.

     • Allow users to attach files (Enable this option to let users upload files via the web form. Users can attach up to five files.)

     • Enable Google reCAPTCHA (recommended for spam prevention).

       
       
       

For advanced customization, you can:

• Custom CSS: Add CSS code to style the form.

• Custom JS: Add JavaScript for custom behavior.

  

Optionally, enable Knowledge Base integration:

• Enable Knowledge Base: Displays KB articles in the web form pop-up.

• Header Text: Text that appears as the KB title.

• Category: Choose categories to display.

  

Learn more on How to Enable Knowledge Base in Web Form.

4. Click Add to create the web form.

5. After clicking Add, a dialog box will appear displaying the Embed Code for your web form.

   • This code snippet is in HTML <script> format.
   • Copy the code by clicking the Copy button.
   • Paste this code into your website or product where you want the web form to appear.
   

You can also find the embed code on the web form’s list page.

Using ticket history properties, you can identify the source of the submission. On the ticket history tab, you can find two properties:

• Source: Displays the form name (useful if multiple web forms exist).

• Source Site URL: Shows the web page URL where the form was hosted (if available).

  

To create a new web form, an agent must have permission to Manage Settings.

Frequently Asked Questions (FAQs)

1. What is a web form in BoldDesk?
A web form is a feature that allows you to embed a contact form and knowledge base directly into your company’s website or Help Center. Users can view articles and submit inquiries or tickets through the form.

2. Where do tickets created via the web form appear?
Tickets submitted through the web form will appear in both the agent portal and the customer portal, ensuring seamless tracking and management.

3. Can I create multiple web forms for one brand?
Yes. Web forms are brand-based, and you can create multiple web forms for a single brand.

4. What types of forms can I create?
You can choose between:

• Contact Form – Displays basic fields like Name, Email, Phone Number, Subject, and Description.
• Contact Form with Ticket Fields – Displays basic fields plus all custom/system fields mapped to the selected brand.

5. Can users attach files when submitting a web form?
Yes. You can enable the Allow users to attach files option. Users can upload up to five files when submitting the form.

6. How do I embed the web form on my website?
After creating the web form, BoldDesk provides an HTML <script> embed code. Copy this code and paste it into your website or Help Center where you want the form to appear.

7. Can I customize the web form’s appearance?
Yes. You can:

• Change the submit button text, background color, and text color.
• Adjust the form height.
• Add Custom CSS and Custom JS for advanced styling and behavior.

8. Is it possible to display knowledge base articles in the web form?

Yes. Enable the Knowledge Base option in the form settings. You can also set:

• Header Text for the KB section.
• Select categories to display relevant articles.

9. How can I track which web form was used to submit a ticket?

In the ticket history, you can view:

• Source – Displays the web form name.
• Source Site URL – Shows the URL of the page where the form was hosted (if available).

10. What permissions are required to create a web form?

Agents must have the Manage Settings permission enabled to create and configure web forms.

11. Does BoldDesk support API integration for web forms?

Yes. BoldDesk provides a REST API for integrating existing web forms with the help desk system. Learn more on:

• REST APIs
• API documentation