WordPressフォームの送信ボタンの色を変更するにはどうすればよいですか?

公開: 2022-01-10

コードに触れずにWordPressフォームの送信ボタンの色を変更する方法を知りたいですか? はいの場合、この記事だけで十分です。

送信ボタンのキャッチーな外観は、ユーザーの注意を引き付け、フォームの送信を促す上で重要な役割を果たします。 デフォルトでは、WordPressフォームの送信ボタンは鈍く見える傾向があります。

したがって、ブランドに合った美しい色でスタイリングし、全体的なフォームの外観を向上させたい場合は、この記事を最後まで読んでください。

目次

送信ボタンスタイリングオプションを備えた最高のWordPressフォームプラグインを選択してください

WordPressには、必要なほぼすべての機能を実現するための何千ものプラグインが用意されており、ボタンスタイルのフォームプラグインも例外ではありません。

ただし、CSSコードを処理せずに送信ボタンのスタイルを設定したり色を変更したりできるWordPressフォームプラグインを見つけることはめったにありません。

これは開発者にとって大きな問題ではないかもしれませんが、技術に精通していない人にとっては同じではありません。 そのため、エベレストフォームの使用をお勧めします。 これはおそらく、コードをいじることなく、フォームのスタイルを設定してボタンを送信したり、WordPressでボタンの色を変更したりできる最高のWordPressフォームプラグインです。

エベレストフォームワードプレスプラグイン

エベレストフォームは、数回のクリックでフォームのレイアウトデザインをフォームのボタンスタイルに変更することからすべてを手に入れました。 何よりも、プラグインのライブプレビューオプションとサイトを一致させるようにWordPressフォームを簡単に設計できます。

使用するプラグインがわかったので、WordPressで送信ボタンの色を変更する方法について説明しましょう。


WordPressフォームの送信ボタンの色を変更するにはどうすればよいですか?

送信ボタンに選択した色を追加するのは、これまでになく簡単です。 エベレストフォームと呼ばれる素晴らしいプラグインに感謝します。 これで、以下の簡単な手順に従って、WordPressフォームの送信ボタンの色を変更できます。

ステップ1:エベレストフォームプラグインをインストールする

何よりもまず、プラグインをサイトにインストールする必要があります。 このためには、WordPressダッシュボードにログインし、 [プラグイン]>>[新規追加]に移動します。

プラグイン新規追加

次に、右上の検索ボックスに「EverestForms」と入力してプラグインを検索します。 プラグインが表示されたら、 [今すぐインストール]ボタンをクリックします。

エベレストフォームをインストールする

インストール後すぐに、[アクティブ化]ボタンを押してサイトでアクティブ化します。

エベレストフォームをアクティブ化する

ステップ2:EverestFormsProとStyleCustomizerアドオンをインストールする

エベレストフォームの無料版は、お問い合わせフォーム、退会リクエストフォーム、コールバックフォームなどの簡単なフォームを作成するのに十分すぎることは間違いありません。 ただし、WordPressフォームを好みに合わせてスタイル設定するには、プレミアムプランでのみ利用可能なStyleCustomizerアドオンが必要です。

したがって、プラグインの公式価格ページにアクセスして、最初に適切なプレミアムプランを選択してください。

エベレストフォームの価格プラン

これで、ユーザーアカウントを作成してログインできます。 その後、アカウントダッシュボードで[ダウンロード]タブを見つけてクリックします。 次に、EverestFormsプロアドオンをコンピューターにダウンロードします。 プラグインはZIPファイルとしてダウンロードされます。

EverestFormsProのZipファイルをダウンロードする

また、後の手順で入力する必要があるため、[ライセンスキー]タブからライセンスキーをコピーすることを忘れないでください。

ライセンスキー

もう一度、[プラグイン] >> [新規追加]に移動し、[プラグインのアップロード]ボタンをクリックします。 次に、Everest Forms pro ZIPファイルを選択し、 [今すぐインストール]ボタンを押します。

EverestFormsProアドオンをアップロードする

インストールが正常に完了したら、サイトでアクティブ化します。 次に、前にコピーしたライセンスキーを入力します。

ライセンスキーの入力

同様の手順に従って、StyleCustomizerアドオンをインストールすることもできます。 [ダウンロード]タブから、最初にスタイルカスタマイザーのZIPファイルをダウンロードします。

エベレストフォームスタイルカスタマイザーをダウンロード

次に、ZIPファイルをアップロードし、最後にWordPressサイトにインストールしてアクティブ化します。

エベレストフォームスタイルカスタマイザーのインストール

ステップ3:新しいフォームを作成する

プラグインのインストールが完了すると、WordPressダッシュボードから新しいフォームを作成できます。 まず、[エベレストフォーム]タブを見つけて、その上にマウスを置きます。 さまざまなオプションがポップアップ表示されます。 次に、[新規追加]オプションをクリックします。

新しいナビゲーションを追加するエベレストフォーム

美しくデザインされたビルド済みのフォームテンプレートと最初から開始するオプションを含む[新しいフォームの追加]ページが開きます。

新しいフォームを追加

既存のテンプレートを編集してフォームを即座にデザインするか、最初から好みに合わせて作成することができます。 選択はすべてあなた次第です。 どちらの方法でも、見栄えのするフォームを簡単に作成できます。

このチュートリアルでは、最初から始めるので、[最初から始める]オプションをクリックします。 フォームに名前を付けて、[続行]ボタンを押します。

フォームに名前を付けて続行します

これで、フォームエディタウィンドウが開きます。

フォーム編集ウィンドウ

ご覧のとおり、左側にはさまざまなフィールドオプションがあります。 そこから必要なフィールドを簡単にドラッグし、右側にドロップしてフォームに追加できます。

フォーム内のフィールドをドラッグアンドドロップします

ここでも、フィールドオプションからフォームに追加する個々のフィールドのプロパティを編集できます。 ここから、適切なラベルを指定し、必要に応じて簡単な説明を追加できます。 同様に、[必須]チェックボックスをオンにすることで、フィールドを必須にすることができます。

フィールドオプションのカスタマイズ

さらに、WordPressフォームに適用できる高度なオプション、条件付きロジック、その他の機能があります。

高度なフィールドオプション

詳細なガイドについては、WordPressでの連絡フォームの作成に関する記事を必ず読んでください。


ステップ4:WordPressフォームをカスタマイズする

スタイルカスタマイザーアドオンがサイトにインストールされているので、WordPressフォームの全体的な外観をスタイリングするために最大限に活用できます。 そのため、右下のフォームデザイナーアイコンをクリックして、心ゆくまでカスタマイズを開始します。

フォームデザイナーアイコンWordPressフォームの送信ボタンの色を変更する方法

カスタマイザーを使用して、以下に示すようにフォームのさまざまなセクションを変更できます。

  • アクティブテンプレート: 2つの異なるフォームレイアウト、つまりクラシックまたはデフォルトテンプレートから選択できます。
  • フォームラッパー:このオプションを使用すると、フォームの余白、境界線、背景色などを編集できます。
  • フィールドラベル:ここから、フィールドラベルのフォントサイズ、フォントの色、フォントスタイル、テキストの配置などを変更できます。
  • フィールドサブラベル:フォントのサイズ、色、スタイルに加えて、テキストの配置、余白などのフィールドサブラベルを編集できます。
  • フィールドの説明:フォームフィールドに提供する説明をカスタマイズすることもできます。 フィールドの説明のテキストの配置、余白、パディング、フォントサイズ、色などを変更できます。
  • フィールドスタイル:ユーザーが入力するフォームフィールドデータをカスタマイズできます。 フォントサイズ、スタイル、プレースホルダーフォントの色、境界線の種類、幅、半径などを変更できます。
  • ラジオ/チェックボックススタイル:チェックボックスまたはラジオボタンに使用されるテキスト、数字、または記号のインラインスタイル、ラジオ/チェックボックスの色、スタイルのバリエーションなどを編集できます。
  • セクションタイトル:セクションタイトルのフォントスタイル、色、テキストの配置、行の高さなどは、ここから簡単に管理できます。
  • ボタンのスタイル:このセクションについては、次のステップで説明します。
  • フォームメッセージ:フォームの成功、エラー、または検証メッセージをカスタマイズするためのさまざまなオプションを提供します。
  • 追加のCSS:カスタムCSSを追加して、フォームを希望どおりにカスタマイズするオプションもあります。
WordPressフォームのカスタマイズ

最良の部分は、上記のセクションに加えたすべての変更のライブプレビューを取得することです。


ステップ5:WordPressフォームの送信ボタンの色を変更する

以前に遭遇したボタンスタイルオプションを覚えていますか? ここで、WordPressの送信ボタンの色を変更できます。 それでは、ここでこのセクションについて詳しく見ていきましょう。

ボタンスタイルをクリックすると、いくつかのボタンカスタマイズオプションが表示されます。 ここから、WordPressフォームの送信ボタンの色を簡単に選択できます。 コーディングの知識は必要ありません。 すごいですよね?

WordPressで送信ボタンの色を変更する

言うまでもなく、送信ボタンを好きなようにスタイリングすることもできます。 ボタンのフォントサイズを調整したり、フォームボタンのフォントスタイルを変更したりできます。 同様に、フォントの色、ホバーフォントの色、ボタンホバーの色を設定することができます。

さらに、境界線の種類、境界線の幅、境界線の色、線の高さ、ボタンの余白、ボタンのパディングなど、多くのオプションも利用できます。

ボタンの設定を構成し、WordPressフォームで送信ボタンの色を変更する方法を保存する

最後に、上部の[保存]ボタンを押して、すべての設定を保存することを忘れないでください。


手順6:フォーム設定を構成する

これで、WordPressの送信ボタンの色を変更する方法がわかりました。 WordPressフォームの構成について簡単に説明しましょう。

フォームを公開する前に、[一般]と[電子メール]の設定を構成する必要があります。 一般フォーム設定では、フォームの名前の編集、説明の追加、成功した送信メッセージの編集、送信ボタンのカスタマイズなどを行うことができます。

一般的なフォーム設定

さらに、スパム対策ハニーポット、ajaxフォーム送信、エントリ情報の保存などのオプションを有効または無効にすることができます。

同様に、 Eメール設定を使用すると、Eメール通知を管理できます。 これにより電子メールを受信するための宛先アドレスと送信元アドレス構成できます。 メールの件名メッセージも追加できます。 したがって、ユーザーがフォームを送信するたびに、すぐに通知を受け取ることができます。

メール通知設定オプション

ステップ7:WordPressフォームを公開する

フォームがすべて設定されたので、これでサイトに追加できます。 送信ボタンの色が美しいWordPressフォームをユーザーに表示するには、[投稿]>>[新規追加]に移動します。

新しい投稿を追加

次に、ブロックの追加(+)ボタンをクリックし、Everest Formブロックを検索して、エディターに追加します。

エベレストフォームブロック

次に、ドロップダウンメニューから、必要なフォームを選択します。

フォームの選択

フォームに適切なタイトルを入力したら、上部の[公開]ボタンをクリックできます。

フォームを公開するWordPressフォームで送信ボタンの色を変更する方法

まとめる

これが、WordPressの送信ボタンの色を変更する方法に関するチュートリアルのまとめです。 ご覧のとおり、WordPressでボタンの色を変更することは、エベレストフォームのような優れたプラグインを備えた公園を散歩することです。

何を求めている? 今すぐサイトのエベレストフォームを入手し、美しいボタンの色で見栄えの良いフォームを作成して、クリック率とコンバージョン率を向上させます。

この記事は、送信ボタンの色を変更する方法を理解するのに十分役立つことを期待しています。

また、求人応募フォームやオンラインホテル予約フォームの作成など、より便利なWordPressの記事については、ブログのWebサイトにアクセスしてください。

最後に、最新のブログ記事の更新については、TwitterとFacebookでフォローしてください。