Bootstrap模式中的WordPress自定义联系表单未显示验证和提交响应
问题描述：
For my WordPress I am using Bootstrap and built a Custom Contact form with below HTML (followed this tutorial: https://premium.wpmudev.org/blog/how-to-build-your-own-wordpress-contact-form-and-why/).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<form id=\"contact-form\" action=\"<?php echo get_site_url(); ?>\" method=\"post\"> <div class=\"modal-body\"> <?php echo $response; ?> <div class=\"form-group\"> <input class=\"form-control my-2\" type=\"text\" name=\"message_name\" size=\"50\" placeholder=\"Your full name\" value=\"<?php echo esc_attr($_POST[\'message_name\']); ?>\"> <input class=\"form-control my-2\" type=\"email\" name=\"message_email\" size=\"50\" placeholder=\"Email address\" value=\"<?php echo esc_attr($_POST[\'message_email\']); ?>\"> <input class=\"form-control my-2\" type=\"tel\" name=\"message_tel\" size=\"50\" placeholder=\"Country code, Phone number\" value=\"<?php echo esc_attr($_POST[\'message_tel\']); ?>\"> <textarea class=\"form-control my-2\" name=\"message_text\" rows=\"2\" placeholder=\"Your message\" value=\"<?php echo esc_attr($_POST[\'message_text\']); ?>\"></textarea> <input class=\"form-control my-2\" type=\"text\" name=\"message_human\" placeholder=\"Human check: Enter 2\"> <input type=\"hidden\" name=\"message_url\" value=\"<?php the_permalink(); ?>\"> <input type=\"hidden\" name=\"message_page\" value=\"<?php the_title(); ?>\"> </div> </div> <div class=\"modal-footer\"> <input type=\"hidden\" name=\"submitted\" value=\"1\"> <button type=\"submit\" value=\"Submit\" class=\"btn btn-search form-control\">Send Enquiry</button> </div> |
Below the function to validate the Forms & show responses while Form submission:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
//response generation function $response = \"\"; //function to generate response function contact_g_form_response($type, $message) { global $response; if ($type == \"success\") { $response = \"<div class=\'message-success text-center\'>{$message}</div>\"; } else { $response = \"<div class=\'message-error text-center\'>{$message}</div>\"; } } //response messages $not_human = \"Enter current year in numbers.\"; $missing_content = \"Missing something.\"; $email_invalid = \"Check your Email address.\"; $message_unsent = \"Message was not sent. Try Again.\"; $message_sent = \"Thanks! We got your enquiry.\"; //user posted variables $name = $_POST[\'message_name\']; $email = $_POST[\'message_email\']; $fromEmail = $name . \'<\' . $email . \'>\'; $tel = $_POST[\'message_tel\']; $text = $_POST[\'message_text\']; $url = $_POST[\'message_url\']; $page = $_POST[\'message_page\']; $human = $_POST[\'message_human\']; //php mailer variables $to = get_option(\'admin_email\'); $subject = \'[General Enquiry] \' . $name . \' | Phone Number:\' . $tel; $headers = \'From: \' . $fromEmail . \" \" . \'Reply-To: \' . $email . \" \"; $message = \'<html><body><h1>New general enquiry from \' . $name . \'!</h1>\' . \'<p>Email: \' . $email . \'</p>\' . \'<p>Phone Number: \' . $tel . \'</P>\' . \'<p>Inquiry: \' . $text . \'</P>\' . \'<p>From page: <b>\' . $page . \'</b></P>\' . \'<p>Page URL: \' . $url . \'</p>\' . \'</body></html>\'; if (!$human == 0) { if ($human != 2) { contact_g_form_response(\"error\", $not_human); //not human! } else { //validate email if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { contact_g_form_response(\"error\", $email_invalid); } else { //email is valid //validate presence of name, phone number if (empty($name) || empty($tel)) { contact_g_form_response(\"error\", $missing_content); } else { //ready to go! $sent = wp_mail($to, $subject, $message, implode(\" \", $headers)); //mail to admin - striptags removing formatting // $sent2 = wp_mail($email, $subject, $body, $headers); //mail to visitor // if ($sent || $sent2) { if ($sent) { contact_g_form_response(\"success\", $message_sent); //message sent! } else { contact_g_form_response(\"error\", $message_unsent); //message wasn\'t sent } } } } } else if ($_POST[\'submitted\']) { contact_g_form_response(\"error\", $missing_content); } |
Although the Form is being successfully submitted, no response / validation messages are shown as per contact_g_form_responsefunction and after the Form submission, it is being redirected to a random WordPress post.
网友观点：
You Just Need To replace this:
|
1 2 |
<form id=\\\"contact-form\\\" action=\\\"<?php echo get_site_url();?>\\\" method=\\\"post\\\"> |
With This:
|
1 2 |
<form id=\\\"contact-form\\\" method=\\\"post\\\"> |
Because You are displaying the error on the same page but on click of the submit button the action is taking you to a specific url and that\'s the reason the validations are not shown.
And This:
|
1 2 3 4 5 6 |
if ($type == \\\"success\\\") { $response = \\\"<div class=\'message-success text-center\'>{$message}</div>\\\"; } else { $response = \\\"<div class=\'message-error text-center\'>{$message}</div>\\\"; } |
With This also:
|
1 2 3 4 5 6 7 8 |
if ($type == \\\"success\\\") { $response = $message; echo $response; } else { $response = $message; echo $response; } |
由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » Bootstrap模式中的WordPress自定义联系表单未显示验证和提交响应
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » Bootstrap模式中的WordPress自定义联系表单未显示验证和提交响应
