How can I pull the popup content from an external file?

I am using Magnific Popup to create a popup form. Everything works fine as long as I leave it inline, but if I try to move the form to an external file, I cannot load it in the popup.

As an example - taking the code from the "Popup With Form" demo here , I create the following file that works as expected. Here is a working fiddle (courtesy of @anpsmn in answer to another question ).

However, I realized that I would like to use the same form in multiple places, so I tried to move the form to an external file. I named it MagnificForm.cfm (I will be working with ColdFusion code in my real form) and it only contains the form element:

<form id="test-form" class="white-popup-block mfp-hide">
     <h1>Form</h1>
     <fieldset style="border:0;">
         <p>Lightbox has an option to automatically focus on the first input. It strongly recommended to use <code>inline</code> popup type for lightboxes with form instead of <code>ajax</code> (to keep entered data if the user accidentally refreshed the page).</p>
         <ol>
             <li>
                 <label for="name">Name</label>
                 <input id="name" name="name" placeholder="Name" required="" type="text">
             </li>
             <li>
                 <label for="email">Email</label>
                 <input id="email" name="email" placeholder="example@domain.com" required="" type="email">
             </li>
             <li>
                 <label for="phone">Phone</label>
                 <input id="phone" name="phone" placeholder="Eg. +447500000000" required="" type="tel">
             </li>
             <li>
                 <label for="textarea">Textarea</label><br>
                 <textarea style="width: 139px; height: 54px;" id="textarea">Try to resize me to see how popup CSS-based resizing works.</textarea>
             </li>
         </ol>
     </fieldset>
 </form>

      

        
        
        
      

    

Then I tried to change the link that opens the popup to point to the file:

<!-- link that opens popup -->
<a class="popup-with-form" href="magnificForm.cfm">Open form</a>

      

        
        
        
      

    

It doesn't work - results in a blank popup.

I also tried to point to a form element:

<!-- link that opens popup -->
<a class="popup-with-form" href="magnificForm.cfm#test-form">Open form</a>

      

        
        
        
      

    

I have also tried renaming the file to magnificForm.html. But I can't get the content of the external file to load in the popup.