Contact Form 7にtype=”file”を設置した場合Safari Version11.1で機能しない
-
お世話になります。
長くなりますが宜しくお願い致します。Contact Form 7を使用しフォーム編集画面fileコードを追加してtype=”file”を設置しております。
type=”file”を設置した場合にSafariの最新バージョン11.1でファイルを添付していない状態で送信すると正常に作動しません。
具体的には下記のコードを記載しています。
<label> お名前 (必須) [text* your-name] </label> <label> メールアドレス (必須) [email* your-email] </label> <label> ファイル [file your-file id:your-file limit:2mb filetypes:gif|png|jpg|jpeg] </label> <label> 題名 [text your-subject] </label> <label> メッセージ本文 [textarea your-message] </label> [submit "送信"]
続いて、メール設定パネルのファイル添付に[your-file]と記載し送信元をサーバーで作成したドメインを含むアドレスに変更しております。
出力されるhtmlは下記になります。
<input type="file" name="your-file" size="40" class="wpcf7-form-control wpcf7-file" id="your-file" accept=".gif,.png,.jpg,.jpeg" aria-invalid="false">
その場合Safariの最新バージョン11.1とiPhoneのSafariなどのブラウザでファイルを添付していない状態で送信すると以下の様なエラーが発生しajax-loader画像が永遠に回り続け送信が完了されません。
-> Failed to load resource: the server responded with a status of 400 ()
ファイルを添付し送信すると正常に送信されます。
具体的なテスト環境やシステム情報を記載します。
== エックスサーバー環境 ==
Operating System: Linux
Software: Apache
MySQL version: 5.7.17
PHP Version: 7.1.4
PHP Max Input Vars: 2000
PHP Max Post Size: 2048M//変更
GD Installed: Yes
Write Permissions: All right== コアサーバー環境 ==
Operating System: Linux
Software: Apache
MySQL version: 5.7.21
PHP Version: 7.1.15
PHP Max Input Vars: 1000
PHP Max Post Size: 2048M
GD Installed: Yes
Write Permissions: All right※ エックスサーバー、コアサーバーともにREST API アクセス制限なし
== エックスサーバーでのWordPress 環境 ==
Version: 4.9.5
Site URL: https://cf7.art-taste.com
Home URL: https://cf7.art-taste.com
WP Multisite: No
Max Upload Size: 2 GB//変更
Memory limit: 512M //増加
Permalink Structure: /%year%/%monthnum%/%postname%/
Language: ja
Timezone: Asia/Tokyo
Debug Mode: Active== コアサーバーでのWordPress 環境 ==
Version: 4.9.5
Site URL: https://cf7.noustrack-records.com
Home URL: http://cf7.noustrack-records.com
WP Multisite: No
Max Upload Size: 2 GB
Memory limit: 512M //増加
Permalink Structure: /%year%/%monthnum%/%postname%/
Language: ja
Timezone: Asia/Tokyo
Debug Mode: Active== エックスサーバーで設定しているテーマ ==
Name:Twenty Sixteen
Version:1.4
Author: the WordPress team
Child Theme: No== コアサーバーで設定しているテーマ ==
Name:Twenty Seventeen
Version:1.5
Author: the WordPress team
Child Theme: No== ユーザー ==
Role:administrator
WP Profile lang:ja== 試した主なブラウザ ==
User Agent 1:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/604.5.6 (KHTML, like Gecko) Version/11.0.3 Safari/604.5.6
User Agent 2: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1 Safari/605.1.15== 有効化しているプラグイン ==
Contact Form 7 – Version 5.0.1 By Takayuki Miyoshi上記のとおり、私が有効化しているプラグインは「Contact Form 7 」のみです。
テーマは “Twenty Seventeen”, “Twenty Fifteen”, “Twenty Fifteen”で検証しました。
結果はすべて同じでした。
唯一の変更点は、次の2行を “wp-config.php”を追加しデバッグをtrueにしたことです。
define(‘WP_MEMORY_LIMIT’, ‘512M’);//add define(‘WP_MAX_MEMORY_LIMIT’, ‘1280M’);//add
WordPress側ではそれ以外は何もカスタマイズしていません。
他のプラグインは「Akismet Anti-Spam (アンチスパム)」と「WP Multibyte Patch」以外インストールされていません。ただ、この2つのプラグインは有効化していません。サーバーの設定はエックスサーバーのみphp.ini「PHP Max Post Size」、「Max Upload Size」、「PHP Max Post Size」を変更しております。
私がした作業は以下の通りです。
1. WordPressをインストール
2. wp-config.phpに上記のコードを追加
3. Contact Form 7をインストールし有効化
4. 最初にデフォルトで自動作成されているコンタクトフォーム 1のフォーム編集画面でfileコードを追加
( このコードです→ [file your-file id:your-file limit:2mb filetypes:gif|png|jpg|jpeg] )
5. フォーム編集画面のファイル添付フィールドに[your-file]コードを記入
6. 送信元をサーバーで作成したドメインを含むアドレスに変更
7. 各ブラウザやMac、Windows、iPad、iPhoneなどの異なる環境で検証検証結果として具体的にはMac環境で OSX 10.9.5 と Safari 9.1.1を使用した場合はajaxを使用していないのでURLの後に/#wpcf7-f○-f○-p○-o○が付加して作動します。
Mac OSX 10.11.6 と Safari 11.0.3を使用した場合はajaxを使用して添付ファイルがありなしに関係なく送信できました。
Mac OS X 10.12.6 と Safari 11.1を使用した場合はajaxを使用して画像添付した場合は送信出来るが画像添付をしないでメッセージのみや、空のまま送信ボタンを押すとajax loaderが永遠に回り続ける症状が発生しました。
その際に発生したエラーは以下の通りです。
Failed to load resource: the server responded with a status of 400 ()
https://cf7.art-taste.com/wp-json/contact-form-7/v1/contact-forms/4/feedback{"code":"rest_no_route","message":"URL \u3068\u30ea\u30af\u30a8\u30b9\u30c8\u30e1\u30bd\u30c3\u30c9\u306b\u4e00\u81f4\u3059\u308b\u30eb\u30fc\u30c8\u304c\u3042\u308a\u307e\u305b\u3093","data":{"status":404}}
この症状はiPhoneでも同様です。
iPhoneのiOSバージョンは11.3でSafari,Chrome,Firefox,Lunascape,ドルフィンなど様々なブラウザアプリでテストしましたが全て同じ症状でした。Mac,iPhone共にCookieの削除をしても改善されませんでした。
また、iPhoneは4GでもWi-Fiでも同様でした。Macの場合はMac OS X 10.12.6でChrome バージョン 66.0.3359.117,firefox バージョン 59.0.2,Opera バージョン 52.0.2871.64と試しましたがこの場合は正常に機能しました。
Windowsの場合はWindows 8.1 と Internet Explorer バージョン 11.0.9600.16384にて正常に機能しました。
その他、AndroidやMicrosoft Edgeなどでは環境がない為、確認できませんでした。
対策としてはフォームを画像送信専用とファイル添付機能がないフォームとをタブなどでわけて対策しようと思っているのですがそもそも他の方の環境ではどの様に機能しているのかが知りたいです。
テストで作成したフォームのリンクを掲載します。
リンクからSafari最新バージョン、iPhone iOS最新バージョンにて動作を確認いただければ幸いです。
Safariの方で改善されるのを待つか、サーバーの設定で改善できるのか、Contact Form 7側でアップデートなどでカバーして頂けるか、Contact Form 7の今のバージョンでカスタマイズなどで対策を取れるかなど知りたいです。
かなり長くなってしまいましたがこの症状を改善する方法はありますでしょうか?
お手数ですが、ご教授いただければ助かります。
宜しくお願い致します。ヘルプの必要なページ: [リンクを見るにはログイン]
- トピック「Contact Form 7にtype=”file”を設置した場合Safari Version11.1で機能しない」には新たに返信することはできません。