モーダル上のフォームに入力できない

前提・実現したいこと

webサイトを製作中です。予約ボタン押下時に表示されるモーダル上に、フォームを作成したのですが、入力ができません。
具体的には、入力欄をクリックした際に、一瞬点滅縦棒？が表示されますが、すぐに消えてしまいます。

試したこと

試しにモーダル外で同コードのフォームを動作確認したところ、正常に動作しました。

もしわかる方がいましたら、ご教授いただけると幸いです。

端末はMacbook airです。

コード

  <!-- ポップアップ -->
  <div class="popup" id="js-popup">
    <div class="popup-inner">
      <div class="close-btn" id="js-close-btn">
        <!-- <i class="fas fa-times"></i> -->
        <div class="batsu">×</div>
      </div>
      <a href="#">
        <!-- <img src="./img/popup.jpg" alt="ポップアップ画像"> -->
        <div class="contact-form">
          <div class="contact-inner">
            <p class="contact-title">宿泊予約</p><!-- /.contact-title -->
            <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeiu2OXn6fYEOh2-9KW-t0mFtIPBiIbBoSD8RRyaRBxqDNmQQ/formResponse" id="form">
              <div class="box d-flex">
                <label for="name">お名前</label>
                <input type="text" name="entry.396652230" id="name" required>
              </div>
              <div class="box d-flex">
                <label for="mail">メールアドレス</label>
                <input type="mail" name="entry.1934980237" id="mail" required>
              </div>
              <div class="box">
                <p class="box">ご希望プラン（空いているプランのみ表示されます）</p>
              </div>
              <div class="box">
                <select name="plan">
                  <option value="" hidden>プランを選択してください</option>
                  <option value="1">cat</option>
                  <option value="2">dog</option>
                  <option value="3">rabbit</option>
                  <option value="4">squirrel</option>
                </select>
              </div>
              <input type="submit" class="submit-btn" id="js-submit" value="送信する">
            </form>
          </div><!-- /.contact-inner -->
        </div><!-- /.contact-form -->
      </a>
    </div>
    <div class="black-background" id="js-black-bg"></div>
  </div>

css
1.popup {
2  position: fixed;
3  left: 0;
4  top: 0;
5  width: 100%;
6  height: 100%;
7  z-index: 9999;
8  opacity: 0;
9  visibility: hidden;
10  transition: .6s;
11}
12.popup.is-show {
13  opacity: 1;
14  visibility: visible;
15}
16.popup-inner {
17  position: absolute;
18  left: 50%;
19  top: 50%;
20  transform: translate(-50%,-50%);
21  width: 80%;
22  max-width: 500px;
23  padding: 50px;
24  background-color: #fff;
25  z-index: 2;
26}
27.popup-inner img {
28  width: 100%;
29}
30.close-btn {
31  position: absolute;
32  right: 0;
33  top: 0;
34  width: 50px;
35  height: 50px;
36  line-height: 50px;
37  text-align: center;
38  cursor: pointer;
39}
40.close-btn i {
41  font-size: 20px;
42  color: #333;
43}
44.black-background {
45  position: absolute;
46  left: 0;
47  top: 0;
48  width: 100%;
49  height: 100%;
50  background-color: rgba(0,0,0,.8);
51  z-index: 1;
52  cursor: pointer;
53}
54.batsu{
55  font-size: 300%;
56  font-weight: bold;
57}
58
59.contact{
60  &-form{
61    font-size: 1.3rem;
62    color: #333;
63    form{
64      margin-top: 30px;
65    }
66  }
67  &-title{
68    text-align: center;
69    border-bottom: 1px solid #E7E7E7;
70    padding-bottom: 30px;
71  }
72
73}
74
75.box{
76  flex-direction: column;
77  label,p{
78    margin-top: 20px;
79  }
80  input,textarea{
81    margin-top: 20px;
82  }
83}
84

javascript
1function popupImage() {
2    var popup = document.getElementById('js-popup');
3    if(!popup) return;
4
5    var blackBg = document.getElementById('js-black-bg');
6    var closeBtn = document.getElementById('js-close-btn');
7    var showBtn = document.getElementById('js-show-popup');
8
9    closePopUp(blackBg);
10    closePopUp(closeBtn);
11    closePopUp(showBtn);
12    function closePopUp(elem) {
13      if(!elem) return;
14      elem.addEventListener('click', function() {
15        popup.classList.toggle('is-show');
16      });
17    }
18  }
19  popupImage();