【ContactForm7】複数あるお問い合わせフォームを切り替える方法【WordPress】
PR ※当サイトではアフィリエイト広告を利用しています
「お問い合わせフォームが複数あってそれぞれ分けて表示したい。２つ３つと多くなった時にどう対応すれば良いんだろう？」
今回はWordPressのContactForm7を使った複数あるお問い合わせフォームを切り替えて表示させる方法を紹介します。
法人や大規模になるとお問い合わせフォームのページに複数のフォームを設置する場合があります。
その時に１つのページでお問い合わせフォームを出し分けることができれば、ページを作る必要もなくなりますよね。
完成品はこちら
少し見づらいかもしれませんが、お問い合わせフォームを３つ作り、それぞれのボタンをタップすることで、表示を切り替えるようになっています。
【ContactForm7】複数あるお問い合わせフォームを切り替える方法【WordPress】
まずはこちらを見てください。
それぞれコードの紹介をしていきます。
HTML
<div class="contactus inner">
<div class="contact-tab">
<button class="tablinks active --form1" onclick="openForm(event, 'Form1')">個人の方</button>
<button class="tablinks --form2" onclick="openForm(event, 'Form2')">法人の方</button>
<button class="tablinks --form3" onclick="openForm(event, 'Form3')">パートナーの方</button>
</div>
<div class="article">
<div id="Form1" class="tabcontent">
<?php echo do_shortcode('[contact-form-7 id="100" title="導入検討"]'); ?>
ここに１が入る
</div>
<div id="Form2" class="tabcontent">
<?php echo do_shortcode('[contact-form-7 id="2" title="Contact form 2"]'); ?>
ここに２が入る
</div>
<div id="Form3" class="tabcontent">
<?php echo do_shortcode('[contact-form-7 id="3" title="Contact form 3"]'); ?>
ここに３が入る
</div>
</div>
</div>
CSS
.contact-tab {
display: flex;
margin-bottom: 80px;
@include mq(md){
margin-bottom: 32px;
}
}
.contact-tab .tablinks {
width: 312px;
max-width: 100%;
}
.tablinks+.tablinks {
margin-left: auto;
@include mq(md){
margin-left: 2vw;
}
}
.contact-tab button {
color: #fff;
padding: 10px 15px;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
transition: 0.3s;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
border-radius: 8px;
@include mq(md){
font-size: 13px;
white-space: nowrap;
}
}
.contact-tab button:hover {
background-color: #eee;
}
.contact-tab button.active {
background-color: skyblue;
}
CSSはJavaScriptで生成しているクラスをあらかじめ追記しておき、スタイルを整えています。最低限のスタイルなのでそれぞれ調整してください。
JavaScript
document.getElementsByClassName("tablinks")[0].click();
function openForm(evt, formName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(formName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
コードを解説
ソースコードの解説をします。
まずはJavaScriptですが、初期状態ですべてのフォームを一旦非表示に設定する必要があります。そして、ページの読み込み時に最初のフォーム（または任意のフォーム）を表示しています。
まず、CSSを追加して全てのフォームをデフォルトで非表示にします。
.tabcontent {
display: none;
}
次に、JavaScriptを少し修正してページが読み込まれたときに最初のフォームを表示します
document.getElementsByClassName("tablinks")[0].click();
これによって、ページが読み込まれたときに最初のタブボタン（index 0）が「クリックされた」ように動作し、結果として最初のフォームが表示されます。
もし、初期に２つ目や３つ目のフォームを表示させたい場合は、インデックスを適切な値（1や2）に変更すればOKです。
以下が、全体のコードです。
<div class="tab">
<button class="tablinks" onclick="openForm(event, 'Form1')">お問い合わせフォーム 1</button>
<button class="tablinks" onclick="openForm(event, 'Form2')">お問い合わせフォーム 2</button>
<button class="tablinks" onclick="openForm(event, 'Form3')">お問い合わせフォーム 3</button>
</div>
<div id="Form1" class="tabcontent">
<?php echo do_shortcode('[contact-form-7 id="1" title="Contact form 1"]'); ?>
</div>
<div id="Form2" class="tabcontent">
<?php echo do_shortcode('[contact-form-7 id="2" title="Contact form 2"]'); ?>
</div>
<div id="Form3" class="tabcontent">
<?php echo do_shortcode('[contact-form-7 id="3" title="Contact form 3"]'); ?>
</div>
<script>
function openForm(evt, formName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(formName).style.display = "block";
evt.currentTarget.className += " active";
}
// Open the first tab by default
document.getElementsByClassName("tablinks")[0].click();
</script>
完成後は、ボタンを押すことでそれぞれ表示・非表示で切り替わることができます。
ContactFrom7について解説
Contact Form 7は、非常に人気のあるWordPressのプラグインで、サイトを作る時に簡単にお問い合わせフォームを作成することができます。
プラグインの主な特徴としては、短いコードを使用してフォームを任意のページや投稿に埋め込むことができるという点があります。便利ですね。
以下に、Contact Form7の主な特徴をいくつか紹介しておきます。
ContactFormの特長
- 豊富なフィールドタイプ: Contact Form7は、テキスト、メール、URL、電話番号、日付、テキストエリア、ドロップダウンメニュー、ラジオボタン、チェックボックスなど、様々なタイプがある
- 自動メール設定: フォームを送信したときに送信されるメールの内容を設定できる。
- 簡単なカスタマイズ: HTMLとCSSを使用して、フォームの見た目やレイアウトをカスタマイズすることができる
- スパム対策: Contact Form 7は、スパム送信を防ぐための機能を備えています。例えば、reCAPTCHAの統合や、Akismetとの統合などがあります。
以上が基本的な特徴です。Contact Form7は、非常に柔軟性が高く、それぞれのニーズに合わせてカスタマイズすることが可能なため大人気となっています。
参考になったらぜひリツイートしてくれると嬉しいです。
リツイートする
合わせて読みたい記事
