サポート » プラグイン » contact form 7 multi-step formsでファイル添付ができない。

  • muro

    (@muromuro)


    contact form 7を使ったメールフォームを作成しているのですが、標準では確認画面と完了画面が使えないので、contact form 7 multi-step formsというプラグインも合わせてインストールしました。
    確認画面や完了画面、メールの送信やファイル添付以外の入力項目の反映はうまくいくのですが、ファイル添付だけが正常に行えなくて困っています。

    入力画面でファイル添付を行ったあと、multiformタグで確認画面で内容を表示させるとランダムな英数字の羅列に化けており、そして完了画面まで進んでメールを送信させると、何もファイルが添付されていないメールが届いてしまいます。
    また、確認画面から入力画面に戻ると、ファイル添付がリセットされてしまいます。
    multi-step formsをインストールさせた状態であっても、確認画面と完了画面のない1画面だけの、いつもどおりのフォームを作った場合は、問題なくファイル添付が可能でした。

    multi-step formsを使ってファイル添付をさせるには、どうしたらいいのでしょうか?
    あるいは、multi-step formsはファイル添付には対応していないのでしょうか?

    ↓各バージョン
    Wordpress: 5.7.3
    Contact Form 7: 5.4.2
    Contact Form 7 Multi-Step Forms: 4.1.7

    ↓入力画面

    
    <div id="prform">
    	<section>
    		<h3>企業・担当者情報</h3>
    		<table>
    			<tr>
    				<th>
    					会社・団体名・店名
    
    					<div class="badge">
    						<p class="required">必須
    
    					</div>
    				</th>
    				<td>
    					
    						[text* company-name]
    					
    
    				</td>
    			</tr>
    			<tr>
    				<th>
    					担当者氏名
    
    					<div class="badge">
    						<p class="required">必須
    
    						<p class="private">非公開
    
    					</div>
    				</th>
    				<td>
    					
    						[text* your-name]
    					
    
    				</td>
    			</tr>
    			<tr>
    				<th>
    					メールアドレス
    
    					<div class="badge">
    						<p class="required">必須
    
    						<p class="private">非公開
    
    					</div>
    				</th>
    				<td>
    					
    						[text* your-email]
    					
    
    				</td>
    			</tr>
    			<tr>
    				<th>
    					サイトURL
    
    					<div class="badge">
    						<p class="required">必須
    
    					</div>
    				</th>
    				<td>
    					
    						[url* your-url]
    					
    
    				</td>
    			</tr>
    		</table>
    	</section>
    	<section>
    		<h3>プレスリリース情報(公開内容)</h3>
    		<table>
    			<tr>
    				<th>
    					記事タイトル<br>(50字以内)
    
    					<div class="badge">
    						<p class="required">必須
    
    					</div>
    				</th>
    				<td>
    					
    						[text* post-title maxlength:50]
    					
    
    				</td>
    			</tr>
    			<tr>
    				<th>
    					リリース本文<br>(3000文字以内)
    
    					<div class="badge">
    						<p class="required">必須
    
    					</div>
    				</th>
    				<td>
    					
    						[textarea* post-content maxlength:3000]
    					
    
    				</td>
    			</tr>
    			<tr>
    				<th>
    					画像
    
    				</th>
    				<td>
    					
    						[file file-1 filetypes:jpg|png]
    					
    
    					
    						[file file-2 filetypes:jpg|png]
    					
    
    					
    						[file file-3 filetypes:jpg|png]
    					
    
    					
    						[file file-4 filetypes:jpg|png]
    					
    
    					
    						[file file-5 filetypes:jpg|png]
    					
    
    				</td>
    			</tr>
    
    		</table>
    	</section>
    	[submit "入力内容を確認する"]
    	[multistep multistep-607 first_step "https://xxxxx.com/prform/confirm"]
    </div>
    
    <div id="prform">
    	<section>
    		<h3>企業・担当者情報</h3>
    		<table>
    			<tr>
    				<th>
    					会社・団体名・店名
    
    					<div class="badge">
    						<p class="required">必須
    
    					</div>
    				</th>
    				<td>
    					
    						[multiform company-name]
    					
    
    				</td>
    			</tr>
    			<tr>
    				<th>
    					担当者氏名
    
    					<div class="badge">
    						<p class="required">必須
    
    						<p class="private">非公開
    
    					</div>
    				</th>
    				<td>
    					
    						[multiform your-name]
    					
    
    				</td>
    			</tr>
    			<tr>
    				<th>
    					メールアドレス
    
    					<div class="badge">
    						<p class="required">必須
    
    						<p class="private">非公開
    
    					</div>
    				</th>
    				<td>
    					
    						[multiform your-email]
    					
    
    				</td>
    			</tr>
    			<tr>
    				<th>
    					サイトURL
    
    					<div class="badge">
    						<p class="required">必須
    
    					</div>
    				</th>
    				<td>
    					
    						[multiform your-url]
    					
    
    				</td>
    			</tr>
    		</table>
    	</section>
    	<section>
    		<h3>プレスリリース情報(公開内容)</h3>
    		<table>
    			<tr>
    				<th>
    					記事タイトル<br>(50字以内)
    
    					<div class="badge">
    						<p class="required">必須
    
    					</div>
    				</th>
    				<td>
    					
    						[multiform post-title maxlength:50]
    					
    
    				</td>
    			</tr>
    			<tr>
    				<th>
    					リリース本文<br>(3000文字以内)
    
    					<div class="badge">
    						<p class="required">必須
    
    					</div>
    				</th>
    				<td>
    					
    						[multiform post-content maxlength:3000]
    					
    
    				</td>
    			</tr>
    			<tr>
    				<th>
    					画像
    
    				</th>
    				<td>
    					
    						[multiform file-1 filetypes:jpg|png]
    					
    
    					
    						[multiform file-2 filetypes:jpg|png]
    					
    
    					
    						[multiform file-3 filetypes:jpg|png]
    					
    
    					
    						[multiform file-4 filetypes:jpg|png]
    					
    
    					
    						[multiform file-5 filetypes:jpg|png]
    					
    
    				</td>
    			</tr>
    
    		</table>
    	</section>
    	[previous "戻る"][submit "送信"]
    	[multistep multistep-608 send_email "https://xxxxx.com/prform/complete"]
    </div>
    
1件の返信を表示中 - 1 - 1件目 (全1件中)
  • Contact Form 7 Multi-Step FormsのPRO Version説明を見ると

    In total it can handle about 5MB vs 4KB in the free version.

    とあるので、ファイルの容量オーバーなのではないでしょうか。

    ざっと調べてみたところ Drag and Drop Multiple File Upload – Contact Form 7 というD&Dおよび複数ファイルアップロードに対応したプラグインと組み合わせて使用している人もいるようです。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「contact form 7 multi-step formsでファイル添付ができない。」には新たに返信することはできません。