How to Set and Customise a Pop-up Contact Form on My Website?

What You’ll Achieve by the End of This Guide: By following this guide, you will get a clear understanding of setting up and customising the pop-up contact form for your website.

What is a difference between Contact Form Widget and Contact Form Pop-up?

The widget and the pop-up are tools that allow website visitors to send messages directly to the website owner. Widget is a fixed element on the page that looks like a block and can be added to any page.

While the pop-up will be displayed as a modal window when a user navigates to the page you've selected (or any other page you prefer).

Tip: The pop-up contact form will be useful for you, if you want to communicate with customers via phone. It is also possible to add an email field in this form, but you won’t be able to mark the email field as mandatory.

Steps to Set Your Contact Form Pop-up

Access the Website Editor:

In the Hocoos Dashboard, click on the Edit website button.

Create the Contact form pop-up:

In the Website editor click on the All pages section.

Locate the Pop-ups button and tap on it.

Click the Add new pop-up button to proceed.

In the Choose widget type block find the Pop-ups section and click on the Contact Us type, so all variants of Contact Us pop-ups and widgets will be viewed.

Tip: If you choose to set the Contact form pop-up, which will be displayed in the right bottom of the page, be aware that it will cover the support customers chat.

Choose the pop-up type you like the most.

In the left sidebar menu of the Website editor the pop-up’s settings are represented.

Tip: Important - two pop-ups can’t be assigned after one website (even if they are located on the different pages). Here, you need to decide what pop-up is preferable for your situation: the Subscribe form or Contact form one.

Activate your Contact form pop-up, by clicking on the Toggle button.

Customise the Contact form pop-up:

To customise the fields the Contact form pop-up will collect, click on the Settings button.

Here you can rename the fields and set some of them as mandatory (which gives you the opportunity to collect more useful information about your customers).

Tip: To rename the field click on it and enter a new name. Put the tick into the checkbox to label the field as mandatory, otherwise remove the tick from the checkbox to label the field as not mandatory. To add a new field click on the Add custom field button.

Keep in mind that you can’t mark an email field in the Contact form pop-up as mandatory. This type of pop-up is used mostly to collect phone numbers and brief information about the customer.

Features of assigning the field as mandatory and adding custom fields in the Contact form pop-up are available only for Premium accounts.

The Contact form pop-up has its own customization option buttons (much more like every other pop-up, but with some differences):

Use the Change variation button if you want to change the type of pop-up.

The Hide/Show button gives an option of hiding Title and Description for the pop-up.

Tip: Try not to overdo the hiding option - customers still need to know what kind of form the website asks them to fill out.

The Widget design button will give more color options.

Tip: Can be useful to add some contrast.

Click on the Pop-up animation button to see the type of animation chosen.

To see more types of animation tap on the animation name chosen, and the dropdown menu will be shown.

Next one is the Confirmation pop-up button. Click on it and the preview for the Confirmation message will show up.

When the Confirmation message is displayed, we have one more feature available - to Hide/Show the Confirmation title and Confirmation description in the Confirmation message.

Tip: Let, at least, one of them be, cause it’s important to show the customer that their request was successfully received.

The Display rules button is the most feature-rich button. In here lies the whole set of rules for your pop-up.

Let’s delve into the set of rules:

Rule number one - Triggers. You can choose from three options:

Timer - shows the pop-up to the customer after a planned period of time.

Exit time - shows the pop-up right before the customer is going to leave the website.

Scroll X% of the page - shows the pop-up after the client scrolled set percentage of the web-page.

Rule number two - Display on page. Here you have two options:

All pages - shows the pop-up on every existing page of your website.

Specific page - shows the pop-up only on a specific page.

Rule number three - Frequency. The two options here are:

X time per session - shows the pop-up planned number of times, during the session.

Each page visit - shows the pop-up each time the customer visits the page (can be annoying if this option is accompanied with All pages display option - every time the customer will go through pages on your website, the pop-up will show up).

Rule number four - Targeting. Here are three options available:

All visitors - shows the pop-up to all visitors on your website.

Returning visitors - shows the pop-up to the visitors, who return to the website after the first session. Such a pop-up can be useful to lead customers to reach out to you.

Unique visitors (new) - shows the pop-up to new visitors only.

The last button is - Remove widget button that allows to delete the Contact form pop-up without trace.

You’re Good to Go! Now that you know how to set up your pop-up adding your personal touch, it will help you provide the best user experience and gain your customers' trust.

See Also:

Troubleshooting

If you run into issues while customising or testing your contact pop-up, here are some common problems and solutions:

1. The Contact Form Pop-up Doesn’t Appear on the Website

Possible Cause: The form may not be enabled by default or may be hidden due to customization settings.
Solution: Go to the Hocoos Dashboard and click the Edit website button.

Click on the All pages button in the left sidebar of the Website editor.

Find the Pop-ups section and click on it.

Locate the Contact us pop-up and check if it’s active.

Tip: You can enable or deactivate the pop-up by switching the Toggle button.

If this way didn't work for you, you may need to look into the pop-up display rules:

If locating the Contact us pop-up and checking if it’s active didn’t help, then click on the Gear button and choose Edit option.

Tap on the Display rules button.

Find the Frequency option and check its behaviour.

Tip: If you choose to show your pop-up “X time per session” and your session on the site has expired, the pop-up will not be displayed.

If your pop-up still doesn’t seem to work correctly. Find the Targeting option and check its behaviour as well.

Tip: If you've set your pop-up to appear only to “Unique (new) visitors”, and you've already visited the site, you (and other returning visitors) won't see the pop-up.

2. I Didn’t Receive a Confirmation Message After Submitting the Contact form

Possible Cause: There could be an issue with the form submission or a delay in server response.
Solution: Try refreshing the page or clearing your browser cache. If the issue persists, contact support.

3. I Didn’t Receive an Email with Customer’s Contact Information

Possible Cause: Perhaps you are checking the wrong email address.
Solution: Check the email address that is set for receiving the information from the Contact form pop-up. For doing that go to the Hocoos Dashboard and click on the Settings section.

Then find the System Notification section.

Locate the General emails category. Here you will see the email address used for collecting all the contact requests.