How to Add a Form to Your PrestaShop Website

May 26, 2022

PrestaShop is a free shopping cart platform that helps small to large businesses build and run a successful online store. They’re committed to providing the best shopping cart experience for merchants and customers.

Please read below if you have a PrestaShop website and want to embed your Jotform form to a page.

Allow Iframes on HTML Fields

By default, PrestaShop does not allow iframe on page contents or product descriptions. You will have to enable the support for iframes from your PrestaShop dashboard. You can do it in just a few clicks.

  1. In your PrestaShop dashboard, expand the Shop Parameters menu on the left side.
  2. Click the General option.
  3. Toggle Allow iframes on HTML fields to “Yes”.
  4. Scroll down, and click the Save button at the bottom.
prestashop-allow-iframe.png

Preparing Your Embed Code for PrestaShop

  1. In the Form Builder, go to the Publish tab.
  2. Choose Embed on the left then select the Iframe option.
  3. Click the Copy Code button.
jotform-prestashop-iframe-embed.png
  1. Edit the code and remove the script part by deleting all the lines after </iframe>.
  2. Next, search and delete onload="window.parent.scrollTo(0,0)" from the iframe code, so the final code should look like the following:
<iframe
id="JotFormIFrame-221442450400035"
title="Form"
allowtransparency="true"
allowfullscreen="true"
allow="geolocation; microphone; camera"
src="https://form.jotform.com/221442450400035"
frameborder="0"
style="
min-width: 100%;
height:539px;
border:none;"
scrolling="no"
>
</iframe>

Note

You may need to adjust the form height from 539px to your actual form’s height.

Adding Form to PrestaShop

  1. In your PrestaShop dashboard, expand the Design menu on the left side.
  2. Click Pages from the list of options.
  3. At the top, click the Add New Page if you want to add a new page for the form. Otherwise, click the edit (pencil) icon on your existing page.
prestashop-edit-page.png
  1. In the Page content editor, click the Source code icon.
prestashop-source-code-view.png
  1. Paste the modified iframe code in the Source code editor.
  2. Click Ok. At this stage, you won’t see the form.
prestashop-source-code-save.png
  1. Finally, click the Save and Preview or Save button to save the changes to the page. The Save and Preview button will open the page on a new tab where you can see the full preview of the page with the form in it.

Note

We have installed and used PrestaShop version 1.7.8.5 for the above steps and screenshots.

Do you have any questions, suggestions, or feedback? Please leave a comment below. You can also reach us for your inquiries by creating a support ticket.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comment:

Podo CommentBe the first to comment.