質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

1711閲覧

WordPressプラグイン Contactform7について タグ打ちで自前のコードでも動いてくれるか

Asibe

総合スコア14

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2016/12/15 08:43

編集2016/12/15 09:15

#実現したいこと
現在WordPressでお問い合わせフォームの作成で人気のContactForm7で用意されているボタンを利用して生成するとソースコード内に生成前に設定したidやclassがspanタグで吐き出されてしまいます。

イメージ説明

※上記の画像はデフォルト状態の画面です。

この内部に自分で作成したフォームコードを直接流し込んでも動いてくれるのかわからずネット内をウロウロしていました。

###試したこと
初めに、自分で作成したフォームコード内にinputタグで利用する部分をcontactform7内にある"テキスト"や"メールアドレス"のボタンを利用しidやclassを入力し"タグ挿入"をしました。

※pタグやpreタグを入れてもそのままソースコードをみると生成されていました。

※下記のソースコードが予定しているフォームの完成形です。

HTMLコード

1 <section id="contact"> 2 <div id="contents cf"> 3 <div class="content_Title"> 4 <h1>基本情報</h1> 5 </div><!-- contents end --> 6 7 <div class="contents_in"> 8 <div class="mod-lead"> 9 <p>お客様の基本情報入力項目となります。必ずご記入ください。<br> 10 ※必ず個人様名でご登録をお願いいたします。お勤め先目でのご登録はご遠慮ください。 11 </p> 12 </div><!-- mod-lead end --> 13 </div><!--contents_in end --> 14 15<section class="cf"> 16 <form action="" method="post" name="contact_form"> 17 18 <div class="mod-dl-table"> 19 <h1>お問い合せ情報入力</h1> 20 <dl class="cf"> 21 <dt>お問合せ項目<span class="notes nRed">必須</span></dt> 22 <dd> 23 <select name="pamphlet_selector_value"> 24 <option value="">選択してください</option> 25 <option value="資料請求">資料請求</option> 26 <option value="お問い合せ">お問い合せ</option> 27 </select> 28 </dd> 29 </dl> 30 31 32 <dl class="cf"> 33 <dt>氏名(漢字)<span class="notes nRed">必須</span></dt> 34 <dd> 35 <input type="text" name="pamphlet_name" class="pamphlet_name w-long validate[required]" id="pamphlet_name" placeholder="例)静岡 太郎 姓と名の間にスペースを入れてください。" autofocus> 36 </dd> 37 </dl> 38 39 40 <dl class="cf"> 41 <dt>氏名(フリガナ)<span class="notes nRed">必須</span></dt> 42 <dd> 43 <input type="text" name="pamphlet_kana" class="pamphlet_kana w-long validate[required]" id="pamphlet_kana" placeholder="シズオカ タロウ 姓と名の間にスペースを入れてください。"> 44 </dd> 45 </dl> 46 47 <dl class="cf"> 48 <dt>電話番号(携帯可)<span class="notes nRed">任意</span></dt> 49 <dd> 50 <input type="text" name="pamphlet_tel1" class="pamphlet_tel w-short" id="pamphlet_tel1" placeholder="090" size="7"> &nbsp;-&nbsp; <input type="text" name="pamphlet_tel2" class="pamphlet_tel w-short" id="pamphlet_tel2" placeholder="1111" size="7"> &nbsp;-&nbsp; <input type="text" name="pamphlet_tel3" class="pamphlet_tel w-short" id="pamphlet_tel3" placeholder="2222" size="7"> 51 </dd> 52 </dl> 53 54 <dl class="cf"> 55 <dt>郵便番号<span class="notes nRed">必須</span></dt> 56 <dd> 57 <input type="text" name="pamphlet_address" class="pamphlet_address w-long" id="pamphlet_address" placeholder="例)1112222 ハイフン不要" onKeyUp="AjaxZip3.zip2addr(this,'','pamphlet_address1','pamphlet_address2');"> 58 59 <input type="text" name="pamphlet_address1" class="pamphlet_address w-long" id="pamphlet_address"> 60 61 <input type="text" name="pamphlet_address2" class="pamphlet_address w-long" id="pamphlet_address" placeholder="例)○○○ビル000"> 62 </dd> 63 </dl> 64 65 <dl class="cf"> 66 <dt>ご住所<span class="notes nRed">必須</span></dt> 67 <dd> 68 <input type="text" name="address" class="pamphlet_address w-long" id="input_Address" placeholder="郵便番号を入力すると住所が自動的に入力されます。"> 69 </dd> 70 </dl> 71 72 <dl class="cf"> 73 <dt>E-mail<span class="notes nRed">必須</span></dt> 74 <dd> 75 <input type="email" name="pamphlet_email" class="pamphlet_email w-long validate[custom[email]]" id="pamphlet_Email" placeholder="@example.co.jp"> 76 <p class="onemore">確認のため、コピーせず再度入力してください。</p> 77 <input type="email" name="pamphlet_email" class="pamphlet_email w-long validate[custom[email]]" id="pamphlet_Email" placeholder="@example.co.jp"> 78 </dd> 79 </dl> 80 81 <dl class="cf"> 82 <dt>お問い合わせ内容<span class="notes nGray">任意</span></dt> 83 <dd> 84 <textarea rows="10" cols="30" name="pamphlet_contact" class="pamphlet_contact w-long" id="pamphlet_contact" placeholder="ご質問内容をお書きください"></textarea> 85 </dd> 86 </dl> 87 </div><!-- mod-dl-table end --> 88</section> 89 <section class="Agreement cf"> 90 <h3>個人情報保護方針</h3> 91 <div class="mod-scroll-box w-long"> 92<pre> 93制定日 : 平成28年01月01日 94改定日 : 平成28年01月01日 95会社名 96代表取締役名 97 981.個人情報の取得、利用及び提供について 99 当社で取り扱う個人情報及び従業員の個人情報について、適切な取得、利用及び提供を行い、特定した利用目的の達成に必要な範囲を超えて個人情報を取り扱うことはありません、利用目的を超えて個人情報を取り扱いを行う場合には、予めご本人の同意を得ます。 100 1012.個人情報に関する法令や指針、規範について 102 103個人情報に関する法令・国が定める指針その他の規範を守ります。 104 1053.個人情報の安全管理について 106 107個人情報への不正アクセスや、個人情報の漏洩、紛失、破壊、改ざんに対して、合理的な防止並びに処置を行います。 108 1094.個人情報に関する苦情および相談について 110 111個人情報に関する苦情および相談には、速やかに対処します。 112 1135.個人情報保護の取り組み 114 115個人情報の保護を適切に行うため、継続的にその取り組みを見直し、改善します。 116 117個人情報保護方針に関するお問い合わせ先 118 119会社名 120・個人情報保護責任者 121・TEL:000-111-2222 122・FAX:000-111-2222 123・Eメール:example.co.jp 124 1256.開示請求のお手続きについて 126 127 (1)開示等の請求の受付 128 開示等の請求に関しては、メール又は直接来訪ください。 129 130 (2)本人確認方法 131 ・お電話:氏名・電話番号・メールアドレス 132 ・ご来訪:免許書・その他パスポートなど 133 134 (4)手数料 135 無料。 136 1377.お問合せ先・苦情の申出先 138 139会社名 140 ・顧客相談窓口責任者 141 ・Eメール : example.co.jp 142 143</pre> 144</div> 145 146<div class="mod-center"> 147 <input type="checkbox" name="check_agreement" id="check_agreement"><label for="check_agreement">上記の内容を確認し、同意します</label> 148</div> 149 150<div class="mod-center"> 151 <input class="mod-btn" name="confirm" value="内容の確認へ" type="submit"> 152</div> 153</section>

CSSソース

1@charset "utf-8"; 2 3body{ 4 color: #333; 5 font-size: 14px; 6 line-height: 1.5; 7 letter-spacing: 0.2em; 8} 9 10.cf::before, 11.cf::after{ 12 content:""; 13 display: table; 14} 15 16.cf::after{ 17 clear: both; 18} 19 20.cf{ 21 zoom: 1; 22} 23 24section#contact{ 25 position: relative; 26 width: 100%; 27 max-width: 1200px; 28 min-height: 550px; 29 height: auto; 30} 31 32#contents{ 33 overflow: hidden; 34 margin: 0 auto; 35 zoom: 1; 36 max-width: 1000px; 37} 38 39#contents > .content_Title{ 40 position: relative; 41} 42 43#contents > .content_Title > h1{ 44 padding: 10px; 45 letter-spacing: 0.2em; 46} 47 48.mod-lead{ 49 margin-bottom: 25px; 50 padding: 10px; 51 line-height: 1.5; 52 letter-spacing: 0.2em; 53 font-size: 14px; 54 font-size:115%; 55 font-weight: 300; 56} 57 58.mod-dl-table h1{ 59 padding-left: 5%; 60 border-left: 6px solid #00a0e9; 61} 62 63.mod-dl-table dl{ 64 margin-bottom: 25px; 65 border-bottom: 1px dotted #333; 66} 67 68.mod-dl-table dl dt{ 69 padding-top: 15px; 70 padding-bottom: 15px; 71 font-weight: 700; 72} 73 74.mod-dl-table dl dd{ 75 margin-left: auto; 76 margin-right: auto; 77 padding-top: 20px; 78 padding-bottom: 25px; 79 width: 100%; 80 text-align: center; 81} 82 83span.notes{ 84 margin-left: 25px; 85 padding: 2px 6px; 86 background-color:#00a0e9; 87 color: #fff; 88 font-size: 72%; 89 letter-spacing: 0.2em; 90} 91 92span.nGray{ 93 color:#333; 94 background-color:#eee; 95} 96 97.w-long{ 98 width:100%; 99} 100 101.w-short{ 102 margin: 0 auto; 103 width: 20%; 104 text-align: center; 105} 106 107.pamphlet_name, 108.pamphlet_kana, 109.pamphlet_tel, 110.pamphlet_address, 111.pamphlet_email, 112.pamphlet_contact, 113textarea{ 114 vertical-align: middle; 115 padding: 7px; 116 -moz-box-sizing: border-box; 117 box-sizing: border-box; 118 border:1px solid #cfcfcf; 119 border-radius: 5px; 120} 121 122.onemore{ 123 padding: 10px; 124 font-size: 15%; 125} 126 127input, 128textarea{ 129 font-size: 100%; 130 outline: none; 131} 132 133select:focus, 134input:focus, 135textarea:focus{ 136 background-color:#ccffcc; 137} 138 139::-webkit-input-placeholder { 140 font-size: 20%; 141 padding-left: 5px; 142 letter-spacing: 0.2em; 143} 144 145::-moz-placeholder { 146 font-size: 20%; 147 padding-left: 5px; 148 letter-spacing: 0.2em; 149} 150 151:-ms-input-placeholder { 152 font-size: 20%; 153 padding-left: 5px; 154 letter-spacing: 0.2em; 155} 156 157section.Agreement{ 158 position: relative; 159 width: 100%; 160} 161 162section.Agreement > h3{ 163 margin-bottom: 25px; 164 padding: 15px; 165 font-size: 129%; 166 font-weight: 700; 167 text-align: center; 168 border-bottom: 3px solid #00a0e9; 169} 170 171.mod-scroll-box{ 172 overflow-y: scroll; 173 overflow-x: hidden; 174 margin-bottom: 50px; 175 padding: 15px; 176 border: 1px solid #cfcfcf; 177 height: 140px; 178} 179 180pre{ 181 font-size: 100%; 182 white-space: pre-wrap; 183 word-wrap: break-word; 184} 185 186.mod-center{ 187 margin-bottom: 25px; 188 padding: 10px; 189 text-align: center; 190} 191 192input.mod-btn, 193input.mod-btn-mini{ 194 display: inline-block; 195 padding: 25px 45px; 196 border: none; 197 border-radius: 5px; 198 background-color: #00a0e9; 199 color: #fff; 200 font-size: 95%; 201 letter-spacing: 0.2em; 202 white-space: nowrap; 203} 204 205@media only screen and (min-width:768px){ 206 .mod-dl-table dl{ 207 display: table; 208 margin: 0 auto; 209 width: 95%; 210 border-bottom: none; 211 } 212 213 .mod-dl-table dl dt{ 214 display: table-cell; 215 padding-top: 22px; 216 padding-left: 10px; 217 width: 30%; 218 vertical-align: middle; 219 } 220 221 .mod-dl-table dl dd{ 222 width: 100%; 223 } 224}

##補足情報
補足というか個人的な疑問なのですが、上記画像内のタグ入力欄で入力されたコードをそのまま保存しショートコードとして出しているだけなので、普通に自分で作成したフォームコードでも問題ないのかどうか疑問に思っています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/12/15 08:53

Contact Form7の使い方としては、質問者様が貼られた画像の「フォーム」欄を設定し、「保存」ボタンを押下、その後、画面上部のショートコードをコピーして、投稿や固定ページの編集画面に貼り付ける――という手順だと思いますが、そのようにしても作成したコンタクトフォームが表示されないということですか?
Asibe

2016/12/15 09:19

不足していたHTMLとCSSコードを追加し更新しておきました。
退会済みユーザー

退会済みユーザー

2016/12/15 09:35

何を質問されたいのかがわからないのですが、「'完成形'のコードをそのままContact Form7のフォーム欄に入力して問題はないか、動くか?」ということですか? そうであると仮定するならば、私の回答は「動かないと思います」となります。
Asibe

2016/12/15 09:41

はい、動くか動かないかです。先ほど試してみましたがソースコードとして生成はされていますが、動きませんでした
Asibe

2016/12/15 09:43

「送信されました」と表示されますが、実際に設定した自身のメールアドレスで確認してもメールとして来ていませんね。
退会済みユーザー

退会済みユーザー

2016/12/15 09:43

実際に試してみられて、動かなかったのであれば、答えは「動かない」ということなのでは?
Asibe

2016/12/15 10:09

退席していました。 たしかに動かないが答えですね。
Asibe

2016/12/15 10:10

Contactrom7の基本的な動きを理解していないので、もう少しいろいろなサイト様の例をよく見ながら試してみることにします。
退会済みユーザー

退会済みユーザー

2016/12/15 14:59

提示されたコードにformの閉じタグがないように見えます。ご確認ください。
guest

回答1

0

ベストアンサー

当方の環境で、</form>を追加して、Contact Form 7からの送信を試してみたところ、メールを受信できることが確認できました。試してみてはいかがでしょうか。

HTML

1<section id="contact"> 2 <div id="contents cf"> 3 <div class="content_Title"> 4 <h1>基本情報</h1> 5 </div><!-- contents end --> 6 7 <div class="contents_in"> 8 <div class="mod-lead"> 9 <p>お客様の基本情報入力項目となります。必ずご記入ください。<br> 10 ※必ず個人様名でご登録をお願いいたします。お勤め先目でのご登録はご遠慮ください。 11 </p> 12 </div><!-- mod-lead end --> 13 </div><!--contents_in end --> 14 15<section class="cf"> 16 <form action="" method="post" name="contact_form"> 17 18 <div class="mod-dl-table"> 19 <h1>お問い合せ情報入力</h1> 20 <dl class="cf"> 21 <dt>お問合せ項目<span class="notes nRed">必須</span></dt> 22 <dd> 23 <select name="pamphlet_selector_value"> 24 <option value="">選択してください</option> 25 <option value="資料請求">資料請求</option> 26 <option value="お問い合せ">お問い合せ</option> 27 </select> 28 </dd> 29 </dl> 30 31 32 <dl class="cf"> 33 <dt>氏名(漢字)<span class="notes nRed">必須</span></dt> 34 <dd> 35 <input type="text" name="pamphlet_name" class="pamphlet_name w-long validate[required]" id="pamphlet_name" placeholder="例)静岡 太郎 姓と名の間にスペースを入れてください。" autofocus> 36 </dd> 37 </dl> 38 39 40 <dl class="cf"> 41 <dt>氏名(フリガナ)<span class="notes nRed">必須</span></dt> 42 <dd> 43 <input type="text" name="pamphlet_kana" class="pamphlet_kana w-long validate[required]" id="pamphlet_kana" placeholder="シズオカ タロウ 姓と名の間にスペースを入れてください。"> 44 </dd> 45 </dl> 46 47 <dl class="cf"> 48 <dt>電話番号(携帯可)<span class="notes nRed">任意</span></dt> 49 <dd> 50 <input type="text" name="pamphlet_tel1" class="pamphlet_tel w-short" id="pamphlet_tel1" placeholder="090" size="7"> &nbsp;-&nbsp; <input type="text" name="pamphlet_tel2" class="pamphlet_tel w-short" id="pamphlet_tel2" placeholder="1111" size="7"> &nbsp;-&nbsp; <input type="text" name="pamphlet_tel3" class="pamphlet_tel w-short" id="pamphlet_tel3" placeholder="2222" size="7"> 51 </dd> 52 </dl> 53 54 <dl class="cf"> 55 <dt>郵便番号<span class="notes nRed">必須</span></dt> 56 <dd> 57 <input type="text" name="pamphlet_address" class="pamphlet_address w-long" id="pamphlet_address" placeholder="例)1112222 ハイフン不要" onKeyUp="AjaxZip3.zip2addr(this,'','pamphlet_address1','pamphlet_address2');"> 58 59 <input type="text" name="pamphlet_address1" class="pamphlet_address w-long" id="pamphlet_address"> 60 61 <input type="text" name="pamphlet_address2" class="pamphlet_address w-long" id="pamphlet_address" placeholder="例)○○○ビル000"> 62 </dd> 63 </dl> 64 65 <dl class="cf"> 66 <dt>ご住所<span class="notes nRed">必須</span></dt> 67 <dd> 68 <input type="text" name="address" class="pamphlet_address w-long" id="input_Address" placeholder="郵便番号を入力すると住所が自動的に入力されます。"> 69 </dd> 70 </dl> 71 72 <dl class="cf"> 73 <dt>E-mail<span class="notes nRed">必須</span></dt> 74 <dd> 75 <input type="email" name="pamphlet_email" class="pamphlet_email w-long validate[custom[email]]" id="pamphlet_Email" placeholder="@example.co.jp"> 76 <p class="onemore">確認のため、コピーせず再度入力してください。</p> 77 <input type="email" name="pamphlet_email" class="pamphlet_email w-long validate[custom[email]]" id="pamphlet_Email" placeholder="@example.co.jp"> 78 </dd> 79 </dl> 80 81 <dl class="cf"> 82 <dt>お問い合わせ内容<span class="notes nGray">任意</span></dt> 83 <dd> 84 <textarea rows="10" cols="30" name="pamphlet_contact" class="pamphlet_contact w-long" id="pamphlet_contact" placeholder="ご質問内容をお書きください"></textarea> 85 </dd> 86 </dl> 87 </div><!-- mod-dl-table end --> 88</section> 89 <section class="Agreement cf"> 90 <h3>個人情報保護方針</h3> 91 <div class="mod-scroll-box w-long"> 92<pre> 93制定日 : 平成28年01月01日 94改定日 : 平成28年01月01日 95会社名 96代表取締役名 97 981.個人情報の取得、利用及び提供について 99 当社で取り扱う個人情報及び従業員の個人情報について、適切な取得、利用及び提供を行い、特定した利用目的の達成に必要な範囲を超えて個人情報を取り扱うことはありません、利用目的を超えて個人情報を取り扱いを行う場合には、予めご本人の同意を得ます。 100 1012.個人情報に関する法令や指針、規範について 102 103個人情報に関する法令・国が定める指針その他の規範を守ります。 104 1053.個人情報の安全管理について 106 107個人情報への不正アクセスや、個人情報の漏洩、紛失、破壊、改ざんに対して、合理的な防止並びに処置を行います。 108 1094.個人情報に関する苦情および相談について 110 111個人情報に関する苦情および相談には、速やかに対処します。 112 1135.個人情報保護の取り組み 114 115個人情報の保護を適切に行うため、継続的にその取り組みを見直し、改善します。 116 117個人情報保護方針に関するお問い合わせ先 118 119会社名 120・個人情報保護責任者 121・TEL:000-111-2222 122・FAX:000-111-2222 123・Eメール:example.co.jp 124 1256.開示請求のお手続きについて 126 127 (1)開示等の請求の受付 128 開示等の請求に関しては、メール又は直接来訪ください。 129 130 (2)本人確認方法 131 ・お電話:氏名・電話番号・メールアドレス 132 ・ご来訪:免許書・その他パスポートなど 133 134 (4)手数料 135 無料。 136 1377.お問合せ先・苦情の申出先 138 139会社名 140 ・顧客相談窓口責任者 141 ・Eメール : example.co.jp 142 143</pre> 144</div> 145 146<div class="mod-center"> 147 <input type="checkbox" name="check_agreement" id="check_agreement"><label for="check_agreement">上記の内容を確認し、同意します</label> 148</div> 149 150<div class="mod-center"> 151 <input class="mod-btn" name="confirm" value="内容の確認へ" type="submit"> 152</div> 153</form> //←ここを追加 154</section>

投稿2016/12/17 12:05

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Asibe

2016/12/17 13:35

miz様ご回答いただきありがとうございます。 上記のHTMLコードをコピーし試しに送信してみましたが・・・実は当方はxamppのローカルサーバーの状態でテストをしておりまして、gmail宛ての二重認証などをOFFにしたりWP-Mail-SMTPプラグインを利用しテストメールを送信しましても、 "https://teratail.com/questions/37231"様の質問と同様のエラーで弾かれます・・・ やはりxamppではなくちゃんとしたメールサーバーで行わないと無理なんでしょうか? まだ契約などを行ったりしていなく疑似的にxamppで稼働させているのが原因なのかと
退会済みユーザー

退会済みユーザー

2016/12/17 14:03

当方もXAMPPのローカル環境を使っています。 XAMPPのローカル環境でメールを送信するためには、sendmailの設定が必要だったかと。 だいぶ前に設定したので記憶がさだかでないのですが、こちらのページを参考にして、XAMPPの設定をおこなったような覚えがあります。 https://techacademy.jp/magazine/4129
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問