Keeping CSS model open after form submission

Question

Using a simple CSS modal popup to display a form ( gravity form ) which works as expected but id like to make the user experience better.

Currently when the modal button is pressed

<label class="button success tiny" for="modal-1">Email this user</label>

The modal pop's up and shows the contact form in the modal box. However after submission of the form, the form shows a message like "your submission has been received, we'll be in touch shortly".

Which isnt seen because after the submitting the form, the modal closes. Meaning the user then has to press the modal button again to make sure they've submitted the enquiry.

This is the modal code to go with the model button above :

  <input class="modal-state" id="modal-1" type="checkbox" />
    <div class="modal">
      <label class="modal__bg" for="modal-1"></label>
      <div class="modal__inner">
        <label class="modal__close" for="modal-1"></label>
        <h2>Modal Inside Title</h2>
        <p><?php echo do_shortcode('[gravityform id="80" title="false" description="false"]'); ?>
    </p>
      </div>
    </div>

And the CSS currently being used :

/* [Object] Modal
 * =============================== */
.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .25s ease;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  margin: auto;
  overflow: auto;
  background: #fff;
  border-radius: 5px;
  padding: 1em 2em;
  height: 50%;
}

.modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #aaa;
}

.modal__close:before {
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {

  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
  }
}

Im wondering if there was a function i could add which would keep the modal open after the form submission .

Answer 1

A combination of PHP and JS will do it.

1. Have your page listen for the presence of gform_submit which Gravity Forms includes as a hidden field on all forms by default.

   if(!empty($_POST['gform_submit'])) {
       // now here comes your javascript
   }
   

2. For the JS, set modal-state checked. This way on page load, if the form has been submitted, the JS will trigger the CSS which makes the modal visible.

   <script type="text/javascript">
       jQuery(document).ready(function(){
           jQuery("#modal-1").prop("checked", true);
       });
   </script>
   

You can do it in vanilla JS as well, but I'm assuming if you're using modals and the like you probably have jQuery available.

Not sure what your use case is, but it would be wise to check the accessibility of your solution to screen readers, keyboard users, etc.