unable to write PHP for on-page Form submission - SEO

SyedMuhammadIftikhar
April 30, 2017
176 views
0 votes
2 Answers

Here is my Modal Form I have designed and wrote a PHP but as I have less command over PHP… my ultimate target is submit the form on-page without refreshing the page & to get all these details via email using PHP. This is what I have written till now in PHP.

<?php

// Define some constants
define( "RECIPIENT_NAME", "John Smith" );
define( "RECIPIENT_EMAIL", "[email protected]" );
define( "EMAIL_SUBJECT", "Visitor Message" );

// Read the form values
$success = false;
$senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^.-' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";
$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^.-_@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
$senderPhone = isset( $_POST['senderPhone'] ) ? preg_replace( "/[^.-_@a-zA-Z0-9]/", "", $_POST['senderPhone'] ) : "";
$senderCountry = isset( $_POST['senderCountry'] ) ? preg_replace( "/[^.-_@a-zA-Z0-9]/", "", $_POST['senderCountry'] ) : "";
$senderBudget = isset( $_POST['senderBudget'] ) ? preg_replace( "/[^.-_@a-zA-Z0-9]/", "", $_POST['senderBudget'] ) : "";
$senderSelect = isset( $_POST['senderSelect'] ) ? preg_replace( "/[^.-_@a-zA-Z0-9]/", "", $_POST['senderSelect'] ) : "";
$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";

// If all values exist, send the email
if ( $senderName && $senderEmail && $senderPhone && $senderCountry && $senderBudget && $senderSelect && $message ) {

    $msgToSend = "Name: $senderNamen";
    $msgToSend .= "Email: $senderEmailn";
    $msgToSend .= "Phone: $senderPhonen";
    $msgToSend .= "Sender Country: $senderCountryn";
    $msgToSend .= "Sender Budget: $senderBudgetn";
    $msgToSend .= "Sender Select: $senderSelectn";
    $msgToSend .= "Message: $message";

    $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
    $headers = "From: " . $senderName . " <" . $senderEmail . ">";
    $success = mail( $recipient, EMAIL_SUBJECT, $msgToSend, $headers );
}

// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {
  echo $success ? "success" : "error";
} else {
?>
<html>
  <head>
    <title>Thanks!</title>
  </head>
  <body>
  <?php if ( $success ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
  <?php if ( !$success ) echo "<p>There was a problem sending your message. Please try again.</p>" ?>
  <p>Click your browser's Back button to return to the page.</p>
  </body>
</html>
<?php
}
?>

.modal-popup-main {
  padding:35px; box-shadow:0px 0 4px #333;
}
.bg-white {
  background:#fff!important
}
.bg-blue {
  background:#003d76!important
}
.position-relative {
  position:relative!important;
  z-index:5
}

.no-padding, .no-padding-section {
  padding:0!important
}
.center-col {
  position: relative;
  float:none!important;
  margin-left:auto!important;
  margin-right:auto!important
}
.white-text {
  color:#FFF!important
}
.request_form {
  background:rgba(255, 255, 255, .5);
  font-size:50px;
  padding:10px 10px 8px;
  position:fixed;
  right:25px;
  text-align:center;
  top:400px;
  z-index:999999999;
  color:#01315f; border:1px solid #ddd;
}
.request_form span {
  display:block;
  font-size:14px;
  font-weight:700;
  padding:8px 0;
}
.slider-subtitle5 {
  font-size:22px;
  font-weight:600;
  letter-spacing:1px;
  margin-bottom:50px;
  line-height:30px;font-family:"Oswald",sans-serif;
}
.slider-subtitle4, .slider-subtitle5, .slider-title-big4, .slider-title-big5 {
  text-transform:uppercase;
  display:block
}
.no-margin-bottom {
  margin-bottom:0!important
}
.margin-four {
  margin-top:4%!important;
  margin-bottom:4%!important
}
.input-round {
  border-radius:4px!important
}
.big-input, .big-select, .big-textarea {
  padding:11px 10px;
  border:1px solid rgba(0, 0, 0, .2)
}
@media screen {
.big-input, .big-select, .big-textarea {
  padding-bottom:20px
}
}

.med-input.select-style select {
  padding:14px 15px
}
.med-input.select-style {
  margin:0 0 20px
}
.select-style {
  padding:0;
  border:1px solid #ccc;
  width:100%;
  overflow:hidden;
  margin:0 0 40px;
  background:url(http://www.tkdigitals.com/images/select-arrow.png) 97% 50% no-repeat #fff
}
.select-style select {
  padding:12px 10px;
  width:100%;
  border:none;
  box-shadow:none;
  background-color:transparent;
  background-image:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  font-size:11px;
  letter-spacing:1px;
  margin-bottom:0;
  color:#6d6d6d !important
}
.select-style select:focus {
  outline:0;
  border:none;
  box-shadow:none
}
.travel-booking .select-style select {
  padding:6px 15px 9px;
  border:none;
  height:37px
}
.travel-booking .select-style {
  background:url() right 10px top 50% no-repeat #fff
}
.select-style2 {
  border:none;
  margin-bottom:0
}
select.coup_select {
  padding:10px 13px;
  border:none;
  margin-bottom:0!important
}
input.coup_input[type=text]:focus, select.coup_select:focus {
  background:#CF6
}
.clear-both, footer {
  clear:both
}
#modal-popup5 input{
  border:1px solid #dfdfdf;
  letter-spacing:1px;
  font-size:11px;
  padding:8px 15px;
  width:100%;
  margin:0 0 20px;
  max-width:100%;
  resize:none
}
#modal-popup5 select {
  border:1px solid #dfdfdf;
  letter-spacing:1px;
  font-size:11px;
  padding:8px 15px;
  width:100%;
  margin:0 0 20px;
  max-width:100%;
  resize:none
}
#modal-popup5 textarea {
  border:1px solid #dfdfdf;
  letter-spacing:1px;
  font-size:11px;
  padding:8px 15px;
  width:100%;
  margin:0 0 20px;
  max-width:100%;
  resize:none
}

.required-field {
  font-size:11px;
  display:block;
  text-transform:uppercase;
  letter-spacing:1px
}
.margin-two {
  margin-top:2%!important;
  margin-bottom:2%!important
}
.margin-one {
  margin-top:1%!important;
  margin-bottom:1%!important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#contactForm" class=""><button class="banner-btn">Request For Quote</button></a>
<script>
    $('#call_form').on('click', function () {
       
        var url = "http://example.com/submit.php";

        var call_name = $('#call_name').val();
        var call_email = $('#call_email').val();
        var call_phone = $('#call_phone').val();
        var call_country = $('#call_country').val();
        var call_budget = $('#call_budget').val();
        var call_service = $('#call_service').val();
        var call_message = $('#call_message').val();


        $('#call_name').css('color', '#000');
        $('#call_email').css('color', '#000');
        $('#call_phone').css('color', '#000');
        $('#call_country').css('color', '#000');
        $('#call_budget').css('color', '#000');
        $('#call_service').css('color', '#000');
        $('#call_message').css('color', '#000');


        var error = 0;
        var regex = /^[a-zA-Z ]*$/;
        var phone_regex = /[0-9-()s]+/;
        var email_pattern = /^([a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+(.[a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+)*|"((([ t]*rn)?[ t]+)?([x01-x08x0bx0cx0e-x1fx7fx21x23-x5bx5d-x7eu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|\[x01-x09x0bx0cx0d-x7fu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))*(([ t]*rn)?[ t]+)?")@(([a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).)+([a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).?$/i;

        if (call_name == '' || regex.test(call_name) == false) {
            $('#call_name').css('color', 'red');
            error++;
        }
        if (call_email == '' || email_pattern.test(call_email) == false) {
            $('#call_email').css('color', 'red');
            error++;
        }
        if (call_message == '') {
            $('#call_message').css('color', 'red');
            error++;
        }

        if (error == 0) {
            $.ajax({
                url: url,
                data: {
                    call_name: call_name,
                    call_email: call_email,
                    call_phone: call_phone,
                    call_country: call_country,
                    call_budget: call_budget,
                    call_service: call_service,
                    call_message: call_message

                },
                type: "POST",
                success: function (res) {
                    // console.log(res);
                    $('#call_name').val("");
                    $('#call_email').val("");
                    $('#call_phone').val("");
                    $('#call_country').val("");
                    $('#call_budget').val("");
                    $('#call_service').val("");
                    $('#call_message').val("");
                    window.location = 'thank-you.html';
                }

            });
        }
    });
</script>

<script>
    $('#disc_form').on('click', function () {
       
        var url = "http://example.com/submit.php";

        var disc_name = $('#disc_name').val();
        var disc_email = $('#disc_email').val();
        var disc_country = $('#disc_country').val();


        $('#disc_name').css('color', '#000');
        $('#disc_email').css('color', '#000');
        $('#disc_country').css('color', '#000');


        var error = 0;
        var regex = /^[a-zA-Z ]*$/;
        var phone_regex = /[0-9-()s]+/;
        var email_pattern = /^([a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+(.[a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+)*|"((([ t]*rn)?[ t]+)?([x01-x08x0bx0cx0e-x1fx7fx21x23-x5bx5d-x7eu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|\[x01-x09x0bx0cx0d-x7fu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))*(([ t]*rn)?[ t]+)?")@(([a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).)+([a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).?$/i;

        if (disc_name == '' || regex.test(disc_name) == false) {
            $('#disc_name').css('color', 'red');
            error++;
        }
        if (disc_email == '' || email_pattern.test(disc_email) == false) {
            $('#disc_email').css('color', 'red');
            error++;
        }

        if (error == 0) {
            $.ajax({
                url: url,
                data: {
                    disc_name: disc_name,
                    disc_email: disc_email,
                    disc_country: disc_country

                },
                type: "POST",
                success: function (res) {
                    // console.log(res);
                    $('#disc_name').val("");
                    $('#disc_email').val("");
                    $('#disc_country').val("");
                    window.location = 'thank-you.html';
                }

            });
        }
    });
</script>
<div class="request_consl"> <a href="#modal-popup5" class="request_form popup-with-move-anim">+<span data-toggle="tooltip" title="click here" >Request a<br>consultation</span></a>
  <div id="modal-popup5" class="zoom-anim-dialog mfp-hide bg-blue col-lg-6 col-md-6 col-sm-7 col-xs-11 center-col bg-white text-center modal-popup-main"> <span class="slider-subtitle5 white-text  no-margin-bottom" style="font-family:'oswald';font-weight:600;">Request a
                  Quote</span>
    <!-- <form> -->
    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- input -->
        <input id="call_name" type="text" class="input-round big-input coup_input" name="name" placeholder="Full Name">
        <!-- end input -->
      </div>
    </div>
    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- input -->
        <input id="call_email" type="text" class="input-round big-input coup_input" name="email" placeholder="Email">
        <!-- end input -->
      </div>
    </div>
    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- input -->
        <input id="call_phone" type="text" class="input-round big-input coup_input" name="email" placeholder="Phone Number">
        <!-- end input -->
      </div>
    </div>

    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->
        <!-- end label -->
        <!-- select -->
        <div class="select-style input-round big-input select-style2">
          <select id="call_country" class="coup_select">
            <option value="">Country</option>
            <option value="brazil">Brazil</option>
            <option value="france">France </option>
            <option value="germany">Germany</option>
            <option value="india">India</option>
            <option value="japan">Japan</option>
          </select>
        </div>
        <!-- end select -->
      </div>
    </div>
    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- input -->
        <input id="call_budget" type="text" class="input-round big-input coup_input" name="email" placeholder="Mention your estimated budget? ">
        <!-- end input -->
      </div>
    </div>
    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- select -->
        <div class="select-style input-round big-input select-style2">
          <select id="call_service" class="coup_select">
            <option value="">Choose a Service</option>
            <option value="web-design">Web Design</option>
            <option value="graphic-design-branding">Graphic Design/Branding</option>
            <option value="seo">SEO</option>
            <option value="sem">SEM</option>
            <option value="smm">SMM</option>
            <option value="mobile-application">Mobile Application</option>
            <option value="seat-outsourcing">Seat Outsourcing</option>
          </select>
        </div>
        <!-- end select -->
      </div>
    </div>

    <div class="col-md-12 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- select -->
        <div class="select-style input-round big-input select-style2">
          <textarea id="call_message" placeholder="Message" rows="" cols="" name=""></textarea>
        </div>
        <!-- end select -->
      </div>
    </div>
    <div class="clear-both"></div>
    <div class="form-group">
      <!-- required  -->
      <span class="required-field margin-two white-text">*Please complete all fields correctly</span>
      <!-- end required  -->
      <!-- button  --><button id="call_form" type="submit" class="btn btn-black btn-medium2 btn-round margin-one" style="background-color:#c1c1c1;">Submit</button>
      <!-- end button  -->
    </div>
    <!-- </form> -->
  </div>
</div>

Answers

to submit a form without reloading you would have to use ajax
so try adding this, giving your form id = formid

<script>
$('#fromid').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
    data: $(this).serialize(), // get the form data
    type: $(this).attr('method'), // GET or POST
    url: $(this).attr('action'), // the file to call
    success: function(response) { // on success..
        if (response=="ok") {
            window.location.href = "dashboard.php";
        }else{
            $('#created').html(response); // update the DIV
            setTimeout(function() {
                $('#created').fadeOut("slow");
            }, 20000 );
        }
    }
});
return false; // cancel original event to prevent form submitting
});
</script>

- JoseMarques
- April 30, 2017 at 2:53 am
- 0 votes
0
First try doing this, I had the same problem and it worked out.

Your AJAX data:
```
$.ajax({
        url: url,
        dataType: "json",
        data: {
              "disc_name": disc_name_val,
               "disc_email": disc_email_val,
               "disc_country": disc_country_val

         },
...
```
In your PHP:
```
$disc_name = $_POST['disc_name']; 
...
```
After doing this you need to do more verify that the data is being sent correctly.

You can verify that the data is being sent correctly by checking the console of your browser.

More errors:

In your php to handle strings, you should do this:
```
$msgToSend = "Name:".$senderName."n";
 $msgToSend .= "Email:".$senderEmail."n";
 $msgToSend .= "Phone:".$senderPhone."n";
...
```
One more error:

You are sending POST and using GET to receive. You have to use POST or GET.
```
if ( isset($_GET["ajax"]) )  
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

unable to write PHP for on-page Form submission – SEO

Answers