۲۵
۱۳۸۹
آموزش ساخت فرم تماس با ما ، با جی کوئری
نویسنده : 
برای این پست قصد دارم که آموزش ساخت یه فرم تماس با ما که میدونم نیاز همه شما ها هست رو بدم .
.this post for lerning create contact which us of php & jqury
مرحله اول . ساختار اچ تی ام ال
Step 1. Construction
برای شروع کردن نوشتن یه کد همیشه مهمترین اصل ساخت المنت ها اچ تی ام ال اون و به معنایی ( لایه ها ) که شما رو برای یک سری کد ساخت یافته حمایت میکنه .
یک فایل اچ تی ام ال ایجاد نمایید و کد زیر را در آن قرار دهید .
Create a new HTML document, and add the following to your body tag:
<body> <table align="center" border="0" width="500"> <tr> <td>به:</td><td><input type="text" size="30" id="to" /><div style="display: none;" id="error-to"><font color="#FF0000">Insert email address!</font></div></td> </tr> <tr> <td>از:</td><td><input type="text" size="30" id="from" /><div style="display: none;" id="error-from"><font color="#FF0000">Your email/name here!</font></div></td> </tr> <tr> <td>موضوع:</td><td><input type="text" size="30" id="subject" /><div style="display: none;" id="error-subject"><font color="#FF0000">Enter subject!</font></div></td> </tr> <tr> <td colspan="2"><textarea id="content" rows="9" cols="59"></textarea></td> </tr> <tr> <td width="10%"><input type="button" id="submit-button" value="ارسال" /></td> <td> <div style="display: none;" id="loading"><img src="loading.gif" /> <font color="#FF0000">Sending..</font></div> <div style="display: none;" id="message-sent"><font color="#008040">Message sent!</font></div> <div style="display: none;" id="error-content"><font color="#FF0000">Please enter come content!</font></div> </td> </tr> </table> </body>
تا به اینجا باید ساختار اچ تی ام ال شما به شکل زیر در آمده باشد .
|
|
مرحله دوم . اضافه نمودن سی اس اس ها برای زیبایی و کاربرد پذیری بیشتر
Step 2. Create the css for interface
.بعد از ایجاد کد های اچ تی ام ال باید به مبحث سی اس اس های آن برای کاربردپذیری بیشتر و زیبایی خاص آن پرداخت
create element < head >and add the following to your style tag:
<style type="text/css">
body{
direction: rtl;
font-family: tahoma;
font-size: 11px;
}
input{
font-family: tahoma;
font-size: 11px;
}
table{
border: 1px solid #cccccc;
}
textarea{
font-family: Verdana;
font-size: 11px;
}
</style>
|
|
مرحله سوم . اضافه نمودن فایل ها و توابع جی کوئری
use jqury and function jqury
شما باید از این دو فایل پیوست برای پیشبرد کارتون استفاده نمایید .
<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script src="jquery.js"></script> <script src="process.js"></script> </head>
محتویات فایل جی کوئری مشخص پس اینجا من توضیحی راجع بهش نمیدم .
مرحله چهارم . ویرایش فایل پروکسز (process.js)
اما در مورد محتویات فایل پروکسز (یک سری توابع که مخصوص آجکس کردن ) یعنی بدون اینکه صفحه رفلش بشه ایراداتی رو ازتون میگیره و گوش زد میکنه و میتونه داده های شما را به صورا آجکس براتون ارسال کند و بگیرد .
$(function(){
$("#submit-button").click(function(){
$("#loading").fadeIn(100).show();
var from = $("#from").val();
var to = $("#to").val();
var subject = $("#subject").val();
var content = $("#content").val();
var data = "from=" + from + "&to=" + to + "&subject=" + subject + "&content=" + content;
if(to == ""){
$("#error-to").fadeIn(700).show();
$("#loading").fadeOut(100).hide();
}else if(from == ""){
$("#error-from").fadeIn(700).show();
$("#loading").fadeOut(100).hide();
}else if(subject == ""){
$("#error-subject").fadeIn(700).show();
$("#loading").fadeOut(100).hide();
}else if(content == ""){
$("#error-content").fadeIn(700).show();
$("#loading").fadeOut(100).hide();
}else{
$.ajax({
type: "POST",
url: "send.php",
data: data,
success: function(){
$("#loading").fadeOut(100).hide();
$('#message-sent').fadeIn(500).show();
}
});
}
});
});
مرحله پنجم . محتویات فایل سند (send.php)
در فایل سند متغییر های خواسته شده دریافت و با استفاده از تابع میل (mail) ایمیل مورد نظر را ارسال میکند .
<?php
$to = $_REQUEST['to'];
$from = $_REQUEST['from'];
$message = $_REQUEST['content'];
$subject = $_REQUEST['subject'];
$header = "From: <".$from.">" ."\r\n";
$send = @mail($to, $subject, $message, $header);
if(!$send){
die();
}
?>
|
|
لینک دانلود : دانلود اسکریپ
پست های مربط
بر چسب زدن بر روی عکس .- هویت سنجی داده ها در پی اچ پی – قسمت ۲
- هویت سنجی داده ها در پی اچ پی
- جیکوئری موبایل به نسخه پایدار رسید .
درباره نویسنده : حسن موحد
من حسن موحد . از بچگی به چیز های غیر عادی عادت داشتم و همیشه دوست داشتم یه کاری بکنم که کسی به فکر نرسید . و حالا که بزرگ شدم دوست دارم همین نظریم ادامه بدم .
۱۴ نظر + Add Comment
دیدگاهتان را بنویسید
- @rozita_tt @Sormeta بی کاره بنده خدا
- @rozita_tt :) aslan hala ke intor shod bayad emkan video ezafeh koneh
- @rozita_tt اسکایپ نباشه ، اما تویت صدای پرنده مگه نیست ! انسان هم صدا داره معنی نداره این همه نوشته بی روح فقط بنویسی !
- @rozita_tt چرا ای بابا ؟!
- امکان تویت صوتی هم وجود داشت خیلی خوب می شد ! یعنی بشه با صوت خودت ضبط برای دیگران فرستاد ! @twitter
- حداقل به معنای واقعی تویتر می شد
Loading ...امار بازدید کنندگان !
خبر نامه !
با وارد کردن ایمیل خود در لیست زیر و انجام مراحل تایید آن در ایمیل خود از خبر ها و پست های جدید ما سریع تر با خبر شوید !تبلیغات
حامیان
پروسس = Process
رفرش = Refresh
ممنون از آموزشات
قابلتون نداشت
سلام.
ممنون از آموزشاتون.
فقط یه چیزی. وقتی ارور رو رفعش می کنی، مسیجی که واسه ایراد به رنگ قرمز داده می مونه و بعد می گه مسیج سنت…
خوب دو تا راه داری یکی اینکه همین با این if مشخص کنی که اگر این خطا اومد بعد از ۱۰ ثانیه خطا رو پاک کن …. یا اینکه اگر این خطا بود یا این حرف همه از حالت نمایش خارج کن این نشون بده !
با سلام ممنون هستم از آموزش شما
من سایت شما لینک خواهم کرد
thank you
gra
salam.in dorost javab mide faghat emaili ersal nemishe
moshkel az kojast?
دوست عزیز فایل که برای ارسال ایمیل درست شده بررسی کنید این کدها قبلا کاملا چک شده و اینجا قرار گرفته ! شما ارور که بهتون داده میشه بنویسید !
سلام
یک سوال چطور ایمیل خودمون را به کد بدیم.چون من از آموزش چیزی متوجه نشدم.
با سپاس
دوست عزیز ! شما میتونی فایل کونفیگ باز کنی که داخل یه ایمیل و اون ایمیل عوض کنی
عالـــی بوذ مرسی <3
میخواستم ببینم شما برای این که برنامه ی Web builder از زبان فارسی پشتیبانی کنه راهی سراغ دارین ؟
یا میتونیذ مذول زباان فرسی رو برای دانلود در سایتتون قرار بدین ؟
اخه خود سایت میگه برای این کار باید مدول ساخته شه !
مدول ساختنش هم خیلی سخته .
نه دوست عزیز من ذهنیت نصبت به اینجور برنامه ها ندارم و اصولا همه چیز به صورت تقریبا سنتی کار میکنم !
دوست عزیز ۱ سوال
شما در قسمت Ajax با متد Post اطلاعات رو فرستادی اما چرا توی فایل send.php اطلاعات رو با $_REQUEST دریافت کردی؟ نباید با $_POST دریافت کنی؟
agha man motevajeh nashodam email e khodemono koja bayad jay gozin konim .
manzoreton in kode ? :
$send = @mail($to, $subject, $message, $header);
lodtfan rahnamayi konid PLZ !
حسین جان این یه تابع پی اچ پی که کارش ارسال ایمیل به هر ایمیلی که شما بهش بدی ! حالا ما یه متغیر داریم به نام $to شما اگر $to حذف کنید و به جاش ایمیل خودتون بذارید ایمیل به اون آدرس ایمیلی که به تابع دادید ارسال میشه