فواصل

نموذج اتصل بنا ورد بريس

الكثير منا عند تصميم قالب وردبريس يضطر لإستخدام اضافات خاصة لإنشاء نموذج اتصل بنا , وفى هذا الدرس سنتعلم كيف ننشئ نموذج اتصل بنا مدمج مع قالب وردبريس الذي نقوم بتصميمه

سنعمل على قالب twentyten الافتراضي وبداية نقوم بنسخ page.php الى ملف جديد ونعيد تسميته الى page-contact.php

نقوم بعد ذلك باضافة الكود التالي الى بداية الملف الذي أنشأناه

[html] print?
1.<!–?php <br ?–> 2./*
3.Template Name: Contact
4.*/
5.?&gt;
[/html]

يفترض أن يكون شكل الملف كما يلي

[html]

print?
01.<!–?php <br ?–> 02./*
03.Template Name: Contact
04.*/
05.?&gt;
06.<!–?php get_header(); ?–>
07.
<div id="container">08.
<div id="content">09.<!–?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?–>
10.
<div id="post-<?php the_ID(); ?>">&gt;
11. <!–?php if ( is_front_page() ) { ?–>
12.
<h2></h2>
13. <!–?php } else { ?–>
14.
<h1></h1>
15. <!–?php } ?–>
16.
<div>17. <!–?php the_content(); ?–>
18. <!–?php wp_link_pages( array( ‘before’ =–>’
<div>’ . __( ‘Pages:’, ‘twentyten’ ), ‘after’ =&gt; ‘</div>
‘ ) ); ?&gt;
19. <!–?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span–>’, ” ); ?&gt;
20.

</div>
<!– .entry-content –>

</div>
<!– #post-## –>
<!–?php comments_template( ”, true ); ?–>
<!–?php endwhile; ?–>

</div>
<!– #content –>

</div>
<!– #container –>
<!–?php get_sidebar(); ?–>
<!–?php get_footer(); ?–>
[/html]

المرحلة التالية سنقوم بانشاء نموذج الاتصال

ولعمل ذلك قم بلصق الكود التالي بداخل div الـ entry-content

[html]

<form id="contactForm" action="<?php the_permalink(); ?>" method="post">

<ul>
<ul>.
<li>04. <label for="contactName">الاسم</label>
<input id="contactName" type="text" name="contactName" value="" /> .</li>
</ul>
</ul>
<ul>
<li>08. <label for="email">البريد الالكتروني</label>
.
<input id="email" type="text" name="email" value="" /> 10.</li>
</ul>
&nbsp;

<ul>
<li>12. <label for="commentsText">الرسالة</label>
. <textarea id="commentsText" name="comments" rows="5" cols="80"></textarea>
.</li>
</ul>
&nbsp;

<ul>
<li>16. <button type="submit">ارسال</button>
.</li>
</ul>
&nbsp;

<input id="submitted" type="hidden" name="submitted" value="true" /> .

</form>
[/html]

المرحلة التالية هى معالجة البيانات ورسائل الخطأ

قم بنسخ الكود التالي ما بين كود الاعلام بالقالب الذي أنشأناه بأول خطوة وبين كود

[html] .<!–?php <br ?–> 02.if(isset($_POST['submitted'])) {
. if(trim($_POST['contactName']) === ”) {
. $nameError = ‘من فضلك قم بادخال اسمك’;
. $hasError = true;
. } else {
. $name = trim($_POST['contactName']);
. }
.} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
.if(trim($_POST['comments']) === ”) {
. $commentError = ‘من فضلك قم بادخال رسالتك’;
. $hasError = true;
. } else {
. if(function_exists(‘stripslashes’)) {
. $comments = stripslashes(trim($_POST['comments']));
. } else {
. $comments = trim($_POST['comments']);
. }
. }
.if(!isset($hasError)) {
. $emailTo = get_option(‘tz_email’);
. if (!isset($emailTo) || ($emailTo == ”) ){
. $emailTo = get_option(‘admin_email’);
. }
. $subject = ‘[PHP Snippets] From ‘.$name;
. $body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
. $headers = ‘From: ‘.$name.’ ‘ . "\r\n" . ‘Reply-To: ‘ . $email;
.mail($emailTo, $subject, $body, $headers);
. $emailSent = true;
. }
.} ?&gt;
[html] الكود السابق لإضافة التحقق من كل حقل وانه قد تم ادخاله بصورة سليمة

الان نقوم باظهار الاخطاء بالصفحة ولعمل ذلك قم بنسخ الصفحة التالية كما هي

[html] .<!–?php <br ?–> 02./*
.Template Name: Contact
.*/
.?&gt;
.<!–?php <br ?–> 07.if(isset($_POST['submitted'])) {
. if(trim($_POST['contactName']) === ”) {
. $nameError = ‘من فضلك قم بادخال اسمك’;
. $hasError = true;
. } else {
. $name = trim($_POST['contactName']);
. }
.} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
.if(trim($_POST['comments']) === ”) {
. $commentError = ‘من فضلك قم بادخال رسالتك’;
. $hasError = true;
. } else {
. if(function_exists(‘stripslashes’)) {
. $comments = stripslashes(trim($_POST['comments']));
. } else {
. $comments = trim($_POST['comments']);
. }
. }
.if(!isset($hasError)) {
. $emailTo = get_option(‘tz_email’);
. if (!isset($emailTo) || ($emailTo == ”) ){
. $emailTo = get_option(‘admin_email’);
. }
. $subject = ‘[PHP Snippets] From ‘.$name;
. $body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
. $headers = ‘From: ‘.$name.’ ‘ . "\r\n" . ‘Reply-To: ‘ . $email;
.mail($emailTo, $subject, $body, $headers);
. $emailSent = true;
. }
.} ?&gt;
.<!–?php get_header(); ?–>
.
<div id="container">.
<div id="content">40.<!–?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?–>
.
<div id="post-<?php the_ID(); ?>">&gt;
. <!–?php if ( is_front_page() ) { ?–>
.
<h2></h2>
. <!–?php } else { ?–>
.
<h1></h1>
. <!–?php } ?–>
.
<div>48.<!–?php if(isset($emailSent) &#038;& $emailSent == true) { ?–>
.
<div>.شكرا لك , رسالتك تم ارسالها بنجاح
<blockquote>51.</blockquote>
</div>
. <!–?php } else { ?–>
. <!–?php the_content(); ?–>
. <!–?php if(isset($hasError) || isset($captchaError)) { ?–>
.
<p>عفوا , خطأ ما قد حدث</p>
. <!–?php } ?–>
.

<form id="contactForm" action="<?php the_permalink(); ?>" method="post">
.
<ul>
<ul>.
<li>60. <label for="contactName">الاسم:</label>
.
<input id="contactName" type="text" name="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
. <!–?php if($nameError != ”) { ?–>
. <span>ادخل الاسم</span>
. <!–?php } ?–>
.</li>
</ul>
</ul>
.
<ul>
<li>67. <label for="email">البريد الالكتروني :</label>
.
<input id="email" type="text" name="email" value="<?php if(isset($_POST['email']))<span /&gt;
. <!–?php if($emailError != ”) { ?–>
.
. <!–?php } ?–>
72.</li>
</ul>
&nbsp;

.
<ul>
<li><label for="commentsText">الرسالة :</label>
.<textarea id="commentsText" name="comments" rows="5" cols="80">&lt;?php if(isset($_POST['comments'])) { if(function_exists(‘stripslashes’)) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?&gt;</textarea>
. <!–?php if($commentError != ”) { ?–>
.
. <!–?php } ?–>
.</li>
</ul>
&nbsp;

.
<ul>
<li>.
<input type="submit" value="ارسال" />81.</li>
</ul>
&nbsp;

.

.
<input id="submitted" type="hidden" name="submitted" value="true" /> .

</form>85. <!–?php } ?–>
.

</div>
<!– .entry-content –>
.

</div>
<!– #post-## –>
.<!–?php comments_template( ”, true ); ?–>
.<!–?php endwhile; ?–>
.

</div>
<!– #content –>
.

</div>
<!– #container –>
.<!–?php get_sidebar(); ?–>
[/html]

الآن نكون قد انتهينا ويمكنك استخدام هذا النموذج بانشاء صفحة جديدة من لوحة تحكم الوردبريس ثم اختيار نموذج contact لتشاهد النتيجة بنفسك

مقالات ذات صلة

اضف رد