4 Easy Ways to Display Contact Forms on Your PrestaShop Front Office
Contact Form Ultimate provides a powerful tool to display forms on your PrestaShop website. With multiple display options, you can choose the best method to match your website design and functionality. This guide will walk you through 4 different ways to display contact forms on the front end, complete with examples to ensure clarity.
1. Display contact form on a separate page
This method allows you to create a dedicated page with a friendly URL for your contact form, offering a seamless user experience.
How to set up:
Go to the Info tab of your contact form in the Contact Form Ultimate module.
Set "Enable separate form page" to "Yes".
Fill in the SEO settings, including:
- Meta title (for example: Contact Us – Camellia Studio)
- Meta description (for example: Get in touch with Camellia Studio for inquiries and support)
- Meta keywords (for example: Contact, Camellia Studio, Support)
- Contact form alias or friendly URL (for example: contact-us)
Example:
If your website is www.camelliastudio.com, the form URL will appear as: www.camelliastudio.com/contact-us. You can now link this URL in your website’s menu under "Contact Us", or place it in the footer for quick access.
2. Display contact form using shortcode
Shortcodes allow you to easily embed contact forms anywhere within your CMS pages, product descriptions, or category pages.
How to set up:
Copy the shortcode for your contact form from:
- The contact form list.
- Or the form editing page.
Use the shortcode format, for example: [contact-form-7 id="CONTACT_FORM_ID"]
Paste this shortcode into any CMS page, product description, or text editor where you'd like the form to appear.
Example:
You’re running a promotion for a new product, "Floral Maxi Dress". To add a contact form to the product description for customer inquiries:
- Copy the shortcode: [contact-form-7 id="12"].
- Paste it in the product description editor.
- Save your changes.
On the product page, the contact form will appear directly below the description, enabling customers to ask questions easily.
3. Display contact form using custom hook
For advanced users, custom hooks can be used to integrate forms directly into your website’s .tpl template files.
How to set up:
Copy the custom hook format: {hook h="displayContactForm7" id="CONTACT_FORM_ID"}
Open the relevant .tpl file in your theme, such as:
- product.tpl for product pages.
- footer.tpl for the footer area.
Paste the custom hook code where you want the form to appear.
Example:
To display a contact form for personalized inquiries at the bottom of every product page:
- Copy the custom hook {hook h="displayContactForm7" id="12"}.
- Add it to the product.tpl file below the product details section.
When customers view any product, the contact form will be available at the bottom of the page.
4. Display contact form using pre-defined PrestaShop hooks
Leverage PrestaShop’s pre-defined hooks to place the contact form in strategic areas like the header, footer, or sidebar without modifying template files.
How to set up:
In the form setup, find the option "Available display position".
Select the positions where you’d like the form to appear, such as:
- Display footer to add the form in the footer.
- Display header to show it in the website’s header area.
- Display product page for product-specific inquiries.
Example:
To display the contact form in the footer:
- Check the "Display footer" box.
- Save your changes.
The contact form will now be visible across all pages in the footer section, ensuring easy access for users.
With these 4 methods, you can ensure that customers always have a convenient way to contact you, enhancing their experience on your PrestaShop store.