Rise Company
26-07-2017, 18:42
صفحة / نموذج اتصل بنا contact page Form من خلال ربط Html مع php مع JS - الكوردوفا و الفون جاب
الكوردوفا و الفون جاب Phone Gap / Cordova
فى تطبيق الموبايل عند وضع صفحة اتصل بنا Contact Form يكون هناك 3 خطوات
الاول : هو وضع تصميم صفحة الاتصال contact.html
الثانى : هو ربط تصميم الصفحةcontact.html مع برمجة عمل الصفحة contact.php
الثالث : هو ربط تصميم الصفحةcontact.html مع برمجة عمل الصفحة contact.php مع لغة الاندرويد contact.js
---------------------------------------------------------------
فكرة الدرس هنا تركز على شىء واحد وهو ان ملفات php لا تعمل local و بالتالى يجب ان توضع على سيرفر
اى ان داخل ملف contact.html يكون هناك action ينفذ و يوجه الى مسار contact.php
فسنقوم بتغيير المسار من داخل التطبيق الى خارج التطبيق بوضع الملف على الاستضافة.
مثال حى لمشكلة كانت تواجهنا :
I have an issue with contact form, I had added my email inside the php file,
but while sending an email by the form it always give me the message “We ‘ll back shortly! ”
with out any email sent !
وحل المشكلة
I had solved the issue, the steps was :
First step :
I had opened file “page-contact” and edited “<form action=”php/contact.php” method=”post” class=”contactForm” id=”contactForm”>”
by changing the action directory url from “php/contact.php” as local to ” https://www.mydomainsite.com/contact.php as webcloud
Second step :
I had opened my hosting and uploaded inside folder www your provider file “php/contact.php” with out any change
to be like that url “https://www.mydomainsite.com/contact.php”
مثال لكود HTML
<form action="https://www.mydomainsite.com/contact.php" method="post" class="contactForm" id="contactForm">
<fieldset>
<div class="formValidationError bg-red-dark" id="contactNameFieldError">
<p class="center-text uppercase small-text color-white">Name is required!</p>
</div>
<div class="formValidationError bg-red-dark" id="contactEmailFieldError">
<p class="center-text uppercase small-text color-white">Mail address required!</p>
</div>
<div class="formValidationError bg-red-dark" id="contactEmailFieldError2">
<p class="center-text uppercase small-text color-white">Mail address must be valid!</p>
</div>
<div class="formValidationError bg-red-dark" id="contactMessageTextareaError">
<p class="center-text uppercase small-text color-white">Message field is empty!</p>
</div>
<div class="formFieldWrap">
<label class="field-title contactNameField" for="contactNameField">Name:<span>(required)</span></label>
<input type="text" name="contactNameField" value="" class="contactField requiredField" id="contactNameField"/>
</div>
<div class="formFieldWrap">
<label class="field-title contactEmailField" for="contactEmailField">Email: <span>(required)</span></label>
<input type="text" name="contactEmailField" value="" class="contactField requiredField requiredEmailField" id="contactEmailField"/>
</div>
<div class="formTextareaWrap">
<label class="field-title contactMessageTextarea" for="contactMessageTextarea">Message: <span>(required)</span></label>
<textarea name="contactMessageTextarea" class="contactTextarea requiredField" id="contactMessageTextarea"></textarea>
</div>
<div class="formSubmitButtonErrorsWrap contactFormButton">
<input type="submit" class="buttonWrap button button-green contactSubmitButton" id="contactSubmitButton" value="Send Message" data-formId="contactForm"/>
</div>
</fieldset>
</form>
مثال لكود PHP
<?php
// variables start
$name = "";
$email = "";
$message = "";
$name = trim($_POST['contactNameField']);
$email = trim($_POST['contactEmailField']);
$message = trim($_POST['contactMessageTextarea']);
// variables end
// email address starts
$emailAddress = '[email protected]';
// email address ends
$subject = "Message From: $name";
$message = "<strong>From:</strong> $name <br/><br/> <strong>Message:</strong> $message";
$headers .= 'From: '. $name . '<' . $email . '>' . "\r\n";
$headers .= 'Reply-To: ' . $email . "\r\n";
$headers .= 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
//send email function starts
mail($emailAddress, $subject, $message, $headers);
//send email function ends
?>
---------------------------------------------------------------
هذه اكواد اخرى للاطلاع فقط على فكرة العمل بها
مثال لكود HTML
<form action="#" method="get">
<div class="form-element">
<label for="FirstName">Firstname</label>
<input id="FirstName" name="FirstName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="LastName">Lastname</label>
<input id="LastName" name="LastName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="Email">Email</label>
<input id="Email" name="Email" type="email" placeholder="optional" />
</div>
<div class="form-element">
<label for="MessageText">Message</label>
<textarea id="MessageText" name="MessageText" placeholder="required" rows="5" required ></textarea>
</div>
<input type="button" value="submit"/>
</form>
مثال لكود JS
// When the document has loaded...
$(document).ready(function(){
$('input[type="button"][value="submit"]').click(function() {
$.post('http://cafedeweb.com/www/handler.php', {
FirstName: $('#FirstName').val(),
LastName: $('#LastName').val(),
Email: $('#Email').val(),
MessageText: $('#MessageText').val()
// HTML function
}, function (html) {
// Place the HTML in a astring
var response=html;
// PHP was done and email sent
if (response=="success") {
alert("Message sent!");
} else {
// Error postback
alert("Please fill all fields!");
return false;
}
});
});
});
مرجع :
https://stackoverflow.com/questions/20641973/creating-a-contact-form-for-phonegap-apps
الكوردوفا و الفون جاب Phone Gap / Cordova
فى تطبيق الموبايل عند وضع صفحة اتصل بنا Contact Form يكون هناك 3 خطوات
الاول : هو وضع تصميم صفحة الاتصال contact.html
الثانى : هو ربط تصميم الصفحةcontact.html مع برمجة عمل الصفحة contact.php
الثالث : هو ربط تصميم الصفحةcontact.html مع برمجة عمل الصفحة contact.php مع لغة الاندرويد contact.js
---------------------------------------------------------------
فكرة الدرس هنا تركز على شىء واحد وهو ان ملفات php لا تعمل local و بالتالى يجب ان توضع على سيرفر
اى ان داخل ملف contact.html يكون هناك action ينفذ و يوجه الى مسار contact.php
فسنقوم بتغيير المسار من داخل التطبيق الى خارج التطبيق بوضع الملف على الاستضافة.
مثال حى لمشكلة كانت تواجهنا :
I have an issue with contact form, I had added my email inside the php file,
but while sending an email by the form it always give me the message “We ‘ll back shortly! ”
with out any email sent !
وحل المشكلة
I had solved the issue, the steps was :
First step :
I had opened file “page-contact” and edited “<form action=”php/contact.php” method=”post” class=”contactForm” id=”contactForm”>”
by changing the action directory url from “php/contact.php” as local to ” https://www.mydomainsite.com/contact.php as webcloud
Second step :
I had opened my hosting and uploaded inside folder www your provider file “php/contact.php” with out any change
to be like that url “https://www.mydomainsite.com/contact.php”
مثال لكود HTML
<form action="https://www.mydomainsite.com/contact.php" method="post" class="contactForm" id="contactForm">
<fieldset>
<div class="formValidationError bg-red-dark" id="contactNameFieldError">
<p class="center-text uppercase small-text color-white">Name is required!</p>
</div>
<div class="formValidationError bg-red-dark" id="contactEmailFieldError">
<p class="center-text uppercase small-text color-white">Mail address required!</p>
</div>
<div class="formValidationError bg-red-dark" id="contactEmailFieldError2">
<p class="center-text uppercase small-text color-white">Mail address must be valid!</p>
</div>
<div class="formValidationError bg-red-dark" id="contactMessageTextareaError">
<p class="center-text uppercase small-text color-white">Message field is empty!</p>
</div>
<div class="formFieldWrap">
<label class="field-title contactNameField" for="contactNameField">Name:<span>(required)</span></label>
<input type="text" name="contactNameField" value="" class="contactField requiredField" id="contactNameField"/>
</div>
<div class="formFieldWrap">
<label class="field-title contactEmailField" for="contactEmailField">Email: <span>(required)</span></label>
<input type="text" name="contactEmailField" value="" class="contactField requiredField requiredEmailField" id="contactEmailField"/>
</div>
<div class="formTextareaWrap">
<label class="field-title contactMessageTextarea" for="contactMessageTextarea">Message: <span>(required)</span></label>
<textarea name="contactMessageTextarea" class="contactTextarea requiredField" id="contactMessageTextarea"></textarea>
</div>
<div class="formSubmitButtonErrorsWrap contactFormButton">
<input type="submit" class="buttonWrap button button-green contactSubmitButton" id="contactSubmitButton" value="Send Message" data-formId="contactForm"/>
</div>
</fieldset>
</form>
مثال لكود PHP
<?php
// variables start
$name = "";
$email = "";
$message = "";
$name = trim($_POST['contactNameField']);
$email = trim($_POST['contactEmailField']);
$message = trim($_POST['contactMessageTextarea']);
// variables end
// email address starts
$emailAddress = '[email protected]';
// email address ends
$subject = "Message From: $name";
$message = "<strong>From:</strong> $name <br/><br/> <strong>Message:</strong> $message";
$headers .= 'From: '. $name . '<' . $email . '>' . "\r\n";
$headers .= 'Reply-To: ' . $email . "\r\n";
$headers .= 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
//send email function starts
mail($emailAddress, $subject, $message, $headers);
//send email function ends
?>
---------------------------------------------------------------
هذه اكواد اخرى للاطلاع فقط على فكرة العمل بها
مثال لكود HTML
<form action="#" method="get">
<div class="form-element">
<label for="FirstName">Firstname</label>
<input id="FirstName" name="FirstName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="LastName">Lastname</label>
<input id="LastName" name="LastName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="Email">Email</label>
<input id="Email" name="Email" type="email" placeholder="optional" />
</div>
<div class="form-element">
<label for="MessageText">Message</label>
<textarea id="MessageText" name="MessageText" placeholder="required" rows="5" required ></textarea>
</div>
<input type="button" value="submit"/>
</form>
مثال لكود JS
// When the document has loaded...
$(document).ready(function(){
$('input[type="button"][value="submit"]').click(function() {
$.post('http://cafedeweb.com/www/handler.php', {
FirstName: $('#FirstName').val(),
LastName: $('#LastName').val(),
Email: $('#Email').val(),
MessageText: $('#MessageText').val()
// HTML function
}, function (html) {
// Place the HTML in a astring
var response=html;
// PHP was done and email sent
if (response=="success") {
alert("Message sent!");
} else {
// Error postback
alert("Please fill all fields!");
return false;
}
});
});
});
مرجع :
https://stackoverflow.com/questions/20641973/creating-a-contact-form-for-phonegap-apps