BigCommerce


Using MightyForms Embed code on BigCommerce


MightyForms made it easy to embed your form in any BigCommerce page! Just follow the step by step. 

1. If you would like to install MightyForms on your BigCommerce site



2. In the search bar, type in ‘MightyForms‘ and select it from the available apps.

3. You will be redirected to our app’s page where you need to click the ‘Install’ button.

4. When the following screen appears, please click the 'Confirm' button.

5. You will be redirected to your MightyForms application where you can log in with your 

6. MightyForms account or register for a new one.

After successful login, you will see the dashboard page. Click "Create new form" at the top right side of the screen.




7. For example: here's how you can create a new form from scratch



8. Using the visual builder, you can drag & drop fields and make sure each field's is set how you need it (required, placeholder text, tooltip text, etc.). Then go to the Design section to style the form how you need it.

Once you are done setting up your form's automation and settings, press "Publish" on the top right side of the screen.




9. Next, click 'Share'



and copy the embed code.




This is the project id, it looks like this:


<!-- MightyForms Section -->

<div id="mf-YOUR_ID_HERE"></div>

<script src="https://form.mightyforms.com/loader/v1/mightyforms.min.js"></script>

<!-- End MightyForms Section -->


Example for our case: 


<!-- MightyForms Section -->

<div id="mf-88f7c361-d662-4805-b6c5-fb12675ca44f"></div>

<script src="https://form.mightyforms.com/loader/v1/mightyforms.min.js"></script>

<!-- End MightyForms Section -->


Just save this code anywhere, or copy to clipboard.


10. Now, go to any product page, scroll to "Description"  section, and click to "Insert/Edit Media" icon on the right side of the toolbar.



Click to "Embed" tab, paste string that you copied at the previous step, and click "Ok".

Then, save the page.




11. If you wish to have the form on any web page, go to Storefront > Web Pages > find the page to edit. Add the code through either HTML editor or change the page type to RAW HTML and just paste the code there.



12. That’s it!  Go to the product page or any other page where you added the code, and you will see the embedded form.



If you don't need the form anymore, the easiest way to remove it - just make left-click to white space, and press Backspace or Delete on the keyboard.




Are you a BigCommerce user? Consider supporting MightyForms by leaving us a review.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.