Hướng dẫn tạo form gửi mail trong wordpress thủ công

Hướng dẫn tạo form gửi mail trong wordpress không dùng plugin

Mặc dù WordPress có nhiều plugin tạo form rất chuyên nghiệp & đẹp mắt . Nhưng 1 ngày không đẹp trời với những yêu cầu form truyền và lấy dữ liệu phức tạp thì gần như khi thiết kế website bằng wordpress dùng plugin để sử dụng plugin để giải quyết vấn đề đó là vô cùng khó khăn. Để tạo form trong wordpress bạn có thể dùng cách sau :

Bước 1 tạo ra 1 page template như sau :

<?php
/*
Template Name: dkkh
*/
?>
<form id="f-dkkh" data-toggle="validator" role="form" action="<?php echo esc_url( $_SERVER['REQUEST_URI'] ) ;?> " method="post" class="form-horizontal">
<ul class="info-basic clearfix">
					<li class="form-group col-sm-6">
						
							<label for="sw-name" class="label-form  col-sm-4">Họ tên người học</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" id="sw-name" name="sw-name" placeholder="Họ tên học viên" oninvalid="this.setCustomValidity('Vui lòng không để trống')" >
								<div class="help-block"></div>
							</div>
						
					</li><!--end form-group-->
					
					
					<li class="form-group col-sm-6">
						
							<label class="label-form col-sm-4 right-label" for="sw-gender"> Giới tính (*) </label>
							<div class="controls col-sm-8">
								<label class="radio-inline">Nam
									<input type="radio" id="rdNam" name="sw-gender" value="0" oninvalid="this.setCustomValidity('Vui lòng chọn giới tính')">
								</label>
								<label class="radio-inline"> Nữ
									<input type="radio" id="rdNu" name="sw-gender" value="1" required oninvalid="this.setCustomValidity('Vui lòng chọn giới tính')">
								</label>
							</div>
						
					</li><!--end form-group-->
					
					<li class="form-group col-sm-6">
						
							<label for="sw-sdt" class="label-form  col-sm-4">Số điện thoại (*)</label>
							<div class="col-sm-8">
								<input type="tel" class="form-control" id="sw-sdt" name="sw-sdt" placeholder="Số điện thoại" oninvalid="this.setCustomValidity('Vui lòng không để trống')" required>
								<div class="help-block with-errors"></div>
							</div>
						
					</li><!--end form-group-->
					
					
					<li class="form-group col-sm-6">
						
							<label for="sw-email" class="label-form right-label col-sm-4"> Email : </label>
							<div class="col-sm-8">
								<input type="email" class="form-control" id="sw-email" name="sw-email" placeholder="Email"  oninvalid="this.setCustomValidity('Vui lòng nhập email hợp lệ')" required>
								<div class="help-block with-errors"></div>
							</div>
						
					</li><!--end form-group-->
					
					
					
				</ul><!--end info-basic-->
</from>

Để lấy truyền dữ liễu database taxonomy & post trong post type vào select của form ta dùng cách sau :

<select id="sw-dkkh" name="sldkkh" class="form-control choiceCourse">
								<option value="0"> Bấm vào đây để chọn khóa học </option>
								<?php
									$term_hddt = get_terms('list-hddt',array(
										'hide_empty'	=>0,								
										'orderby'	=> 'termgroup'
									));							
									foreach ( $term_hddt as $term) : 
									$args = array (
											'post_type'	=> 'hddt',
											'list-hddt'	=> $term->slug
										);
									$query = new WP_Query($args);
								?>
									<optgroup class="sl-btt" label="<?php echo $term->name;?>">
										<?php
											while ( $query->have_posts()) : $query->the_post() ;
											$idht = get_the_ID();
											
										?>
										<option <?php if ($idkh == $idht) echo 'selected';?> id="<?php the_ID();?>" value="<?php the_ID();?>" title="<?php the_title();?>">
											<?php the_title();?> &nbsp; &nbsp; 
											<?php
												$date_ngk =  get_field('ngay_khai_giang');
												// extract Y,M,D
												$y = substr($date_ngk, 0, 4);
												$m = substr($date_ngk, 4, 2);
												$d = substr($date_ngk, 6, 2);
												$time = strtotime("{$d}-{$m}-{$y}");
												echo date('d/m/Y', $time);											
											?>		
										</option>
										<?php endwhile;?>
									</optgroup>
								<?php endforeach;wp_reset_postdata(); ?>
							</select>

Sau khi tạo form trong wordpress , ta viết hàm xử lý form

Ở đây theme dung boostrasp.js &  jqBootstrapValidation.js để kiểm tra các giá trị nhập trong form có hợp lệ hay không

Sau khi nhúng jsBootstrapValidation.js vào website (tham khảo dùng jqBootstrapValidation.js tại http://reactiveraven.github.io/jqBootstrapValidation/ )

Bạn dùng code javascript để xử lý bắt lỗi input trong form

<script>
  $(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
</script>

Sau khi kiểm tra người dùng đã nhập thông tin đầy đủ , tiến hành xử lý submit form

<?php
// if the submit button is clicked, send the email
			if ( isset( $_POST['sw-submitted'] ) ) {
// sanitize form values
				$name    = sanitize_text_field( $_POST["sw-name"] );
				$email   = sanitize_email( $_POST["sw-email"] );
				$sdt =     sanitize_text_field( $_POST["sw-sdt"] );
$message = "Kính gởi {$ac} <br>" . $name;
$message .= '<h3> Xin chào mừng Anh đến với IDR </h3>';
// get the blog administrator's email address
				$to = get_option( 'admin_email' );
								 
				$headers = "From: $name <$email>" . "\r\n";
								
				// If email has been process for sending, display a success message
				if ( wp_mail( $to, $subject, $message, $headers ) ) {
					echo '<div>';
					echo '<p>Thanks for contacting me, expect a response soon.</p>';
					echo '</div>';
				} else {
					echo 'An unexpected error occurred';
				}
}
?>

Để gửi nội dung mail là html trong file functions.php cùa theme wordpress dùng filter sau

add_filter ("wp_mail_content_type", "my_sw_mail_content_type");
function my_sw_mail_content_type() {
	return "text/html";
}