How to Enqueue a Stylesheet for Conversational Forms

Markdownを表示

会話フォームアドオン用の独自のスタイルシートをエンキューしますか？このチュートリアルのいずれかの方法で独自のCSSを追加できますが、フィルターを使用して会話フォーム専用のスタイルシートをエンキューすることもできます。この方法では、整理がはるかに容易になり、このチュートリアルでは、これらのフォーム専用のスタイルシートをエンキューする方法を示します。

会話フォームの作成

まず、会話フォームを作成し、フィールドを追加する必要があります。これを行うのにヘルプが必要な場合は、このドキュメントを確認してください。

フィールドを追加したら、設定タブから会話型フォームを有効にしてください。

会話フォームのカスタマイズ

会話フォームを作成したら、このチュートリアルの目的上、会話フォームタブのメッセージフィールドにテキストを追加します。これは、訪問者がフォームを読み込んだときに表示されるメッセージです。

必要なものを追加できますが、ここではテキスト、リンク、および次のものを含む順序なしリストを追加します。

テーマパッケージ3の注文フォームを完了しようとしています。



利用規約を確認するには、ここをクリックしてください。


以下が含まれますが、これらに限定されません。




 	テーマ1


 	テーマ2


 	テーマ3


 	無料プラグイン1


 	無料プラグイン2


 	無料プラグイン3

会話フォームのスタイルシートのエンキュー

会話フォーム用の独自のスタイルシートをエンキューする前に、まずそれを可能にするこのコードスニペットを追加する必要があります。

サイトにコードを追加するのにヘルプが必要な場合は、このチュートリアルを確認してください。

/**
 * Enqueue your own stylesheet for conversational forms
 * 
 * @link  https://wpforms.com/developers/how-to-enqueue-a-stylesheet-for-conversational-forms/
 */

function wpfdev_convoform_custom_css() {

	wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/name-of-your-css-file.css' );
}

add_action( 'wpforms_conversational_forms_enqueue_styles', 'wpfdev_convoform_custom_css', 10 );

スタイルシートの作成とテーマディレクトリへのアップロード

コードが追加されたら、CSSファイルを作成する必要があります。

このチュートリアルで使用した基本的なCSSスタイルを次に示します。

.wpforms-title {
    color: #e27730!important;
    font-size: 36px !important;
}
.wpforms-description {
    line-height: 1.6em;
    text-align: left;
    white-space: normal !important;
    max-width: 90%;
    font-size: 18px !important;
    margin: 0 auto;
}
.wpforms-description a {
    color: #e27730;
    text-decoration: none;
}
.wpforms-description a:hover {
    color: #c45e1b;
}
.wpforms-description ul li {
    list-style: circle !important;
    list-style-position: inside !important;
    font-size: 16px;
}
button.wpforms-conversational-btn-start.wpforms-conversational-btn {
    background-color: #e27730 !important;
    color: rgba(255,255,255,1) !important;
}
button.wpforms-conversational-btn-start.wpforms-conversational-btn:hover {
    background-color: #c45e1b !important;
}
.wpforms-conversational-form-btn-desc {
    display: none !important;
}

これらは、リンクと順序なしリストの標準的なスタイリングCSSルールです。会話フォームのタイトルもスタイル設定し、通常開始ボタンの横に表示されるテキストを削除しました。

CSSルールを作成したら、FTPまたはFTPタイプのプラグインを使用してアップロードし、テーマディレクトリにアップロードします。FTPを使用したアップロードについては、このチュートリアルに従ってください。

このチュートリアルでは、サーバーにアクセスするためにこのチュートリアルで言及されているWordPressプラグインを使用しました。

独自のCSSルールを含むCSSファイルを作成し、テーマディレクトリにアップロードします

会話フォームの表示

訪問者がページを表示すると、独自のスタイルシートをエンキューするだけで追加された新しいスタイルが表示されます。

会話型フォーム用に独自のスタイルシートをエンキューして、CSSを整理し、見つけやすくします。

これで、Conversational Formsアドオンの特定のスタイルシートをエンキューする方法はすべてです。会話型フォームに表示されるロゴをリンクしますか？会話型フォームのロゴをリンクする方法に関するドキュメントをご覧ください。

参照アクション

wpforms_conversational_forms_enqueue_styles

よくある質問

Q: Form Pagesアドオンにも使用できますか？

A: Form Pagesアドオンに固有のエンキューを行うには、代わりにこのコードスニペットを使用してください。このドキュメントを確認することで、このアクションの詳細を確認できます。

/**
 * Enqueue your own stylesheet for the Form Pages addon
 * 
 * @link  https://wpforms.com/developers/wpforms_form_pages_enqueue_styles/
 */

function wpfdev_formpages_custom_css() {

	wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/name-of-your-css-file.css' );

}
add_action( 'wpforms_form_pages_enqueue_styles', 'wpfdev_formpages_custom_css', 10 );

会話フォームのスタイルシートをエンキューする方法

AI要約