Как сделать скачивание pdf-файлов только после введение email?

Question

Samalamadoit @Samalamadoit

JavaScript

Как сделать скачивание pdf-файлов только после введение email?

У меня есть раздел на моем сайте со списком файлов pdf (он выглядит как это изображение 1). Мне нужно, чтобы появилось всплывающее окно, нажав кнопку «Загрузить» выскачил попап, и там были введены адрес электронной почты и имя. И только после того, как пользователь ввел эти данные, началась загрузка.

У меня статический сайт, поэтому отправка данных будет через сторонний сервер (google или еще что-то). Просто пытаюсь сделать загрузку только после ввода емейла и имени.

Мое всплывающее окно создано с помощью bootrstrap. Вот код для отдельного элемента.

<article class="pdf-block__item pdf-block-item col-md-4">
                <div class="pdf-block-item__img">
                    <img class="pdf-block-item__img-image" src="images/banner.jpg" alt="pdf-img">
                </div>
                <div class="pdf-block-item__title">
                    PDF item test 1
                </div>
                <div class="pdf-block-item__text">
                    In this eBook you will learn 21 key KPIs that will form the building blocks in
                    your marketing reporting and how to develop the ultimate dashboard for your SaaS business.
                </div>
                <div class="pdf-block-item__button">

                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                        download
                    </button>

                </div>
            </article>

Вот код попапа:

<div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
<!--                action="https://script.google.com/macros/s/AKfycbzf6R0lFW4jC7NqYV47UneQFy6jmZOuiBeG4g2lN9COKFTEJm9n/exec"-->
                <form class="form-contact" id="gform" method="POST">
                    <h3 class="text-center">Please enter your name and email to download</h3>
                    <input type="text" name="first_name" class="form-control" placeholder="First Name" required>
                    <input type="email" name="email" class="form-control" placeholder="Email" required>
                    <div class="form-group-checkbox form-group-checkbox--popup">
                        <input id="box1" name="i_consent" type="checkbox">
                        <label for="box1">I consent to receive communications from JustControl.it</label>
                    </div>
                    <div class="form-group-checkbox">
                        <input id="box2" name="ive_read_pp" type="checkbox">
                        <label for="box2">I've read and agree to JustControl.it <a href="/policy.html" target="blank">Privacy&nbsp;Policy</a> </label>
                    </div>
                    <div style="display: none;" class="please-message" id="please_message">
                        Please, fill the form with your name and email (obligatory fields). We also require you to confirm your consent to receive our messages and to agree with our privacy policy. The law is the law, and we should follow it. Thank you.
                    </div>
                    <div style="display: none;" class="thank-message" id="thank_message">
                        Thank you.
                    </div>
                    <div class="form-group submit-button">
                        <div style="display: none;" class="lds-ring send_spinner"><div></div><div></div><div></div><div></div></div>
                        <button type="submit" class="btn">SEND</button>
                    </div>
                </form>
            </div>