0% found this document useful (0 votes)
8 views30 pages

Ultimate Contact Form Module Guide

Uploaded by

Anthony Davis
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
8 views30 pages

Ultimate Contact Form Module Guide

Uploaded by

Anthony Davis
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CONTACT FORM ULTIMATE

Drag and drop contact form module that will help you create any
kinds of contact form using feature - rich contact form editor

A product of ETS-Soft

1
Contents
I. WELCOME 3

II. INTRODUCTION 3

III. INSTALLATION 4

IV. CREATE YOUR FIRST CONTACT FORM 5

1. General form settings 5

2. Adding input fields 6

3. Email configuration 8

4. Custom notification messages 13

5. General settings 15

V. DISPLAY CONTACT FORM ON THE FRONTEND 16

1. Display contact form on a separate page 16

2. Display contact form using short code 17

3. Display contact form using custom hook 18

4. Display contact form using pre-defined Prestashop hook 19

VI. MANAGE MESSAGES 20

VII. SETTINGS 23

1. Email templates 23

2. Import / Export 24

3. Integration 24

VIII. IP BLACKLIST 28

IX. STATISTIC 28

X. DASHBOARD 29

XI. THANK YOU 30

2
I. WELCOME

Thank you for purchasing our product. We hope to guide you through all the aspects of
the module installation and the module setup within this document (All screenshots are
taken from Prestashop 1.7). But if you have any questions that are beyond the scope of
this documentation, please feel free to contact us.

II. INTRODUCTION

If you are not using contact forms on your website, you are missing out one of the most
essential elements a well-built and interactive website should have. With contact forms,
you can generate leads, make sales and conversions, and understand your audience better.
Whether it be your personal blog or business website, the benefits of using contact forms
cannot be underestimated. And with our Contact Form Ultimate module, it will become
even more easy to create and design high-quality contact forms that attract users without
much effort on your part.

Contact Form Ultimate is an innovative contact form builder module for Prestashop
which can enable you to create unlimited contact forms. It supports all the necessary
input fields, easy to customize and also easy to manage.

* “Contact Form Ultimate” is compatible with Prestashop 1.6.x to Prestashop 1.7.x

3
III. INSTALLATION

1. Navigate to “Modules / Modules & Services”, click on “Upload a module /


Select file”

2. Select the module file “ets_cfultimate.zip” from your computer then click on
“Open” to install

❖ Click on “Configure” button of the module you just installed to open the
module’s configuration page.

Quick access: You can also navigate to Contact form Ultimate’s configuration page
through the quick access menu.

4
IV. CREATE YOUR FIRST CONTACT FORM

1. General form settings

From Dashboard, click on “Contact forms” box to navigate to Contact forms tab.
Click on "Add New" icon on top right of the panel.

Fill in required fields and select optional settings.

5
• Enable separate form page: turn on this option to create a specific web page to
display this contact form
• Form title: title of the form displayed on the front end.
• Contact form alias: the alias will appear on URL of this contact form instead of
form title
• Meta title, meta keywords, meta description: SEO elements to help you optimized
your contact form.

Click “Save” button to save your contact form.

2. Adding input fields

To build your contact form content, let’s navigate to “Form” subtab.

Every contact form is created from rows and input fields.

Step 1: Add a row to your form

• Click on “Add row” button


• Pick a suitable row template

6
Step 2: Add an input field

• Click on “Add input field”


• Select an input field you want
• Fill in the pop-up form with necessary info
• Click “Add input field” button

7
Repeat Step 1 and Step 2 until you complete your contact form.

Click “Save” to save your changes.

NOTE:

To add reCAPTCHA input field, you need to enable reCAPTCHA first. Find and read the
instruction to activate reCAPTCHA feature on page 25 of this documentation.

3. Email configuration

Click on the “Mail” subtab to open email configuration area for the contact form.

a. Email to admin

8
On this screen you will set up the email send to your store administrators when there is a
new contact messenger received.

You can see 2 sections of Email to admin tab: email options section and “Available
mail-tags” section.

Available mail-tags are provided from the Name of every input fields you added.

9
To: Enter here receiver's email address which you would like to receive messages from
customers

Bcc: When you place email addresses in the Bcc field of a message, those addresses are
invisible to the recipients of the email.

From: Enter here sender's email address which is used to send emails when customer
contact you via this contact form. If this field is blank, your website's configured SMTP
email will be used as sender email (in case no SMTP email is available, shop's email will
be used instead). To avoid emails are considered as spam by receiver's email service, you
need to enter an authorized email address, normally it should be your website's
configured SMTP email nor an email created with your website domain such as
contact@[Link]

Subject: Email subject used when an email is sent via the contact form

Reply to: Email address to be specified as "Reply email" when you click on "Reply"
button of your mail box when a message sent from the contact form to your email
(receiver email).

Message body: Email content that is sent to the receiver's email address. You can copy
and paste available mail-tags to get the form input value. For example:

File attachments: If customer send an attached file, you can download it via your email.

10
Click “Save” to save your changes.

b. Auto responder

Auto responder is an additional email sent to anyone you want when customer submits a
contact form. It's often used to send a confirmation email to customer when they
successfully submit a contact form.

Similar to “Email to admin”, you can set up email options using available mail-tags.

Click “Save” when you’re ready.

c. How to use mail-tags

You need to enter respective mail-tags into any configuration fields of the "Email to
admin" and "Auto responder" to get form input value.

11
For example: when creating contact form, you added an email input field and its name is
email-515. Contact Form Ultimate will automatically generate a mail-tag [email-515]
which can get the email value from your contact form.

Now back to the email options, you can see there are some configuration fields using
email addresses. If you want to add your customer email address received from contact
form, copy and paste the mail-tag [email-515] into these fields:

12
4. Custom notification messages

Contact Form Ultimate allows you to customize any notification messages that may
appear in certain situations when customers use the contact form on the frontend.
Notification messages are filled with default values which are suitable for most kinds of
contact form but if you would like to changes the messages you can do that easily by
clicking on "Notification" subtab. Here you can edit any messages you want in each
language.

13
14
5. General settings

Save message: Enable this option to save messages sent by customers to module back
office

Save attachments: Enable this option if you want to save attachments uploaded by
customer via the contact form. (Note that enable this may spend a lot of your disk space)

Mark messages from this contact form as "Star message": Automatically star
(highlight the messages sent via this contact form in the message list by a star) all
messages sent via this contact form

Open form by button: Enable this option if you want to display a "Contact button",
when customer click on this button the contact form will be displayed via a popup

Available display position (default Prestashop hooks): If you would like display the
contact form via pre-defined Prestashop hooks, just check on the hooks you want

Activate contact form: active or inactive this contact form

15
V. DISPLAY CONTACT FORM ON THE FRONTEND

Contact Form Ultimate offers 4 ways to display a contact form on the website's front
end:

• Display contact form on a separate page (with a friendly URL)


• Display contact form using short code
• Display contact form using custom hook
• Display contact form using pre-defined Prestashop hooks

1. Display contact form on a separate page

Contact Form Ultimate allows you to create a separate URL to display a contact form.
In order to enable this feature, on the "Info" tab, set "Enable separate form page" to
"Yes" then enter SEO settings for the page that include meta title, meta description, meta
keywords and contact form alias (friendly URL).

After you successfully save the configuration options, a form page URL will be
displayed. You can use that URL in your website menu or anywhere you want customer
to see the link to the contact form.

16
2. Display contact form using short code

Short code is available for each contact form, the short codes are in this format [contact-
form-7 id="CONTACT_FORM_ID"]. You can also copy the short code of each
contact form on the contact form list or in the form editing page. Paste the contact form's

17
short code anywhere on your CMS page, product description, category description, .tpl
file, etc. to display the contact form.

3. Display contact form using custom hook

Besides using short code, you can also use custom hook in this format {hook
h="displayContactForm7" id="CONTACT_FORM_ID"} to display a contact form
like how you do with short code. The only thing different is custom hook can be used in
template .tpl files only.

18
4. Display contact form using pre-defined Prestashop hook

In order to display the contact form in pre-defined Prestashop hooks such as header,
footer, product page, etc. When you set up the contact form, just check on the positions
you want on the " Available display position" option.

19
VI. MANAGE MESSAGES

Along with sending messages via email, Contact Form Ultimate also allows you to save
messages sent via contact forms to your website back office.

In order to save messages sent by customers via a contact form, in the form's
configuration section set "Save message" to "Yes", you can also enable "Save
attachments" if you would like to save attached files on your server.

NOTE:

Save attachments on server may cost lot of your hosting storage. Attached files sent by
customers will be sent to you via email, so if it's not necessary, don't save attachments.

To view messages sent by your customers, navigate to "Messages" tab. In the back
office, you can view and manage the messages easily with a professional message
management tool which provides a lot of helpful features such as message filter, mark
messages as "Read" or "Unread", star a message, bulk actions, reply a message, export
messages to .csv file, etc.

20
21
You can also see the number of messages received by each contact form in the “Contact
forms” tab.

22
VII. SETTINGS

1. Email templates

Contact Form Ultimate allows you to customize Email to admin template, Auto
responder template and Reply email template in the way you want.

23
2. Import / Export

This feature allows you to back up all contact forms' configuration and restore the contact
forms anytime you want. This also helps you copy contact forms quickly from website to
website.

3. Integration

In the integration section, you can setup contact forms' general settings and
reCAPTCHA. In your website back office, navigate to "Settings > Integration"

a. Global settings

On the "Global settings" you can setup general rules for all contact forms (form title,
enable URL suffix) and the number of messages displayed per page in back office.

24
b. reCAPTCHA

To get started with reCAPTCHA, you need a Google account and to register your site for
an API key pair.

Step 1: Go to Google’s reCAPTCHA admin page.

Step 2: Register your site.

• Select the type of reCAPTCHA you want


• Enter your domain
• Accept the reCAPTCHA Terms of Service
• Click “Submit”

25
Step 3: Get a site key and secret key

26
Step 4: Navigate to Settings > Integration > reCAPTCHA subtab. Enable
reCAPTCHA feature then enter your site key and secret key.

27
VIII. IP BLACKLIST

You can enter each IP on a line to block these IP addresses from submitting contact
forms.

IX. STATISTIC

In this tab, you can see a statistic chart of messages, views and replies received through
your contact forms.

28
At the bottom of “Chart” tab, you can select some conditions to filter the chart like:
contact form name, month and year.

From “Views log” tab, you can see the information of the customers who sent messages
via contact forms.

• You can add any customer’s IP address into IP blacklist by clicking “Add to
blacklist” button.
• “View location” button will navigate you to an info page with your customer
correct location.

X. DASHBOARD

29
XI. THANK YOU

Thank you again for purchasing our product and going through this documentation. We
hope this document is helpful and efficient in the complete setup of your website.
If you do have any questions for which the answer is not available in this document,
please feel free to contact us.

30

You might also like