إنشاء نموذج اتصال ووردبريس بدون اضافة في ووردبريس – برنامج تعليمي كامل سهل

عندما يتعلق الأمر إنشاء نموذج اتصال ووردبريس ، فلديك عدد قليل من الخيارات للاختيار من بينها. أحد أكثر الخيارات شيوعًا هو استخدام مكون إضافي للقيام بذلك ، ولكن يحتاج البعض إلى معرفة كيفية إنشاء نموذج اتصال بدون مكون إضافي وهذا ما سأحاول شرحه الآن

ما الذي يجب معرفته قبل البدء في نموذج اتصال ووردبريس

ليس من الصعب القيام بذلك ، تذكر أن كل ما تحتاجه هو القيام بثلاثة أشياء فقط لبدء تلقي الرسائل من عملائك وزوار موقعك على موقع الويب الخاص بك

• اكتب كود النموذج
• استدعاء النموذج في Functions.php
• اتصل بالنموذج الموجود في موقع الويب الخاص بك في أي مكان تريده باستخدام الرمز القصير.

الخطوة الأولى: اكتب كود النموذج

انتقل الآن إلى مجلد القوالب الخاص بك وقم بعمل داخل مجلد جديد ، واسمه نماذج وداخل مجلد النماذج ، أنشئ ملفًا جديدًا أطلق عليه اسم contact-form.php

الصق الكود التالي في نموذج الاتصال

<h4>Contact Us</h4> 
 
 <div id="success_message" class="alert alert-success "></div>
	<form id="enquiry">
	<input type="hidden" name="subject" value="<?php  the_title();?>"  >
 
  <div class=" form-group row"   >
    <div class="col" >
      <input type="text" name="name" class="form-control" placeholder=" Your Name " required="true">
    </div>
    <div class="col" >
      <input type="email" name="email" class="form-control" placeholder="Your Email" required="true">


    </div>
  </div>
  <div class="row" >
     
    <div class="col" >
<textarea class="form-control" name=" message" id="exampleFormControlTextarea1" rows="3" required="true">  </textarea>
 
    </div>

  </div><br>
      <button type="submit" class="btn btn-primary btn-block" >Send Now</button>
</form>

also we need to use some JQuery in our Form . here is the Code

<script  >

	(function($){

 
		$('#enquiry').submit(function(event){

	 
			event.preventDefault();
			var endpoint ='<?php echo admin_url('admin-ajax.php');?>';

			var form= $('#enquiry').serialize();

			console.log(form);
			 
			var formdata= new FormData;
			formdata.append ('action','enquiry');
			formdata.append('enquiry', form);

			$.ajax(endpoint, {

				type:'POST',
				data:formdata,
				processData:false,
				contentType:false,

				success: function(res){
					 $('#enquiry').fadeOut(200);

					 $('#success_message').text(' Thanks, We will get in touch with you soon as Possible  ').show();

				},

				error:function(err){
				}
			})


	} ) 







 	} ) (jQuery)
</script>

الخطوة الثانية: استدعاء النموذج في Functions.php

فقط الصق الكود التالي في Functions.php ولا تنسى تغيير اسم الموقع والبريد الإلكتروني الخاص بك

add_action('wp_ajax_enquiry', 'enquiry_form');
add_action('wp_ajax_nopriv_enquiry', 'enquiry_form');
function enquiry_form()
{
	$formdata =[];
	wp_parse_str($_POST['enquiry'],$formdata);
	$admin_email=get_option('admin_email');
	$headers[]='Content-Type: text/html; charset=UTF-8';
	$headers[]='From: wpmrj3 <' . $admin_email . '>';
	$headers[]='Replay-to:' .$formdata['email'];
	$headers[]='BCC:' .$formdata['write here your Email Adress'];
	$send_to =$admin_email;
	$subject ='From:  ' .$formdata ['name '];
	$message ='';
		foreach ($formdata as $index => $field  )
		{
	 	$message .= ' <strong> ' .$index . '</strong>:' . $field . '<br  />';
		}
	try {
			if(wp_mail($send_to , $subject, $message , $headers))
			{ 
				wp_send_json_success('Thanks alot!');
			}  
			else {
				wp_send_json_error(' Something Went Wrong  !');
				}
		}  catch ( Exception $e)
				{
				wp_send_json_error ($e->getMessage());
				}
		wp_send_json_success ( $formdata ['name'] );
	}

//End of Forms

الخطوة الثالثة: استخدم النموذج في موقع الويب الخاص بك في أي مكان تريد باستخدام الرمز القصير.

// Shortcodes 
function wpmrj3_contact_form_shortcode( $attr ) {
    ob_start();
   	get_template_part('forms/contact', 'form');
    return ob_get_clean();
}
add_shortcode( 'contact-form', 'wpmrj3_contact_form_shortcode' );

انتقل الآن إلى موقع الويب الخاص بك والصق الرمز القصير الذي صنعناه

[contact-form]

هذه هي كل المعلومات حول إنشاء نموذج اتصال ووردبريس أعتقد أنه ليس من الصعب تحقيق ذلك.

وكما هو دائماً ، عندما تريد أن تسألني شيئًا ما ، يسعدني رؤيته أدناه في التعليقات