Add your Magic Form onto your Wordpress website! Below are step-by-step instructions on how to complete this implementation.
Adding the code required for Magic Forms into Wordpress requires the use of Wordpress Plugins. Specifically, a plugin that will allow you to add a script into the website header.
We recommend WPCode plugin.
Install a Wordpress Plugin to add code into the Header
You'll first need to install a Wordpress Plugin in order to add the Magic Form code into the Header of your Wordpress website.
We recommend WPCode.
Grab the Magic Form code
You can grab the Magic Form embed code from the Magic Form Sidebar. First click on the Magic Form Block in your Loop.
Next, click Start Setup.
Copy the code by clicking Copy Code.
Add Magic Form code into Wordpress Header
Now head back to the Wordpress Plugin you installed to add code into the Header. If you're using WPCode, click on Code Snippets > Header & Footer from the Wordpress Dashboard. Note this step may be different if you are using a different Plugin.
Before saving, DELETE the div element. This part of the code will be added into the Body of your website where you want the form to appear
What to delete
<div loopgenius-form="form-id"></div>
Add Magic Form code into Wordpress Website
Now that you have the script code integrated into the Header of Wordpress, the next step is to add the Magic Form code into your Website.
Once you're in the Wordpress Website Editor, add a Custom HTML block where you want the Magic Form to appear on the website.
Next, paste the code you grabbed from the Magic Form into the Custom HTML block.
Make sure you DELETE everything AFTER the div element this time.
What to delete
<script text="text/javascript">var IDEA_ID = "idea-id";!function(){var t=window,e=t.Loopgenius;if("function"==typeof e)e("restart"),e("update",t.LoopgeniusSettings);else{var n=document,o=function(){o.c(arguments)};o.q=[],o.c=function(t){o.q.push(t)},t.Loopgenius=o;var a=function(){var t=n.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://magic-form.dev.loopgenius.com/"+IDEA_ID+".js";var e=n.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)};"complete"===document.readyState?a():t.attachEvent?t.attachEvent("onload",a):t.addEventListener("load",a,!1)}}();</script>
Ensure only the div element is left in the Custom HTML block. Click Save to save change.
Your Magic Form should appear on your website now!
Verify Magic Form implementation
The final step is to complete setup is to verify the implementation. Click the "I've added this code into my website" button to complete verification.
If successful, you will see a green checkmark and the URL of your Wordpress website.
