How can i create a template for the user to fill in, after they click on a button on top of an image?

Question

This type - https://www.w3schools.com/howto/img_snow.jpg and the image is the button or has a button on top of it and then I want to redirect the user to a template to fill in

• https://olegkrivtsov.github.io/using-zend-framework-3-book/html/en/images/forms/styled_contact_form.png something of this type. Do I need JavaScript for this?

Answer 1

You can try to use a modal,here is a demo:

<input data-toggle="modal" data-target="#exampleModal" type="image" src="~/images/button1.jpg" />
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Contact Us</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ... your content here
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>

result: