そして伝説になりたかった

働きたくない男の雑記・備忘録

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

投稿日:2020/7/30 最終更新日:2020/08/06 閲覧数:1363

カテゴリー: システム・WEB>

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

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


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


広告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;
}

よく見られている記事

おすすめの記事

管理人について

高専へ入学するがプログラミングが嫌いという理由で機械科を選択。その後勉強が嫌いという理由で高専退学。グラフィックデザインの仕事ができると騙され20歳からweb業界へ就職するも、大嫌いなプログラミングをさせられ続ける毎日が待っていた。未だにプログラミング地獄から脱出できないでいる。

その他管理人についてはこちら
プロフィールとか


コメントを残す