Best practices for full screen success messages? [on hold]

Question

The form I've created needs to have a full screen message with a download link to a file once the user submits the form. I'm not sure what the best way to go about this is. The form uses php in the background to handle the actual form and create an email template, but JS for validation on the user-end.

The easiest solution I could think of would be to create a redirect to a thank you page, but I've been specifically asked by the client to not do this. For this same reason, the form itself is a hidden div that shows up once the user clicks a button and I'm wondering if adding another hidden div layer would be a good idea for the success message, but I feel like this is very convoluted. I've also been thinking about completely replacing the inner html with the new code.

What would the best practice for this sort of thing be?

Answer 1

You can use a div and manage it with css class ( add active class when form submited )

 $(document).ready(function() { $('#submitMyForm').on('click', function() { $('.result-overlay').addClass('active'); }); });

 .result-overlay { display: none; position: fixed; /* full screen */ width: 100%; height: 100%; /* add color as you want */ background: orange; z-index: 998; opacity: 0; /* animate the transition */ transition: all 0.3s ease-in-out; } /* display.result-overlay when it has the.active class */.result-overlay.active { display: block; opacity: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <button class="btn btn-sm btn-success" id="submitMyForm"> Submit</button> </form> <div class="result-overlay"> <h3> write your content here: form result</h3> </div>