Divi EmailOptinモジュールの名前フィールドを削除する方法

今日のチュートリアルでは、Divi Email OptinModuleの名前フィールドを削除する方法を紹介します。 名前フィールドを削除することは、電子メールオプチンモジュールで標準である名前と姓のフィールドが視覚的に表示されないようにすることだけではありません。 機能性についてもです。 デフォルトでは、サブスクリプションには名と電子メールアドレスが必要です。 そのため、名前フィールドを非表示にするだけではプロセスは役に立ちません。

あなたはそれを成し遂げる支援するために、我々は、しかし、視覚的に名前のフィールドを取り除く方法をお見せし、それは同様に機能的に働くようになります

結果

この投稿を段階的に実行すると、次の結果が得られます。

EmailOptinモジュールの名前フィールドを削除する理由

名前フィールドを削除したい理由はおそらくいくつかあります。 理由がわからない場合; 以下にリストされている2つの理由を見てください。

あなたの訪問者の時間を節約するために

最初の理由は、ユーザーエクスペリエンスを念頭に置いています。 電子メールフィールドのみを要求することにより、訪問者はあなたとすばやく対話する可能性があります。 彼らがしなければならない唯一のことは彼らの電子メールアドレスをタイプすることであり、あなたは彼らが興味を持っているコンテンツを彼らに提供するでしょう。

バリアを小さくする/迅速な行動に依存する

人々がウェブ上で出くわすすべてのoptinモジュールに記入するとしたら、おそらく時間切れになるでしょう。 Optinフォームは、今日、あらゆる種類のWebサイトの一部です。 人々が彼らに魅了されていた時代は終わりました。 サブスクライブするために多大な労力を費やす必要があることに気付いた場合（読んでください：必要なフィールドをあまりにも多く入力する必要があります）、おそらくそれを無視するでしょう。 ただし、メールアドレスのみを要求した場合は、問題がない可能性が高くなります。 電子メールアドレスを入力するだけで最大5秒かかります（これは、人間の平均的な注意力の7秒未満です）。

Divi EmailOptinモジュールの名前フィールドを削除する方法

私たちのYoutubeチャンネルを購読する

それ以上遅れることなく、これを機能させましょう。

新しいページを追加

最初に行う必要があるのは、新しいページを追加するか、Eメールフィールドのみを使用してEmail OptinModuleを配置するページを開くことです。

Eメールオプチンモジュールを追加する

そのページが表示されたら、Email OptinModuleを好きな場所に追加します。 Email Optin Moduleを使用してページをプレビューすると、次のように表示されます。

フィールドに入力せずにサブスクライブボタンをクリックすると、機能しないことがわかります。 デフォルトでは、Email Optin Moduleを機能させるには、名と電子メール値が必要です。 そのため、フィールドを非表示にする（ただしまだ存在する）だけでは機能しません。 それらを削除しても機能しません。

ただし、実行できることは、名フィールドにデフォルト値を追加することです。 '*'のようなものを使用できます。これは、フィールドに値があることを確認するだけです。 もう1つ行う必要があるのは、入力フィールドにリンクされているラベルを削除することです。 これらすべてを実現するために、いくつかのjQueryコードとCSSコードを使用します。

CSSコードを追加する

まず、CSSコードを追加します。 CSSコードは、2つのフィールドがページに表示されないようにするだけです。 機能部分については、いくつかのjQueryコード行を使用する必要があります。

CSSコードを特定の1ページまたはWebサイト全体に適用することができます。 使用する方法は、ほとんどの場合、電子メールフィールドのみでコードモジュールを使用する頻度によって異なります。 Email Optin Moduleを複数回、異なるページ全体で使用する場合は、2番目の方法を使用してください。 1ページだけをカウントする場合は、最初の方法を使用します。

特に1つのページにCSSコードを追加する

特に1つのページにCSSコードを追加するには、作業中のページ内の次のアイコンをクリックします。

表示される画面内で、CSSコードの次の行をコピーして貼り付けます。

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

テーマオプションにCSSコードを追加する

Webサイト全体にCSSコードを追加するには、 WordPressダッシュボード> Divi>テーマオプション> [全般]タブを下にスクロールし、CSSコードの次の行を[カスタムCSS]フィールドに追加します。

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

jQueryコードを追加する

次に、必要なjQueryコードを追加します。 jQueryコードを追加するには、2つの可能性もあります。コードを追加して特定のページに適用するか、コードをWebサイト全体に追加します。

特定の1ページにjQueryコードを追加する（コードモジュール）

特に1つのページにjQueryコードを追加するには、EmailOptinモジュールのすぐ下にコードモジュールを追加します。 コードモジュールを開き、jQueryコードの次の行をその中に配置します。

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

ラベルを削除したので、メールアドレスフィールドの値に何も含まれていないことを確認しています。 ラベルを補正し、入力内容をユーザーに確実に知らせるために、代わりにプレースホルダーを使用しています。 この場合、プレースホルダーは「メールアドレス」ですが、これを他のものに自由に変換してください。

テーマオプションにjQueryコードを追加する

jQueryコードをWebサイト全体に適用するには、テーマオプションに配置します。 これを行うには、 WordPressダッシュボード> Divi>テーマオプション>統合に移動し、次のjQueryコード行をWebサイトの先頭に配置します。

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

結果

この投稿のすべての手順に従い、CSSおよびjQueryコードを特定の1つのページ、またはWebサイトのすべてのページに適用すると、次の結果が得られるはずです。

最終的な考え

この投稿では、Eメールアドレスフィールドのみを持つEメールオプチンモジュールを実現する方法を紹介しました。 あなたがそのような結果を達成したいと思うかもしれない理由は、有効性のためです。 電子メールアドレスのみを要求することにより、視聴者は購読するために費やす労力が少なくて済み、電子メールリストをより迅速に作成できるようになります。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

adichrisworo /shutterstock.comによる注目の画像