*

【WordPress】Contact Form 7でEnterキーを押すと勝手に送信されてしまう問題を解決する魔法のコード(JavaScript)

公開日: : 最終更新日:2017/06/29 how to, ウェブ・ネット・PC(パソコン), サーバ・プログラム

アイキャッチ画像はギャグとして(笑)

java-vs-javascript

就職活動中の女子大生にJavaとJavaScriptの違いを説明してみる




メールフォームでEnter押すと勝手に送信されてしまう問題


タイトルのそのまんま。

メールフォーム入力中にEnterキーを押すとまだ入力途中なのに勝手に送信されてしまう、ことがままあります。

メールフォームを設置しているサイト管理者さんは多いと思いますが、この問題はやはり解決したいところではあります。

Enter 勝手に送信などでググると色々と解決方法が出てきます。

jQueryだったりもっとシンプルにJavaScriptだったり。

まあ解決方法はそこまで難しい問題じゃないので良いのですが。

【参考】
jQuery お問い合わせフォーム等、エンターで勝手に送信させないようにする方法
Enterキーを打ってもsubmit(送信)しないようにするには

多分いちばんシンプルな方法はこちらですね。

メールフォーム入力途中でエラー画面に移動してしまうときの対処方法


これらで万事解決かと思うのですが、色々と世の中うまく行かないわけで。



【WordPress】Contact Form 7直感的にフォームの様々なカスタマイズが出来る


前から色々と記事を書いておりますcontactform7ですが。

◆過去のcontactform7の記事
【WordPress】Contact Form 7の追加プラグイン「Contact Form 7 DatePicker」便利だけど手動入力されたときにエラー吐いちゃうのの対策
【PHP】〓WordPressとかで便利〓Internet Explorerの古いバージョンの場合は違うページにリダイレクトさせる ハック編 2/2

この度発表された「WordPressプラグインのダウンロードランキング」でも堂々の世界2位であります。

1位が「Akismet」というスパム対策のプラグインでWordPressに最初から入っていることを考えると実質1位であります。

WordPressプラグインのダウンロードランキング・トップ200!!実質1位は日本発のあのプラグイン

国産のプラグインがこのような快挙となって非常に嬉しい限りですね(;_;)



で、説明不要な有名プラグインのcontactform7。WordPressで簡単にお問い合わせフォームを設置出来る優れもの。



例えばcontactform7の画面でこのようにタグを入れます。

これはこのブログのお問い合わせフォームの設定画面です。


tag_form

この赤丸で囲った

[email* your-email watermark”info@takuro.info”]

というタグが実際にhtmlを見ていると、以下の用に変換されます。


・
・
<p class="c2">
<span class="m-alert">必須</span>お名前<br />
<span class="wpcf7-form-control-wrap your-name">

<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="高橋拓郎" />
</span> </p>

<p class="c1">
<span class="m-alert">必須</span>メールアドレス <br />
<span class="wpcf7-form-control-wrap your-email">

<input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="info@takuro.info" />
</span> </p>
<p class="c2">
<span class="m-alert">必須</span>ご用件<br />
<span class="wpcf7-form-control-wrap youken">
<select name="youken" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="">---</option><option value="講演・講習・セミナーの依頼">講演・講習・セミナーの依頼</option><option value="事業相談・コンサルティングの依頼">事業相談・コンサルティングの依頼</option><option value="起業前相談・アドバイスの依頼">起業前相談・アドバイスの依頼</option><option value="取材・メディア出演の依頼">取材・メディア出演の依頼</option><option value="サイトについてのお問い合わせ">サイトについてのお問い合わせ</option><option value="その他">その他</option></select>
</span> </p>
・
・
・

ようはcontactform7の設定画面で直感的に入力すると自動的に正しいhtmlの形でnameやvalue,placeholderなどの値を入れる用に吐き出してくれる、と言うことです。

ちなみに設定は本当に直感的でわかりやすいです。

設定画面はこんな感じ。


tag_form_se



裏を返すとContact Form 7だとinputタグの中身を自在に変えられない


で、便利なんですが、逆に言えばcontactform7で用意されているinputタグの中身(要素)以外は選べないわけです。

ようは、inputタグの中身を自在に変えられないという問題があります。

まあ難点というか使いやすさを優先して自由度が少ないというよくあるパターンではあります。


で、今回の「Enterキーを押すと勝手に送信されてしまう問題」ですが、最初に紹介した多分いちばんシンプルな方法で用いる



  • onsubmit要素
  • onclick

などは確か使えなかったかと思います。

もちろん自分でcontactform7を改良して独自タグを作成すれば出来なくは無いですが、大本のファイルをいじるので。

WordPress自体やcontactform7のアップデートの度に再度書き換えなければなりません。

それともう一つ問題として既にたくさんのフォームを作ってしまった後に、

Enter勝手に送信問題を解決したい!

という僕みたいなナマケモノは、再度全部のフォームのタグを書き直すのめんどくさいです。


というわけで良い方法無いかいな?

と模索していたところなんとかGoogle先生および親切なエンジニアブロガーさんのお陰でなんとか解決しましたのでその紹介。

という前置きのほうが本文よりも超絶長い僕です(^_^;)






このコード貼るだけでとりあえず解決するよ


前置きが長くなったのでシンプルに。

参考にさせていただいたのがこちらのブログです。

<input type=”text”>でEnterを押してもsubmitさせない方法【HTML, JavaScript】

こちらであればJavaScriptのコードを追加するだけで現在のフォーム内のタグを改変せずに目的が達せられます。

ただし、逆に言えば

ページ内全てのinput(text, password)にsubmitStop関数を登録

しているので、個別にこのフォームはEnterで送信させたい、などは出来ないのでご注意を。


で、いじるとことは、今回は全てのフォームに適応させるわけですので、思い切ってWordPressのテーマファイルをいじっちゃいます。

さっきアプデの時も便利って言ったけどオリジナルテーマじゃない市販のテーマの人はアプデのとき結局再書き換えは必要だからね

まあ、JavaScriptが外部ファイルで読み込んでいる人はそっちに書いても良いけど、今回はコード貼り付けるだけで、的な感じだもんで、直接行きましょう。


全ページの共通のヘッダー部分になるheader.phpというファイルをいじりましょう。

デザイン的なヘッダーだけでなくhtmlのhead要素もこのファイルに書かれてるから。


で、当然JavaScriptはhead要素の中に書きましょう。わかりやすい用に<boby>タグの真上とかがいいかな?

で、コードがこちら



<script>

//Enterキーが押されても送信(submit)しない
function submitStop(e){
	if (!e) var e = window.event;

	if(e.keyCode == 13)
		return false;
}

//全てのinputのtext,password要素にそれを適応
window.onload = function (){
		var list = document.getElementsByTagName("input");
		for(var i=0; i<list.length; i++){
		if(list[i].type == 'text' || list[i].type == 'password'){
			list[i].onkeypress = function (event){
				return submitStop(event);
			};
		}
	}
}


</script>



なんかダサいやり方な気もするけどまあお盆でみんな遊んでる時にセコセコと会社でやってたんだから大目に見てね(^_^;)

ではでは。


【お願い】これを使ってうまくいったよ!という方はSNSのシェアやコメント残しをしてくれると中の人が非常に喜びます







【2017.06.29追記】

さらにtext,password以外でhtml5で良く利用されるtel,email,numberのほかradio,checkboxなども加えた完全版もここに置いておきます。

そしてWordPressに実装なので、フォーム以外のページ(検索ボックスがあるページとか)は、この動作邪魔だったりするので、それように

if(is_page( ‘xxxxx’ )):

でxxxxxの所をフォームが設置されている番号にすれば、それ以外は効かなくなるのでそのほうが親切かな?と。

ワードプレスで記事や固定ページのIDを確認する方法


<?php if(is_page( 'xxxxx' )): ?>
<script>
function submitStop(e){
	if (!e) var e = window.event;
	if(e.keyCode == 13)
	return false;}
window.onload = function (){
	var list = document.getElementsByTagName("input");
	for(var i=0; i<list.length; i++){
	if(list[i].type == 'text' || list[i].type == 'password' || list[i].type == 'tel' || list[i].type == 'email' || list[i].type == 'radio' || list[i].type == 'checkbox' || list[i].type == 'number'){
			list[i].onkeypress = function (event){
			return submitStop(event);};}}}
</script>
<?php endif; ?>


JavaScript 第6版
JavaScript 第6版
posted with amazlet at 14.08.13
David Flanagan
オライリージャパン
売り上げランキング: 19,427

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
山田 祥寛
技術評論社
売り上げランキング: 11,910

入門者のJavaScript (ブルーバックス)
立山 秀利
講談社
売り上げランキング: 49,950

関連記事

HP Mini 210-1000 ネットブック メモリ増設 1GB→2GB (I-O DATA PC2-6400 (DDR2-800) S.O.DIMM 2GB SDX800-2G/EC)

この記事を読む前に、、、 みんなの合言葉 自己責任で!!! すごく限定的な使い

記事を読む

【PHP】〓WordPressとかで便利〓Internet Explorerの古いバージョンの場合は違うページにリダイレクトさせる 概要編 1/2

IE6作った奴は世界中のwebデザイナーに土下座しろよ— dtsuka (@dtsuka

記事を読む

【WordPress】WP-PageNaviがデフォルト設定が左寄せだもんで、真中揃えにする方法

WordPressの人気プラグインでWP-PageNaviってやつがあります。 何のプラグイン

記事を読む

注文住宅(マイホーム)を建てる 凄い工務店発見 キミドリ建築の謎

貧乏人も夢を見てもいいじゃない、というわけで。 前回3回に分けて工務店の探し方としてスーモカウ

記事を読む

BUFFALO(バッファロー)製のNAS「LS410D0201」の純正バックアップ機能だと履歴管理バックアップが出来ないから、ネットブックにAcronis製「True Image」をインストして自前バックアップシステムを作ったなう

タイトル長すぎてうざくて死んで欲しいと思いますが。。。 ネットブックをN君から貰った話の続きと

記事を読む

【PHP】〓WordPressとかで便利〓Internet Explorerの古いバージョンの場合は違うページにリダイレクトさせる ハック編 2/2

【PHP】〓WordPressとかで便利〓Internet Explorerの古いバージョンの場合は

記事を読む

【PHP】メールフォーム 一度入力した内容が消えてしまう時 POST使って入力内容を保持 ~メールフォームパッケージダウンロードあり~

前に、 【PHP】スマホ対応 メールフォーム設置 PEARを使ってgmailのsmtpサーバで

記事を読む

【PHP】時間を扱うときはdate_default_timezone_set(‘Asia/Tokyo’);を入れよう

タイトルそのまんま。そんだけ。 日本国内のサービスでphpで時間を扱うときは、サーバの設定いじ

記事を読む

【バーチャルホスト】サブドメイン・DNSの設定覚書 設定(サーバ)編 予備知識版

これの続きです。 前はDNSの設定編で今回は2ステップの最後サーバの設定です。

記事を読む

「いま、IS01を想う。」に想う。。。おっさんくさい話。

川脇議員に貴重なお時間を割いていただき、インタビューをさせて頂いたのですが。 知多市議会議員「

記事を読む

Comment

  1. […] こちらのサイトをかなり参考にしました […]

Message

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

  • 高橋拓郎(32歳)
    愛知県知多市生まれ。
    大学在学中に個人で始めた事業を、大学院中退後法人化(法人化のために中退が正しいかも)。
    簡単にコンタクトとれるのでt@takuro.infoまで何か御用があればなんなりと。
    ブログの感想やご意見も大歓迎です!
【javaScript】2017年版 法人税実効税率 自動計算機(コードも置いとくね)

今日は4/3だからこれは嘘じゃないよ!! 法人税実効税率

【ユーザー車検】軽トラを無料でGETしたけど車検代が無いから初の軽自動車ユーザー車検に挑戦!

青春カーと悲しい別れ どうも。貧乏が板に付いてきて久しい僕で

【LINEbot】LINEbotが作れるからphpで作ってみたの巻 ~さくらの共有SSLでも動くよ~

BOT API Trial Accountってのが、公開されたので、L

【電気自動車】日産リーフの無料モニターに当選して2週間使ってみたけれども。。。結論的に購入は時期尚早??

どうも。実写版とってもラッキーマンこと僕です! とっても!ラッキ

追尾メニューのAdSense削除の件

このサイトへのお問い合わせで、以下のような内容のご指摘を頂きました。

→もっと見る

PAGE TOP ↑