close
تبلیغات در اینترنت
آموزش ساخت فرم تماس با ما ، با جی کوئری

خوش آمدید به باکس گراف

پایگاه تخصصی ابزاردهی و کد نویسی

انجمن

آمار و اطلاعات


آمار سایت
آمار سایت
  • افراد آنلاين : 1
  • ورودي گوگل :0
  • بازديد امروز : 36
  • بازديد ديروز : 16
  • آی پی های امروز : 2
  • آی پی های ديروز : 1
  • بازديد اين هفته : 104
  • بازديد اين ماه : 717
  • بازديد کل : 309,944
  • تعداد کل مطالب : 106
  • تعداد کل ديدگاه ها : 72
  • تعداد کل کاربران : 658
  • سئوسايت :100 %
  • پيج رنک گوگل : 1
  • دادن امتیاز به سایت :

آموزش ساخت فرم تماس با ما ، با جی کوئری


آموزش ساخت فرم تماس با ما

با سلام در این جلسه می خواهیم یک فرم تماس با ما رو از پایه بسازیم , برای مشاهده آموزش و دریافت اسکریپت به ادامه مطلب مراجعه کنید ...

برای این پست قصد دارم که آموزش ساخت یه فرم تماس با ما که میدونم نیاز همه شما ها هست رو بدم .

.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();
 
}
 
?>


لینک دانلود : دانلود اسکریپ


نويسنده : سید حسن مرادی [مديرسايت]
چهارشنبه 11 تير 1393

webca

در تاریخ 18:46 ساعت 1393/4/22

سلام جالب بود ممنون خیلی خوشحال میشوم این کد باکس را که شما ازش استفاده کردین را بدین ما هم در سایت استفاده کنیم
با تشکر

پاسخ : خواهش مینکم , کد باکس هم تو پست ها هست سرچ کنید.
http://boxgraph.rozblog.com/post/68


سامانه پیامک

در تاریخ 3:57 ساعت 1393/4/20

با سلام خدمت شما مدیر محترم

برای داشتن یک سامانه حرفه ای و رایگان همین حالا اقدام نمائید. سامانه sms5002.ir به شما یک پنل پیامک کاملا اختصاصی رایگان می دهد با این سامانه پنل ارتباطی جدیدی بین سایت و کاربران خود آغاز کنید. برای فعال سازی همین حالا اقدام نمائید.

جهت ثبت نام به آدرس زیر مراجعه نمائید

sms5002.ir/register.php


نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی