Learn X-Cart

Extremely flexible E-Commerce platform with a vast amount of features and integrations!

• Last Updated: 04/13/2020
• ( 7 minutes reading )

How to enable Contact Us form and secure it with Google reCaptcha in X-Cart

Introduction

Displaying your contact email address directly on your store pages is not recommended nowadays as you can quickly become a target for spam attacks. Therefore, enabling a Contact Form on your website is a must. Not only are you going to reduce spam messages, but you are also going to save a lot of time and effort for the visitors who have questions or feedback they want to share.

Fortunately, X-Cart comes with a default "Contact Us" Form, which can be enabled with a few mouse clicks. The Form is empowered by the "Contact us" Addon. Hence, before we begin, please make sure you have the Addon installed and enabled in your store. If this is not yet done, please refer to our tutorial on How to install Addons in X-Cart.

In this tutorial, we are going to guide you on how to enable, customize, and configure Google reCaptcha on your Contact Form.

 

Accessing the Contact Us Addon settings

For a start, we have to get you to the "Contact us" Addon settings. Please log in to your X-Cart Admin Area and click on the "My Addons" link positioned in the left-hand side menu bar.

 

Access My Addons

 

Once this is done, you are doing to be redirected to a new interface (X-Cart Service Screen). Please use the search tool to locate the "Contact us" addon. When it is listed in the search results, you have to click on the "Settings" link.

 

Access the Contact us Addon settings

 

Upon doing that, you are going to be redirected to the Addon settings page where you can enable the Contact Form and configure Google reCaptcha on it.

 

Enabling the Contact Us Form

On the new page, you can see the Addon settings are split into two separate sections - "Contact us" addon settings" and "reCAPTCHA" which we are going to review in the following section of this guide.

In the first section, please do the following:

  • Enable Form - Make sure the toggle switch is to "Yes" to enable the Form on your storefront.
  • Email address of the message recipient - Define the recipient's email address. The address specified in this field is going to receive all messages submitted through the "Contact Us" form.
  • Show email as text - This setting determines whether the recipient email address is displayed within the Contact Form on the storefront. In case, you want the address to be hidden, make sure to disable it.

 

Enable Contact Form

 

When ready, please click on the "Submit" button to enable the Contact Form on your store.

 

Protecting the Contact Form with Google reCaptcha

Google reCaptcha is designed to identify humans from bots and consequently, to prevent spam, phishing, and hacker attacks on your website. In X-Cart, it is empowered by the Google reCAPTCHA Addon.

After the Addon is installed and enabled, you have to provide the "Site key" and the "Secret key" back at the "Contact us" Addon settings page.

You have to acquire the required keys from your Google reCAPTCHA account.  In case you do not have an existing account, please go ahead a create a new one by going to google.com/recaptcha/.

Once your account is created, you have to register a new site.

 

Register Google reCaptcha site

 

Under the "Label" field, please enter a title to help you easily recognize this site in future.

From the options below, please select your desired verification type. If you are uncertain, what is the exact difference between these types, please take a moment to review Google's official documentation.

You also need to enter the domain name of your X-Cart store into the empty field available under "Domains". Please note that it includes all subdomains associated with your primary domain name.

 

Accept Google's Terms

 

Make sure to tick the "Accept the reCAPTCHA Terms of Services" checkbox below and then click on the "SUBMIT" button.

Afterward, you are provided with the required "Site Key" and "Secret Key". Please keep these keys safe as they are sensible data.

 

reCaptcha Keys

 

Now you are all set here. Please, go back to the "Contact us" Addon settings page in your X-Cart Admin Area.

Under the "reCAPTCHA" section, please select the desired reCaptcha version and enter the "Site Key" and "Secret Key" into the corresponding fields.

 

Configure Google reCaptcha

 

When ready, please click on the "Submit" button to apply the changes.

 

Customizing the Contact Form

We do believe you would like to customize the default Contact form and give it a personal touch. You can edit the default value in the text fields as well as the instruction message in the Form. Detailed instructions on how to achieve that you can find in our tutorial based on How to edit the Text Labels in X-Cart.

In case you are using the Simple CMS Addon in your X-Cart store, the "Contact Us" Form is by default added to the Primary (Top) menu. On some occasions, you might want to display it in the Footer menu instead. This could be easily done by navigating through the left-hand side menu bar to Content Menus.

 

Primary and Footer menus

 

You can see that a separated tab represents each of the menus. First, you have to delete the "Contact us" page item from the "Primary menu" tab by clicking on the Trashcan icon and the "Save changes" button afterward.

 

Delete Contact form from Primary menu

 

Next, you have to switch to the "Footer menu" tab and click on the "New item" button. Upon doing that, a new empty row appears where you have to specify the following details:

  • Item name - In here, you need to specify the name of the Contact Form as it is going to be shown in the menu.
  • Link - Usually, you need to define the URL address in this field. However, in this case, you can enter "{contact us}" as this string represents the Contact Form in the X-Cart system.
  • Visible for - This option lets you control the accessibility of the Contact Form. If you want to restrict it only to a specific group of users, please make sure to select it from the dropdown menu.

 

Add Contact Form to Footer Menu

 

When ready, please click on the "Save changes" button to add the Form to the Footer menu.

With this done, you are ready to go ahead and check your storefront. You need to ensure the menu links redirects to the Contact form. Also, confirm if the Form appears as expected. And most importantly, whether the messages submitted through it are sent and delivered successfully. To do so, please submit a test email. Once you ensure it all functions correctly, you are good to go!

 

Well done! You have just managed to set up your Contact Form and allow your customers to easily reach you out. We hope you have managed to configure the Form by following our instructions easily, and we would like to welcome you to contact our Support Team if you have faced any difficulties or error messages.

 

 

...
Sebahat
Content Marketing Specialist

Sebahat is a young and bright woman who has become an invaluable part of our team. She started as a Customer Care Representative, mastering that role and, along the way, growing into a tech-savvy individual who is well acquainted with every support layer of the company. Driven by her aim to improve our customers’ experience constantly, she is committed to enhancing the extraordinary support we deliver.