[Resolved] Opening a Form with a button in a Modal with View/Block editor

[Author]

Posts

[danC-5]

Tell us what you are trying to do?
I'm cycling through several posts in a table on a page I'm having and I want to add a button to each item in the table to open the form I've made in a modal to edit the information from the front end. I've been trying to read through the documentation you have about adding a form to a layout and I don't think it's the same thing to have it recur for each item.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

From your website's code, it seems that it is loading the Bootstrap 4 library, which also includes the support for modals:
hidden link

In the loop of your view, you can show the edit form inside the modal window, using this HTML structure:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal-[wpv-post-id]">
  Edit this post
</button>
              

<!-- Modal -->
<div class="modal fade" id="Modal-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="Modal-[wpv-post-id]" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit: [wpv-post-title]</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        [cred_form form='slug-of-the-edit-form']
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Note: Please replace "slug-of-the-edit-form" with the actual slug/name of your edit form.

The first part of the code will show the button to open the popup for each result, while the second part will show the edit form for each result inside the modal.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[danC-5]

My issue is resolved now. Thank you!