Contact Form 7のお問い合わせフォームの文字を簡単に装飾する方法を詳しく解説します♪
【WordPress】

※本ページは広告を含む場合があります。

こんにちは、chieです(^^)

 

今回は、Contact Form 7のお問い合わせフォームの文字を簡単に装飾する方法
を図解入りで詳しく解説します。

 

Contact Form 7で作ったデフォルトのお問い合わせフォームは、
ただの黒文字だけで何だか寂しいですよね。
▼▼

 

そこで、難しい知識無しで簡単に文字の色を変えたり
装飾をする方法を解説していきます^^

 

目次

フォームをコピーして投稿ページで編集する

 

まずはコンタクトフォームの編集画面を開きましょう。

 

ダッシュボードから、
お問い合わせ】⇒【コンタクトフォーム】をクリックします。

 

 

あなたが作ったお問い合わせフォームを開いてください。

 

こんな感じですね。

 

 

次に、【投稿】⇒【投稿一覧
カーソルを合わせて右クリックをします。

 

出てきた項目から、新しいタブで開くをクリックしてください。

 

 

そして、その新しく開いたタブで
投稿】⇒【新規追加】をクリック。

 

編集画面が開きました^^

 

 

今は、
元々開いていたお問い合わせフォーム
新しいタブで開いたページ

の2ページが開いていますよね。

 

 

まずは①を表示させてください。

フォームに記載されている文字を全てコピーします。

 

 

そして、新しいタブで開いた
②の投稿編集画面を表示させてください。

そして、
テキストタブを開いて
先ほどコピーした文字を貼りつけます。

 

 

次に、テキストタブビジュアルタブに切り替えます。

 

そして、この状態でお好きに文字を装飾してください♪

通常の記事を書くときと同じです^^*

装飾ボタンの種類を増やしたい場合は、
こちらの記事を参考にしてください。
▼▼
「文字の大きさや背景色」を変えるプラグイン

 

 

私の場合はこんな感じに装飾してみました。

 

 

装飾が出来たらまたテキストタブを開いて、全ての文字をコピーします。

 

フォームに編集したコピー文を貼りつける

 

次に、お問い合わせフォームのタブを表示させてください。

元々記載されていた文字を全て消して、
先ほどコピーした文字を貼りつけます。

 

 

そして、保存をクリックします。

 

 

 

お問い合わせページを確認する

 

お問い合わせページを見てみてください。

このように編集後の表示に変更されているはずです^^*

 

編集前

 

編集後

 

まとめ

 

投稿の編集画面のテキストタブを使えば、
このようにHTMLの詳しい知識無しで編集をする事が出来ます。

このやり方はウィジェットなどにも使えるので
ぜひ色々試してみてくださいね♪

 

こちらの記事も参考にしてみてください^^
▼▼
誰でも簡単に、テキストウィジェットの文字に色などの装飾を付ける方法

4 件のコメント

  • 初めまして、こんばんは。
    ランキングから訪問させていただきました。
    出来上がっているお問い合わせフォームの文字装飾、
    ワードプレスを使い慣れていない私にとっても
    とても分かりやすい説明でした。
    ぽちっとさせていただきます。
    ありがとうございました。

    • Chie より:

      kinokaさん、初めまして。
      ご訪問ありがとうございます♪

      分かりやすかったという事で良かったです^^
      応援ぽちもありがとうございます(*^^*)

  • chieさん。こんにちは。
    ランキングサイトからお邪魔しました。
    「編集後▼」の見た目の方が、、
    なんだか、、「ホンワカ」した雰囲気があって
    印象がイイですね。(*´▽`*)
    ランキング2か所応援をさせていただきました。

    • Chie より:

      mioruさん、こんばんは。
      ご訪問ありがとうございます♪

      「ホンワカ」した雰囲気ですか~!
      編集前の硬い印象を変えたかったので
      そう感じていただけて嬉しいです( *´艸`)

      応援もありがとうございます^^*