AI要約
フォームフィールドの回答に基づいて、送信ボタンを自動的に表示または非表示にしますか？簡単なコードスニペットを使用すると、条件付きロジックを使用してフォームの送信ボタンの表示を制御できます。
このガイドでは、コードスニペットの追加方法と、送信ボタンの表示を制御するための条件付きロジックの設定方法を説明します。
フォームの設定
まず、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーを開きます。
この例では、Yes/Noの選択肢を持つ多肢選択フィールドを使用して寄付フォームを作成します。フォーム内の他のすべての追加フィールドは、条件付きロジックを使用してYesが選択された場合にのみ表示されます。
送信ボタンはYesが選択された場合にのみ表示され、Noが選択された場合は感謝のページにリダイレクトされます。
注意: コードスニペットを追加する際にフォームIDが必要になるため、メモしておいてください。これらのIDを見つけるのに役立つ情報については、フォームとフィールドIDの見つけ方ガイドをご覧ください。
条件付きロジックの設定
送信ボタンのコードを追加する前に、フォーム内の他のフィールドの条件付きロジックを設定する必要があります。これらのフィールドは、ユーザーが多肢選択フィールドで「Yes」を選択するまで非表示のままにする必要があります。
これを実現するには、各フィールドの設定を開き、多肢選択フィールドがYesと等しい場合にフィールドを表示するように条件付きロジックを設定します。これにより、これらのフィールドはデフォルトで非表示になり、必要な場合にのみ表示されるようになります。
注意: WPFormsでの条件付きロジックの機能について理解を深めるには、条件付きロジックの詳細ガイドをご覧ください。
感謝のページの作成
フォームではユーザーにYes/Noの選択肢を提供するため、「No」が選択された場合でも良い体験を提供したいと思います。送信ボタンを非表示にするだけでなく、ユーザーを専用の感謝のページにリダイレクトします。
これを行うには、WordPressで新しいページを作成し、Thank You（またはお好みの他の名前）と名付けます。「No」を選択したユーザーはここに自動的にリダイレクトされます。
コードスニペットでのリダイレクトに使用するため、ページのURLパスをメモしておいてください。
コードスニペットの追加
次のコードスニペットは、フォームの回答に基づいて送信ボタンの表示を制御します。
このスニペットは、まずCSSを使用して、ページが最初に読み込まれたときに送信ボタンを非表示にします。次に、フォームの多肢選択フィールドのオプションへの変更を監視するJavaScriptイベントリスナーを設定します。
ユーザーが「Yes」を選択すると、スクリプトは送信ボタンを表示するCSSクラスを追加します。ユーザーが「No」を選択すると、スクリプトは自動的に感謝のページにリダイレクトします。
注意: サイトにコードスニペットを追加するのに役立つ情報については、安全にコードスニペットを追加するチュートリアルをご覧ください。
コードのカスタマイズ
コードスニペットのいくつかの重要な値を、特定のフォームに合わせてカスタマイズする必要があります。
- 12行目と16行目にあるCSSセレクター
#wpforms-form-1000を見つけ、1000をお使いのフォームIDに置き換えてください。 - 30行目のjQueryセレクター
form#wpforms-form-1000で、1000をお使いのフォームIDに再度置き換えてください。 - 33行目には、リダイレクトURLパス
/thank-youがあります。これを、サンキューページの実際のURLパスに合わせて更新してください。- たとえば、ページ名を「Thanks」とした場合は、
/thanksに変更します。
- たとえば、ページ名を「Thanks」とした場合は、
実装のテスト
コードスニペットを追加・カスタマイズしたら、機能を徹底的にテストすることが不可欠です。
- まず、フォームを新規に読み込み、送信ボタンがデフォルトで非表示になっていることを確認してください。
- 次に、フォームでいいえを選択し、すぐにサンキューページにリダイレクトされることを確認してください。
- 次に「はい」のパスをテストします。はいを選択し、送信ボタンが表示されるだけでなく、条件付きで非表示になっていたフィールドがすべて表示されることを確認してください。
- 最後に、はいを選択した状態でフォームを完成・送信し、プロセス全体が期待どおりに機能することを確認してください。
よくある質問
Q: これは一行テキストフィールドに使用できますか？
A: もちろんです！一行テキストフィールドで機能するコードスニペットはこちらです。
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000.wpforms-submit {
visibility: hidden;
}
#wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
visibility: visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect_text_area() {
?>
<script>
jQuery(function($){
// Form ID 1000 and Field ID 15
$( "#wpforms-1000-field_15" ).change(function(){
var inputvalue = $( "div#wpforms-1000-field_15-container input[type='text']" ).val();
var specificText ="Some Text Here"
if(inputvalue == specificText){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect_text_area', 10 );
Q: このスニペットをドロップダウンフィールドに使用できますか？
A: はい、以下のコードスニペットを使用してドロップダウンフィールドで使用できます。
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000.wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).on( 'change', function () {
var selectedval = $( "#wpforms-1000-field_15 option:selected" ).text();
if(selectedval == "First Choice"){
$( ".wpforms-submit" ).removeClass( "show-submit" );
}
else{
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
Q: 次へおよび前へページブレークボタンにも使用できますか？
A: ページブレークボタンに同じ機能を使用するには、.wpforms-submitをbutton.wpforms-page-nextに変更するだけで済みます。したがって、完全なコードスニペットは次のようになります。
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 button.wpforms-page-next {
visibility: hidden;
}
#wpforms-form-1000 button.wpforms-page-next.show-next {
visibility: visible;
}
</style>
<?php } );
// Conditional logic for Next button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($) {
$( "form#wpforms-form-1000" ).click(function() {
var selectedval = $( ".wpforms-form input[type='radio']:checked" ).val();
if (selectedval == "No") {
window.location = "/thank-you";
}
if (selectedval == "Yes") {
$( "button.wpforms-page-next" ).addClass( "show-next" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
Q: ページに複数の選択肢フィールドが1つ以上ある場合はどうなりますか？
A: はいまたはいいえの質問が複数ある場合は、フィールドIDを指定することでスクリプトを識別できます。たとえば、ページに3つの選択肢フィールドがある場合、スクリプトは次のようになります。
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
// Form ID 1000 and Field ID 15
var selectedval = $( "div#wpforms-1000-field_15-container input[type='radio']:checked" ).val();
if(selectedval == "Yes"){
window.location = "/thank-you";
}
if(selectedval == "No"){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
フォームIDは1000で、コードで使用したい選択肢フィールドのIDは15です。したがって、$("div#wpforms-1000-field_15-container input[type='radio']:checked")で評価する変数を設定しています。
Q: すべてのフィールドに値があるまで送信ボタンを無効にすることはできますか？
A: はい、ただし、電話番号やメールアドレスなどは検証されません。このスニペットは、送信ボタンをクリックできるようになる前に任意の値を探すだけです。
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
function wpf_dev_disable_submit_validation() {
?>
<script type="text/javascript">
jQuery(function () {
// Disable the submit button with the ID of #wpforms-submit-727, change the 727 to match your form ID
jQuery('#wpforms-submit-727').attr('disabled', true);
// Look and listen for any change on the form ID 727, change the 727 to match your form ID
jQuery('#wpforms-form-727').change(function () {
// List all field IDs in this section using the && to join them
if (jQuery('#wpforms-727-field_1').val() != '' &&
jQuery('#wpforms-727-field_2').val() != '' &&
jQuery('#wpforms-727-field_3').val() != '' &&
// Check for radio button (adjust field number as needed)
jQuery('input[name="wpforms[fields][4]"]:checked').val() &&
// Check for checkbox (adjust field number as needed)
jQuery('input[name="wpforms[fields][5][]"]:checked').length > 0) {
// If all of those field IDs have values, the submit button can be clicked
jQuery('#wpforms-submit-727').attr('disabled', false);
} else {
// Otherwise, the submit button for this form remains disabled
jQuery('#wpforms-submit-727').attr('disabled', true);
}
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_disable_submit_validation', 1);
注意: 727がお使いのフォームIDと一致していること、およびこのフォームの各フィールドIDをリストアップしていることを確認するだけで済みます。フォームまたはフィールドID番号を見つけるのにヘルプが必要な場合は、このチュートリアルを参照してください。
Q: フィールドで複数の選択肢を比較したい場合はどうなりますか？
A: 複数のフィールドを比較したい場合は、OR演算子のPHP相当のものを使用するだけです。
この例では、ユーザーが希望時間を選択するためのチェックボックスフィールドを使用した簡単な予約フォームを使用しています。ユーザーが8:00～9:00am、9:00～10:00am、または10:00～11:00amを選択した場合、これらのスロットはすでに取られているため、ありがとうページにリダイレクトされます。
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
var selectedval = $( ".wpforms-form input[type='checkbox']:checked" ).val();
if ( selectedval == "8:00 - 9:00am" || selectedval == "9:00 - 10:00am" || selectedval == "10:00 - 11:00am" ) {
window.location = "/thank-you";
}
if ( selectedval == "11:00 - 12:00pm" || selectedval == "12:00 - 1:00pm" || selectedval == "1:00 - 2:00pm" ) {
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
注意: PHP比較演算子について詳しくは、この件に関するドキュメントをこちらで確認してください。
Q: 2つの日付を比較するようにこれを変更できますか？
A: もちろんです！サイトに2つの日付フィールドがあるとしましょう。日付1は注文日、日付2は受け取り日とします。しかし、日付2が日付1より大きい場合にのみ送信ボタンを表示したいとします。
スニペットの追加方法については、このチュートリアルを確認してください。
/**
* Conditionally show the submit button if date 2 is greater than date 1
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1899 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1899 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_compare_two_dates() {
?>
<script>
jQuery(function($){
// Only fire this script when date 2 has been selected
document.querySelector( "#wpforms-1899-field_33-container" ).onchange = function() {
// Set the first date picker variable
var oneDate = $( "input#wpforms-1899-field_32" ).val();
// Set the second date picker variable
var twoDate = $( "input#wpforms-1899-field_33" ).val();
// Now compare the 2 dates, show a message and keep the Submit button hidden
// if date 2 is less than date 1
if(twoDate < oneDate){
alert( "Please make sure that the pickup date is after the dropoff date" );
e.preventDefault();
e.stopPropagation();
}
else {
// since date 2 is greater than date 1, go ahead and show the submit button
$( ".wpforms-submit" ).addClass( "show-submit" );
}
}
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_compare_two_dates', 10 );
上記のコードスニペットの1899はすべて私のフォームIDです。_32と_33は、フォーム内の2つの日付ピッカーのフィールドIDです。
これらのIDはすべて、ご自身のフォームおよびフィールドIDに合わせて更新する必要があります。それらの見つけ方については、このチュートリアルを確認してください。
Q: ドロップダウンオプションに基づいて、ユーザーがフォームを続行できないようにできますか？
A: もちろんです。この例では、次へおよび前へボタンは期待どおりに表示されますが、フォームで「いいえ」を選択した場合、ユーザーがフォームを続行できないようにこれらのボタンを無効にしたいと考えています。
/**
* Conditionally show the Next button based on dropdown choice
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
function wpf_dev_conditional_next_page() {
?>
<script>
jQuery(function($){
// Only run this on the form ID 727
$( "form#wpforms-form-727" ).on( 'change', function () {
// Look at the field ID 9 which is a dropdown to see what the user selected
var selectedval = $( "#wpforms-727-field_9 option:selected" ).text();
// If the user selects no from the dropdown, disable the Next button
if(selectedval == "No"){
$( ".wpforms-page-next" ).attr({disabled: "true"});
}
else {
// Otherwise, the next button for this form remains disabled
$( '.wpforms-page-next' ).attr('disabled', false);
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 10 );
注意: このスニペットを使用する場合、ユーザーはボタンがなぜ無効になっているのか理解できず、混乱を招く可能性があることに注意してください。このスニペットを使用する際は、フォームの流れをユーザーに理解させるようにしてください。
Q: 数値フィールドが3以上でない限り、送信ボタンを無効にするにはどうすればよいですか？
A: 数値を分析する場合、このスニペットを使用できます。
/**
* Check if amount entered on field ID 15 is greater than or equal to 3
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
// Form ID 1000 and Field ID 15
var selectedval = $( "div#wpforms-1000-field_15-container input[type='number']" ).val();
if(selectedval <= "2"){
$( ".wpforms-submit" ).removeClass( "show-submit" );
}
if(selectedval >= "3"){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
注意: フォームIDはご自身のフォームIDに合わせて1000から変更し、フィールドID_15は数値フォームフィールドのフィールドIDに合わせて変更することを忘れないでください。
Q: マルチステップフォームで特定の数のチェックボックスが選択されるまで、「次へ」ボタンを非表示にするにはどうすればよいですか？
A: CSSとJavaScriptの組み合わせを使用して、特定の数のチェックボックスが選択されるまで「次へ」ボタンを非表示にすることができます。少なくとも2つのチェックボックスが選択されるまで「次へ」ボタンを非表示にする例を次に示します。
/**
* Hide Next button until multiple checkboxes are selected
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide next button on page load for specific form and page */
#wpforms-form-35864 .wpforms-page-next[data-page="4"] {
visibility: hidden;
}
#wpforms-form-35864 .wpforms-page-next[data-page="4"].show-next {
visibility: visible;
}
</style>
<?php } );
function wpf_dev_form_conditional_next() {
?>
<script type="text/javascript">
jQuery(function($) {
// Function to check the number of selected checkboxes
function checkCheckboxes() {
var minSelection = $('#wpforms-35864-field_33-container input[type=checkbox]:checked').length;
if (minSelection >= 2) {
$("button.wpforms-page-next").addClass("show-next");
} else {
$("button.wpforms-page-next").removeClass("show-next");
}
}
// Check the checkboxes on form load and when any checkbox is clicked
checkCheckboxes();
$('#wpforms-35864-field_33-container input[type=checkbox]').on('change', function() {
checkCheckboxes();
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_conditional_next', 10 );
これで、フォームで送信ボタンを条件付きで表示するために必要なすべてが揃いました。送信ボタンの色を変更する方法についてもっと知りたいですか？送信ボタンの色を変更する方法の記事をご覧ください。