ホームページ  >  記事  >  CMS チュートリアル  >  WordPress でカスタムフォームを作成する: ステップバイステップガイド

WordPress でカスタムフォームを作成する: ステップバイステップガイド

WBOY
WBOYオリジナル
2023-09-06 20:29:05933ブラウズ

フォームを使用すると、Web サイト訪問者から情報を収集できます。アカウントの登録、Web サイトへのログイン、製品に関するフィードバックの提供、連絡、ニュースレターの購読など、フォームを通じてデータを収集できます。

WordPress を使用すると、フォームを Web サイトに簡単に統合できます。ほとんどのテーマには、ログイン、登録、お問い合わせフォームなどの一般的なフォームがすぐに提供されます。

しかし問題は、デフォルトで含まれているものが気に入らないかもしれないということです。全体的なテーマによりよく適合するツール、または追加のデータを収集するツールが必要な場合があります。

この記事では、HTML や CSS コードを記述せずに、テーマのデザインと配色に一致する美しいフォームを作成する方法を説明します。

WordPress メンバーシップ フォーム プラグインをインストールする

数多くの無料および有料のプラグインを使用してカスタム フォームを作成できます。この例では、Ultimate Member という無料のプラグインを使用します。

このプラグインの最も優れている点は、フォーム、ページ、電子メール ニュースレターなど、すべてを自動的に作成してくれることです。また、大量のフィールド タイプ (日付ピッカーやファイル アップロードなど) を提供する非常にカスタマイズ可能なフォーム ビルダーや、目を引くためにフォームに含めることができる何千ものアイコンも備えています。

始める前に、プラグインをインストールする必要があります。これを行うには、次の手順に従います。

  • WordPress 管理ダッシュボードにログインします。
  • [ プラグイン] > [新しいプラグインの追加] に移動します
  • 検索バーを使用して「ULTIMATE MEMBERSHIP」を検索します
  • プラグインをインストールして有効化します (オプションは下の画像で強調表示されています)

在 WordPress 中创建自定义表单:分步指南

インストールが完了すると、インフォメーション センターに Ultimate Member タグが表示されます。 Ultimate Membership > 設定 に移動して、すべてのオプションを表示します。

カスタム ページとニュースレター

この記事の冒頭で述べたように、Ultimate Member プラグインは、Web サイトで通常必要となるさまざまなタイプのページを作成するのに役立ちます。

在 WordPress 中创建自定义表单:分步指南

ニュースレターのサインアップ プロンプトを Web サイトに追加し、ウェルカム メール (アカウント アクティベーション メール ) を好みに合わせてカスタマイズすることもできます。

在 WordPress 中创建自定义表单:分步指南

「外観」タブからさまざまなページやフォームをカスタマイズできます。次に、Web サイトにフォームを作成する方法を見てみましょう。

フォームの作成

WordPress ダッシュボードで

Ultimate Members > Forms に移動します。そこには、デフォルトの LoginRegister 、および Profile フォームがあるはずです。

在 WordPress 中创建自定义表单:分步指南

これらのフォームのいずれかを編集することも、新しいフォームを最初から作成することもできます。任意のフォームで [

編集] をクリックしてフォーム ビルダーに入ります。

在 WordPress 中创建自定义表单:分步指南

ユーザー名、名、姓、電子メール アドレス、およびパスワードのフィールドがあります。最初の 4 つはすべてテキスト ボックスですが、password はパスワード タイプのフィールドで、テキスト フィールドに似ていますが、入力がマスクされています。

新しいフィールドを追加したり、既存のフィールドをカスタマイズしたりできます。既存のフィールドをカスタマイズするには、フィールド名の横にある鉛筆アイコンをクリックするだけで、フィールドの詳細を含むスキーマが表示されます。

在 WordPress 中创建自定义表单:分步指南

ここでは、多数の入力カスタマイズ オプションを確認できます。各オプションの上にある疑問符アイコンにカーソルを置くと、各オプションに関する詳細情報を表示できます。これにより、ツールチップが表示されます。

新しいフィールドを追加するには、他のフィールドの下にある

アイコンをクリックしてフィールド マネージャーを開きます。

在 WordPress 中创建自定义表单:分步指南

この入力を使用して、収集するものに一致するタイプを選択します。以前にカスタム フィールドを作成したことがある場合は、以下でカスタム フィールドを選択することもできます。

フィールドを選択すると、新しいモーダルが表示され、入力に関する詳細 (タイトル、プレースホルダーなど) を入力し、アイコンを追加できます。完了したら、「

追加」ボタンをクリックしてフィールドをフォームに追加します。

フォームがどのように表示されるかを確認するには、フォーム ビルダーの上部にある ライブ プレビュー ボタンをクリックします。

在 WordPress 中创建自定义表单:分步指南

マージン、パディング、境界線の色、境界線のラジオなどを追加することもできます。ライン エディターを使用して、CSS クラスを各入力にリンクすることもできます (ライブ プレビュー の下にある鉛筆アイコンをクリックします)。

在 WordPress 中创建自定义表单:分步指南

これらのツールを使用すると、魅力的なフォームを簡単に作成し、全体のテーマ デザインに溶け込ませることができます。

###結論は###

フォーム作成用のプラグインは他にもたくさんありますが、Ultimate Member は間違いなく最も機能が豊富なプラグインの 1 つです。言うまでもなく無料です!

以上がWordPress でカスタムフォームを作成する: ステップバイステップガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。