Contact form for your website

Weronika Masternak
5 min read
updated: Oct 14, 2020

A contact form on the website allows visitors to communicate with the site owner by sending direct messages. In HelpDesk, you can add a contact form on your website as another ticket source.

Creating a contact form is available in every HelpDesk plan.

How to create a contact form

If you want to create and add your contact form, go to the “Settings” section and choose the “Contact forms” category.

Overview of contact form settings.

In the “Contact forms” settings category, click on the “Create contact form” button to create the form and then fully customize its details or assigned team.

Creating a new contact form button.

Contact form customization.

Now you can see the first settings of your new contact form. First, name your contact form to fit your goals, target site, or business needs. Then, select the team that will receive messages from the form. Also, note that you can decide which email address will be used as the reply address for the team.

Naming the contact form and assigning a team.

Sample name and assigned team for a new contact form.

In this example, we used “Sales Inquiry” as the contact form name and assigned a sales team to handle all tickets from this particular contact form.

In the next step, you can customize the form elements. Expand the “Customize form” options.

The “Customize Form” option for the contact form.

Here, you can be creative and enjoy many customization options for your new contact form. First, adjust elements that describe the purpose of the contact form, such as:

  • Header
  • Caption
  • Confirmation after sending the form
  • Text on the button describing the action the visitor will perform

Next, decide on the names of the contact form fields that you want to collect from your website visitors, such as:

  • Name
  • Email
  • Subject
  • Message
  • Data processing consent

Customization options for the contact form in HelpDesk.

Also, click on “Show more options” to open a list with elements dedicated to Error states or Validation messages.

The “Show more options” button for the contact form.

The good thing is that we’ve made it easy for you to get started and pre-filled the contact form with texts. See if you find it helpful and add your changes to meet your needs.

You can place a consent field in the contact form and adjust it with the appropriate text and links. Use this field for informational purposes or to obtain the recipient’s consent for data processing when sending the contact form.

The consent field in the contact form.

You can see real-time changes to your contact form on the right in the “Preview” area. Still, you can click the “Preview” button to open the contact form on the widescreen, empathize with site visitors, and see what your contact form will look like.

Filling in the data in the preview on the right and clicking “Send” won’t create a ticket. Your first attempt to submit through the preview result in a simulated ticket submission.
Filling in the data in the preview on the right and clicking “Send” won’t create a ticket. Your first attempt to submit through the preview result in a simulated ticket submission.

Using the “Preview” button to check out the contact form.

Generated “Preview” for the contact form that is created.

When you’re ready with the customization, click on the “Create form” button.

Clicking the “Create form” button.

You can edit, duplicate, or delete your contact forms at any time directly from your contact form list.

Use the “Duplicate” action to copy the entire content of the contact form you selected to reuse. This will save you a lot of time.

How to install a contact form

After the customization phase, it’s time to install the new contact form on your website.

Expand the “Website installation” instructions.

Expanding the “Website installation” instructions.

There you’ll find a specially generated installation code that was created based on your settings.

Dedicated installation code and instructions.

Click on the “Copy code” button. Then paste the copied code to embed the contact form on your website. Insert the code in a convenient place on your website, e.g., on the Contact page, About page, or footer.

Manual installation of a contact form.

How to add a contact form on WordPress

To add the HelpDesk contact form, go to your WordPress account, and edit the website. Choose a place where you want to add a new block with a contact form.

Click on the “+” button to add a new block.

Adding a block with a contact form on WordPress.

Scroll to the section with the widgets. Select “Custom HTML” block.

Adding a custom HTML on WordPress to add a contact form.

In this field, you can paste the generated HTML code.

The look of the HTML field on WordPress to add a contact form.

Completed field with HTML code on WordPress to add a contact form.

Click on the “Preview” button to see what the contact form will look like on your WordPress website.

Previewing a contact form on WordPress after adding an HTML code.

The preview of a contact form on WordPress.

Remember to save your changes.

What should you do when WordPress removes HTML iFrame tags?

Some versions of WordPress remove iFrame HTML tags to ensure a proper security level. If this happens to you, you’ll see the message, “Your browser does not allow embedded content.” The solution is the iFrame plugin, which allows you to get this feature through a WordPress webpage.

If your WordPress version blocks iFrame, use WordPress plugins to embed HTML.

This is the example of WordPress shortcode for the iFrame plugin:

[iframe src="link to your form" width="100%" height="638px" style="border: 0; overflow: hidden; overflow-x: auto;" sandbox="allow-scripts allow-popups"]

How many forms can you create?

You can create multiple contact forms for different teams in plans higher than Starter. Just select the team and generate a new code to add it in a convenient place on your website. If you need more than one contact form, check out available plans and upgrade your account.

You can use multiple contact forms to support different languages. Customize all fields and content to whatever language your website visitors speak.
You can use multiple contact forms to support different languages. Customize all fields and content to whatever language your website visitors speak.

Using multiple contact forms to support different languages.

Was this article helpful?

Got it!

Thanks for your feedback.

Thank you!

We’re happy to help.

RELATED ARTICLES

Workflow templates

Learn how to use workflow templates and avoid creating workflows from scratch.

Read the article

Automated workflows

Learn to create automated workflows in HelpDesk.

Read the article

Try HelpDesk today

Invite your team and explore HelpDesk features for free

Signup hand
14-day free trial Easy setup

Discover our other products