صفحة / نموذج اتصل بنا 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/...-phonegap-apps