I am trying to embed a form in to the Bootstrap 5 modal dynamically, I have 3 buttons each linking to different forms and they have data-bs-* attributes for the form ID and form title so that they can be inserted into the modal, I just can’t seem to execute the PHP action to load the form.
These are the buttons:
<a href="#" data-bs-toggle="modal" data-bs-target="#formModal" data-bs-form="1" data-bs-formtitle="Form #1">Click here to load form #1</a>
<a href="#" data-bs-toggle="modal" data-bs-target="#formModal" data-bs-form="2" data-bs-formtitle="Form #2">Click here to load form #2</a>
<a href="#" data-bs-toggle="modal" data-bs-target="#formModal" data-bs-form="3" data-bs-formtitle="Form #3">Click here to load form #3</a>
This is the javascript I have copied from the Bootstrap 5 modal documentation with a bit of modification:
const formModal = document.getElementById('formModal')
// When modal is opened, do the following:
formModal.addEventListener('show.bs.modal', event => {
// Button that triggered the modal
const button = event.relatedTarget
// Extract info from data-bs-* attributes
const formid = button.getAttribute('data-bs-form')
const formtitle = button.getAttribute('data-bs-formtitle')
// Select title/body containers for the modal
const modalTitle = formModal.querySelector('.modal-title')
const modalForm = formModal.querySelector('.modal-body')
// Update the modal's content.
modalTitle.textContent = formtitle
modalForm.innerHTML = `gravity_form(${formid}, false, false, false, '', true, 50);`
})
This just outputs the PHP action as plain text. I have also tried outputting the shortcode for the form but again this just outputted as plain text:
modalForm.innerHTML = `[gravity_form id="${formid}" title="false" description="false" ajax="true"]`