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

Conversational Formsアドオン用に独自のスタイルシートを発行したいですか？ このチュートリアルのどの方法でも独自の CSS を追加することができますが、フィルタを使用して会話フォーム専用のスタイルシートをエンキューすることもできることをご存知でしょうか。このチュートリアルでは、会話フォーム専用のスタイルシートをエンキューする方法を紹介します。

会話フォームの作成

まず、会話フォームを作成し、フィールドを追加する必要があります。 この作業で助けが必要な場合は、こちらのドキュメントを参照してください。

会話形式のカスタマイズ

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

必要なものを追加すればよいが、ここではテキスト、リンク、順序なしリストを以下のように追加している。

<p>You are about to complete an order form for theme package 3.</p>
<p>To review the terms and condition, <a href="#">please click here</a>.</p>
<p>Which includes, but not limited to the following:</p>
<ul>
<li>Theme 1</li>
<li>Theme 2</li>
<li>Theme 3</li>
<li>Free Plugin 1</li>
<li>Free Plugin 2</li>
<li>Free Plugin 3</li>
</ul>


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

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

サイトへのコード追加でお困りの場合は、こちらのチュートリアルをご覧ください。

/**
 * 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プラグインを使ってサーバーにアクセスできるようにした。

会話形式の表示

これで、訪問者がページを表示すると、独自のスタイルシートのenqueueによって追加された新しいスタイルが表示される。

以上で、会話フォームアドオン用の特定のスタイルシートをエンキューする必要がなくなりました。会話フォームに表示されるロゴをリンクしたいですか？Conversational Forms のロゴをリンクする方法をご覧ください。

参考アクション

wpforms_conversational_forms_enqueue_styles

よくあるご質問

Q:Form Pagesアドオンにも使えますか？

A: フォームページアドオンでユニークなエンキューを持つには、代わりにこのコードスニペットを使ってください。このアクションについてはこちらのドキュメントをご覧ください。

/**
 * 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 );