BigCommerce
Insert your MightyForms form straight to your BigCommerce pages without any copy/paste!Using the MightyForms BigCommerce Widget
All you need to do is install the MightyForms app from the BigCommerce Marketplace.
1. Log in to your BigCommerce panel. Then, go to the “Apps” section and visit the “BigCommerce App Marketplace”.
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 MightyForms account or register for a new one.
Then you can go to any page, open it in Page Builder (button on the top right)
If the theme contains areas for widgets for the selected page, then you can drag the MightyForms widget from the left sidebar to the highlighted areas.
If necessary, the MightyForms widget can be duplicated, deleted, moved, left in the same place, or even replaced with another form.
In case you added, deleted, renamed a form on the app.mightyforms.com site, and the data in the drop-down list in the widget is not up to date, go to the MightyForms application and click on the Sync Forms button on top.
If the synchronization was successful, you will see a corresponding message:
If the MightyForms widget is not displayed in the PageBuilder, then go to the MightyForms application
*
Using MightyForms Embed code on BigCommerce
If you prefer to copy/paste your form's embed code to insert it 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.