Contact Form 7にtype=”file”を設置した場合Safari Version11.1で機能しない

luvjapan
(@luvjapan)

6年前
お世話になります。
長くなりますが宜しくお願い致します。

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の今のバージョンでカスタマイズなどで対策を取れるかなど知りたいです。

かなり長くなってしまいましたがこの症状を改善する方法はありますでしょうか？

お手数ですが、ご教授いただければ助かります。
宜しくお願い致します。

ヘルプの必要なページ: [リンクを見るにはログイン]

10件の返信を表示中 - 1 - 10件目 (全10件中)

モデレーター Takayuki Miyoshi
(@takayukister)

6年前

luvjapan さん、詳細なご報告ありがとうございます。

こちらの英語版フォーラムでの投稿と同じ内容かと思いますが、ご親切に日本語でもご連絡いただきご配慮に感謝します。英語版も日本語版も両方チェックしていますので、今後はどちらか片方だけで結構です。

https://wordpress.org/support/topic/when-typefile-is-set-in-contact-form-7-it-does-not-work-with-safari-ver-11-1/

本件は最新の Safari のバグに起因するものとみられ、現在対策も含めて調査中です。明確になり次第報告しますのでしばらくお待ちください。

https://stackoverflow.com/questions/49614091/safari-11-1-ajax-xhr-form-submission-fails-when-inputtype-file-is-empty
トピック投稿者 luvjapan
(@luvjapan)

6年前
Takayuki Miyoshi 様

ご回答ありがとうございます。

そして、まずはこの素晴らしいプラグインを開発していただき本当にありがとうございます。

情報をより多く集める為に英語版にも投稿しましたが、Goole翻訳を使用しており英語は苦手ですので

こちらで返信させていただきます。

ですが、英語版の方にも同じ状態の方からレスが付いておりますので

Miyoshi様から教えていただいた情報を掲載させていただきたいと思います。

回避方法としてMiyoshi様が添付してくださったStack OverflowのURLに回答されていましたコードを使用致しました。

以下のコードを追加しましたらSafari 11.1と
iPhoneのiOSバージョンは11.3にてファイル添付がない状態で送信ができましたのでご報告致します。
```
$("input[type=file]").each(function() {
    if($(this).val() === "") {
        $(this).remove();
    }
});
```
両サーバーにてとりあえずheader.phpにコードを記載しMac、Windows、iPad、iPhoneの各ブラウザにて確認致しました。

エックスサーバーの方のテストフォームにはコードを記載したままにしておきました。

本番環境では別ファイルにて上記コードを追加記入致しましたが確認画面を追加する様なプラグインとの衝突もなく作動しましたことをご報告致します。

Safariがバグを修正するまでしばらくこのコードで様子を見ていこうと思います。

非常に助かりました。有益な情報をありがとうございました。
tombotomtom
(@tombotomtom)

5年、 11ヶ月前

サポートフォーラムにはじめて書き込む初心者です。
同じ症状が出て悩んでいるところに該当と思える書き込みがあり、質問させてください。
WEBスキル的には一般人で、プログラムが理解出来ているわけでは無く、該当と思える文面やプログラムを参考にコピペしながら。CSSの知識がある程度です。

同じ症状を避けるべく、「エックスサーバーでのフォーム」にあるタグをそのまま書き込んでみたのですが、画像添付のボタンが消えてしまいました。
この画像添付のボタンを残したままこの問題を解決する方法はないでしょうか？

私のコンタクトフォームページは以下に示すページです。
https://www.tasogaretombo.com/contact

よろしくお願い致します。
トピック投稿者 luvjapan
(@luvjapan)

5年、 11ヶ月前
tombotomtom様

書き込みありがとうございます。

コードの方ですがテスト環境のheader.phpのコードのコメントアウトを解除するのを忘れていました。

すみません。
```
jQuery(function($) {
 $(".wpcf7 input[type='submit']").click(function() {
  $("input[type=file]").each(function() {
    if($(this).val() === "") {
        $(this).remove();
    }
  });
 });
});
```
上記のコードに書き換えてみてもらえませんか？

宜しくお願いします。
tombotomtom
(@tombotomtom)

5年、 11ヶ月前
luvjapan 様

ありがとうございます。
すぐにレスポンスいただけるとは思っていなかったのでうれしく思いました。

書き換えしてみました。動くようになりました！
ありがとうございます。

ひとつ、あれ？と思うことがありまして、たとえばフォームに何も書き込まず
送信を押してエラー出すと、添付ボタンが消えてしまいます。
リロードすれば現れるのですが、これは対策的に仕方の無い点となりますでしょうか？

よろしくお願い致します。
- この返信は5年、 11ヶ月前にtombotomtomが編集しました。
トピック投稿者 luvjapan
(@luvjapan)

5年、 11ヶ月前
tombotomtom様

プラグイン作成者のMiyoshi様の書き込み通り

“本件は最新の Safari のバグに起因するものとみられ、現在対策も含めて調査中です。明確になり次第報告しますのでしばらくお待ちください。”

との事ですので近い将来対策されるのではないでしょうか？

私の場合この方法は一時的な回避策として使用しております。

また、私の本番環境のフォームでは入力ページ → 確認ページ → 送信完了ページという感じでカスタマイズしておりまして添付ボタンが消えない様な仕様になっております。

私の場合は最後の送信完了ページに”入力画面に戻る”という様なボタンをjQueryにて追加しておりますので
```
location.reload(true);
```
などを使用してリロードボタンを設置してみてはいかがでしょうか？

またajaxを使用しないという手段もあるかと思います。

送信ボタンを押した時にformにsentというクラスが追加されるのでそれを利用してtombotomtomの様なフォームで
添付ボタンが消えない様にコードのカスタマイズを試みたのですが実力不足でうまくいきませんでした。

jQuery 要素削除復元などで調べるといろいろ出てくるかと思います。

私のクライアント様で確認ページが必要のない場合、tombotomtom様の様なケースが出てきますので

今後も調べていきますので方法がわかりましたらまた、書き込みます。

お手数ですが逆にtombotomtom様の方で何か解決しましたら報告いただければ助かります。

宜しくお願いいたします。
tombotomtom
(@tombotomtom)

5年、 11ヶ月前

luvjapan 様

確かに、確認画面を用いるというのも一つかもしれません。
（確認画面が無いというのも一つの流れのようで、挑戦しています。）

基本的には対策バージョンを待ちたいとかんがえています。
”添付ボタンが消えない様にコードのカスタマイズを試みたのですが実力不足でうまくいきませんでした。”
考えてみてくださり、ありがとうございます。感謝です。

リロードボタンの設置も出来るかどうか分かりませんが、勉強してみます。

何か解決策がありましたらこちらこそよろしくお願いします。
こちらでも探してみます。

boss1101
(@boss1101)

5年、 8ヶ月前

luvjapan様

同様の症状を抱えているboss1101と言います。

Wordpress、php、JQuery等初心者です。

safari11.1.2、iOSのブラウジング環境で添付ファイル無しの場合に矢印グルグルから抜け出せません。

このトピックに提示していただいているコードをテーマTwenty seventeenの子テーマにつくったheader.phpファイルに記述しても上手く回避できません。

コードは2つ提示していただいているものを一つずつ試してみました。

テスト環境
wp：4.9.8-ja
cf7:5.0.3

header.phpファイルへの書込み位置等、何か注意点があるのでしょうか？

お忙しいところ恐縮ですが、ご教授いただけると幸いです。

モデレーターのむらけい (Kei Nomura)
(@mypacecreator)

5年、 8ヶ月前

@boss1101 さま

フォーラムでは、すでに出ている同様の質問と似たような現象であっても、そのトピックに返信する形で追加質問するのではなく、新規で投稿していただき、関連するトピックへリンクを貼るようにしてください。

本来質問者であるluvjapanさんがトピックを解決済みにできなかったり、ほかのメンバーの方からの回答がつきにくかったり、当初のトピックと状況が異なるケースもあるためです。（また、設定によっては追加質問者さまの書き込みへの回答がすべて当初の質問者の方に通知が飛んでしまうこともあります。）

すでにtombotomtomさんの追加質問がありましたので書き込まれたのだと思いますが、遠慮なく新規で立ててもらって大丈夫です。
よろしくお願い申し上げます。

boss1101
(@boss1101)

5年、 8ヶ月前

のむらけい様
フォーラムの利用ルールが理解不足で、申し訳ございませんでした。
後日、改めて投稿させていただきます。
今後とも、よろしくお願いいたします。