• 題名
    • お名前 (必須)
    • メールアドレス (必須)
    • メッセージ本文

    確認画面は表示されませんので、上記の入力内容をご確認の上、下記のチェックをつけて [送信] ボタンを押して下さい。

    このフォームの作り方

    フォームは以下のショートコードで表示されています。form タグにはクラス form-within が指定されます。

    [contact-form-7 id="118" title="コンタクトフォーム" html_class="form-within"]

    style.css に以下の行を追加してあります。

    /*-------------------------------------------*/
    /*	:focus-within を使ったお問い合わせフォーム
    /*-------------------------------------------*/
    
    form.form-within {
    border: 1px dashed #333;
    padding: 25px;
    transition: background 0.5s ease;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
    }
    
    form.form-within:focus-within {
    background: #f4d35e;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
    }
    

    vmax はビューポートの長辺に対する割合で指定する長さ単位で、1vmax はビューポートの長辺の1%です。

    参考にしたページ