【コピペでOK】ポップアップ式 エントリーフォーム

エントリーフォーム最適化ってあるじゃないですか。

個人的にはこの形をベースにするのがいいと思うんですよね。

通常、問い合わせボタンってあっちこっちのページにありますけど、ボタン押すと別ページに移るってユーザーは嫌だと思うんですよ。
今まで見ていたページからも離れてしまうし。

広告LPのフォームを埋め込むか、遷移させるか問題とかもありますけど、これなら両方のメリットを持っていると思います。

ポップアップ式フォーム広まれ。

デモ

どこにもデータを送らないようになっているので送信もして大丈夫です。

ボタン

コード

このままではエントリーフォームとしては機能しないのでメールを送るとかのコードは別途用意してください。
コードを簡潔にするため、cssも簡単なものしか書いていません。

使うときには各々いい感じにしてください。お願いします。

$(function () {
    //ポップアップボタンが押されたらポップアップを表示
    $(".popup_button").click(function(){
        $(".touroku").fadeIn();
    });
    //閉じるボタンが押されたらポップアップを非表示
    $(".close_button").click(function(){
        $(".touroku").fadeOut();
    });
});

<p>
    <button class="popup_button">ボタン</button>
</p>
 
<!--ボタンクリックした時に全体を黒くする部分-->
<div class="touroku black_cover"></div>

<!--ポップアップ時に表示する部分-->
<div class="touroku popup_content">
 
    <h2 class="cap_stl">登録情報をご入力ください</h2> 
    <form>

        <p>お名前<span class="red">　*</span></p>
        <p>
            氏：<input type="text" name="name1" required>　
            名：<input type="text" name="name2" required>
        </p>
        <p>メールアドレス<span class="red">　*</span></p>
        <input type="text" name="email" size="50" required>
                
        <p class="al-c">
            <input type="checkbox" name="check" value="登録する" required>上記内容で登録しますか<br>
            <input type="submit" name="sbm" value="登録">
        </p>
        <button class="close_button">登録しない</button>
    </form>
 
</div>

/*ポップアップするものを、最初は隠しておく*/
div.popup,
div.touroku{
    display: none;
}
/*画面を覆う黒画面*/
div.black_cover{
    /*左上から縦横100% = 表示画面全体*/
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: black;
    /*透明度*/
    opacity: 0.5;
    /*前面に（値は適当）*/
    z-index: 200;
}
/*ポップアップの中身*/
div.popup_content{
    position: fixed !important;
    /*左上から25%の所から50%ずつ = 表示画面中央*/
    top: 25%;
    left: 25%;
    width: 50%;
    height: 460px;
    margin: 0 auto;
    padding: 24px 24px 36px 24px;
    background-color: white;
    border: none;
    /*黒背景より前に*/
    z-index: 210;
    text-align: center;
}
div.popup_content p{
    font-size: 80%;
    margin: 8px 0;
}