Add form on custom dialog pop up

[JM78]

Hi, 

I've created a custom dialog and i need to add a form inside it.

I've tried to add liquid tag like this ==> {% entityform name: 'Contact formulaire portal' %}  

here's the result i'm getting :

As i thought, it is taking it like a text format. 

How can i add a form in a custom modal dialog ? 

Many thanks for your help.

[Lucas001]

Hi @JM78,

there seems to be something wrong with your code.

I tested it on my side and it's working:

My html Code of the Page:

<div class="row sectionBlockLayout sectionPrimaryColor" style="display: flex; flex-wrap: wrap;height: 15px; min-height: 15px;padding: 8px; margin: 0px;">
</div>
<div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; padding: 8px; margin: 0px; min-height: 361px; background: url('/wave-background.png');">
    <div class="container" style="display: flex; flex-wrap: wrap;">
      <div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px; margin: 60px 0px;">
        <h1>Subpage 2</h1>
        <p>This page can be customized by adding new sections and components.</p>
      </div>
    </div>
</div>
<div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
  <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
    <p><a id='agbLabelId' href='#TestModal' data-toggle='modal' data-target='#TestModal'>TestModal</a></p>
  </div>
</div>

<!-- FROM HERE ON, THE MODAL IS CREATED -->
<!-- ------------------------------------------------------------------------------- -->
<div id="TestModal" data-keyboard="false" data-backdrop="false" class="modal fade">
  <div class="bg">
    <div class="lab-modal-body">
      <button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">×</span><span class="sr-only">Schließen</span></button>
      <div class="modal-header"><h3 class="modal-title">TestModal</h3></div>
      <div class="modal-body">
        <p>TestHeader</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra arcu vitae justo aliquet aliquet. Vivamus malesuada lacus ac urna aliquam, vitae egestas ligula elementum. Mauris pellentesque sodales enim, a vestibulum odio eleifend at. Maecenas mattis dignissim aliquet. Donec tincidunt sapien a pulvinar feugiat. Aliquam porta fermentum ex, ac interdum tortor tempor ac. Vestibulum a tortor turpis. Vivamus pharetra ligula id fermentum consectetur......</p>
        <div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
          <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;"><div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 310px; word-break: break-word;">{% entityform name: 'TestTable main form' %}</div></div>
        </div>
      </div>
      
      <div class="modal-footer">
        <div class="text-center"><button type="button" data-dismiss="modal" class="btn-primary btn-plain btn btn-lg popup-button">Close</button></div>
      </div>
    </div>
  </div>
</div>

Keep in mind, that you cannot include the form inside your modal and on the same page. It will throw an error that the key is already existing.

Check the spelling again of your form or replace the form inside my HTML with yours and see if it works.

Hope that helps. Please mark the post as solution if it solves your problem

 or consider a thumbs up if it helps you.

[nithyaneelam]

Hey @Lucas001 

I am trying to create a pop up form.The main functionality is that when we click on an image a form should appear. Could you please let me know how to do that?

Thanks in advance

[Fubar]

You can't just dynamically write it all from JavaScript, as the Liquid has to run Server-Side and your JS is only running Client-side. 

(If you look at what they do for the standard one, they have an Iframe in the main page, they then update its source with the respective GUID)  you may also be able to load another Web Page in your popup (you would call the page + the guid, to do this you would need to use a custom Web Template / Page Template  for the Web Page so you can turn off the header and footer when the page renders).