WordPress

Contact Form 7 入力欄にメッセージを添える小技

2021-09-30

困ってる人

Contact Form 7 入力欄にメッセージを添えて入力説明をしたいんだけどな~?

当ブログでも採用させていただいているプラグイン「Contact Form 7」ですが、入力欄にメッセージを添えるお問い合わせが多いので

ご紹介させていただきます。それでは「いってみよう~」

Contact Form 7をインストールしている方を前提としてご紹介しております。

Contact Form 7 入力欄にメッセージを添える小技

以下にあります当ブログのお問い合わせフォームをご覧ください。

氏名の入力欄に「 ハンドルネーム・ニックネームでも可能です。」が少し薄くなってメッセージが入っています。

こうする事で本名はちょっと嫌だなって方でも気兼ねなく入力できると思います。

    このサイトはreCAPTCHAによって保護されています。Googleのプライバシーポリシー利用規約が適用されます。

    では Contact Form 7 のフォームテンプレートの「氏名」を例に挙げて解説します。

    デフォルトの設定

    <label> 氏名
        [text* your-name] </label>

    デフォルト設定から以下のように変更して下さい。

    <label> 氏名
        [text* your-name placeholder"【必須】ハンドルネーム・ニックネームでも可能です。"] </label>

    your-nameの後に半角スペースをいれてから placeholder~を初めて下さい。

    K

    今回は特別に当ブログ Contact Form 7 のフォームテンプレート の全貌を載せておきます。

    そのままコピペで使っていただいてもいいですし、ここからカスタムしていただいてもOKです。

    動作の保証はいたしません。自己責任でお願いいたします。

    <label> 氏名*
        [text* your-name placeholder"【必須】ハンドルネーム・ニックネームでも可能です。"] </label>
    
    <label> 会社名又はサイト名
        [text your-company] </label>
    
    <label> メールアドレス*
        [email* your-email placeholder"【必須】ご連絡が可能なメールアドレスをお願いします。"] </label>
    
    <label> お電話番号
        [tel your-phonenumber] </label>
    
    <label> お問い合わせ内容*
        [textarea* your-message placeholder"【必須】お問い合わせの詳細についてご記載下さい。"] </label>
    
    [submit "送信する"]
    
    <small><i class="fas fa-lock"></i> このサイトはreCAPTCHAによって保護されています。Googleの<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と<a href="https://policies.google.com/terms">利用規約</a>が適用されます。</small>

    フォーム中に 「 FontAwesome 5」を使用しています。設定が未設定の方はうまくアイコンがでませんのでご了承ください。

    ちなみに 「 FontAwesome 5」 の詳しい設定方法は下記の記事にて詳しく解説しているのでご覧ください。

    K
    ACTION(AFFINGER6)でFontAwesome5(ver5.9以降)を使えるようにする

    そうですね。 AFFINGER6 からFontAwesome 5へ正式対応となったんですが少し設定が必要となります。 その設定方法をご紹介いたします。それでは「いってみよう~」 FontAwesome ...

    続きを見る

    いかがしたでしょうか?

    入力欄にメッセージを添える事でユーザーに解りやすく入力していただけるのではないでしょうか。

    Thank you for reading to the end!

    • この記事を書いた人

    K

    ご覧いただき有り難うございます。ブロガーの「K」です。現在はアパレルの生産管理を主にグラフィック・DTPデザイナー・自社WEB管理と幅広くお仕事させていただいております。 WEB関連を中心にガジェットやPC関連・趣味のスキューバダイビングなどこのブログで発信。

    -WordPress
    -