Redirect to original page after php sumbmit contact form message + 3 columns Bootstrap 4

Redirect to original page after php sumbmit contact form message + 3 columns Bootstrap 4
0.0 0

#1

I’ve been searching like crazy to figure this out. I have a contact form at the bottom pf a page
http://leggacysoccer.com/#section4 After a successful transmission the message “Contact form successfully submitted. Thank you, I will get back to you soon!” appears on contact.php page. I really would like this to go back to the main original page.

html code

     <div class="container-fluid">
     <section id="section4"> 
     <h2>Contact</h2>
     <form id="contact-form" method="post" action="contact.php" role="form">
     <div class="messages"></div>
     <div class="controls">
     <div class="row">
     <div class="col-sm">
     <div class="form-group">
     <label for="form_name">Name *</label>
     <input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *" required="required" data-error="name is required.">
     <div class="help-block with-errors"></div>
     </div>
     </div>
      </div>
     <div class="col-sm">
     <div class="form-group">
     <label for="form_email">Email *</label>
     <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
     <div class="help-block with-errors"></div>
     </div></div>
      <div class="col-sm">
     <div class="form-group">
     <label for="form_phone">Phone</label>
     <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone number">
     <div class="help-block with-errors"></div>
     </div></div></div>
     <div class="clearfix"></div>
     <div class="row">
     <div class="col-md-12">
     <div class="form-group">
     <label for="form_message">Message *</label>
     <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="send a message."></textarea>
     <div class="help-block with-errors"></div>
     </div>
     </div>
     <div class="col-md-12">
     <input type="submit" class="btn btn-warning btn-send" value="Send message">
     </div>
     </div>
     <div class="row">
     <div class="col-md-12">
     <p class="text-muted"><strong>*</strong> These fields are required.</p>
     </div></div>
     </form>							
     </section>
     </div>

#2

I also tried to make the top part of the form have 3 columns, using the Bootstrap 4 https://getbootstrap.com/docs/4.0/layout/grid/

that didn’t work, it appears to be on top of each other, like one column regardless of screen size


#3

To perform a redirect after processing the POST request you should use

header(‘Location: http://domain/homepage’);


#4

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard.


#5

thanks, I always have trouble with that.


#6

Where exactly do I put that line? I’m sorry, I;m just new to learning php. Do I need to do anything else after to get this all to work? I made this site for my 20 yr old son who just started this business. I’m happy because at 20 I wasn’t there yet.

Here is the contact.php code

<?php

// configure
$from = 'contact form <Alex@LeggacySoccer.com>';
$sendTo = 'contact form <Alex@LeggacySoccer>';
$subject = 'New message from contact form';
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message'); // array variable name => Text to appear in the email
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';
$errorMessage = 'There was an error while submitting the form. Please try again later';

// let's do the sending

try
{
    $emailText = "You have new message from contact form";

    foreach ($_POST as $key => $value) {

        if (isset($fields[$key])) {
            $emailText .= "$fields[$key]: $value\n";
        }
    }

    $headers = array('Content-Type: text/html; charset="UTF-8";',
        'From: ' . $from,
        'Reply-To: ' . $from,
        'Return-Path: ' . $from,
    );
    
    mail($sendTo, $subject, $emailText, implode("\n", $headers));

    $responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
    $responseArray = array('type' => 'danger', 'message' => $errorMessage);
}

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');

    echo $encoded;
}
else {
    echo $responseArray['message'];
}


#7

If you want to submit the form behind the scenes and display a temporary message, you could do the following in your JavaScript:

$(document).ready(function() {
  $("#submit-button").on('click', function(e) {
    e.preventDefault(); // Prevent form submission
	
	// you would need to set the following values from your form fields
	var name = $("#form_name").val();
	var email = $("#form_email").val();
	var phone = $("#form_phone").val();
	var message = $("#form_message").val();
    var dataString = 'surname='+ name + '&email=' + email + '&phone=' + phone + '&message=' + message;
	
    $.ajax({
      type: "POST",
      url: "contact.php",
      data: dataString,
      success: function() {
		$(".messages").html("Thank you for contacting me.  I will be in touch soon.").css("visibility", "visible");
        $("#submit-button").trigger("reset")
		$('.messages').fadeTo( "slow", 1 ).fadeTo(3000, 0);
      }
    });
  });
});

You would also want to add a class to your CSS:

.messages {
  visibility:hidden;
}

#8

I am getting an error that says “Internal Server Error The server encountered an internal error or misconfiguration and was unable to complete your request.Please contact the server administrator, and inform them of the time the error occurred, and anything you might have done that may have caused the error.More information about this error may be available in the server error log.”

:sob: I have MS (multiple sclerosis) for almost 20 yrs now. It has been progressing so much and my memory isn’t quite right all the time now. I just want to get this done for my son. Sorry for all the troubles.

this is a live link to his website http://leggacysoccer.com

this is the contact form html

<div class="container">
    <form id="contact-form" method="post" action="contact.php" role="form">
        <div class="messages"></div>
        <div class="controls">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="form_name">Name *</label>
                        <input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *" required="required" data-error="name is required.">
                        <div class="help-block with-errors"></div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="form_email">Email *</label>
                        <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                        <div class="help-block with-errors"></div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="form_phone">Phone</label>
                        <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone number">
                        <div class="help-block with-errors"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="form_message">Message *</label>
                    <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="send a message."></textarea>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="col-md-12">
                <input type="submit" class="btn btn-warning btn-send" value="Send message">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="text-muted"><strong>*</strong> These fields are required.</p>
            </div>
        </div>
    </form>
</div>			

this is contact.php

<?php

// configure
$from = 'contact form <mlegg10.@gmail.com>';
$sendTo = 'contact form <mlegg10.@gmail.com>';
$subject = 'New message from contact form';
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message'); // array variable name => Text to appear in the email
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';
$errorMessage = 'There was an error while submitting the form. Please try again later';

// let's do the sending

try
{
    $emailText = "You have new message from contact form";

    foreach ($_POST as $key => $value) {

        if (isset($fields[$key])) {
            $emailText .= "$fields[$key]: $value\n";
        }
    }

    $headers = array('Content-Type: text/html; charset="UTF-8";',
        'From: ' . $from,
        'Reply-To: ' . $from,
        'Return-Path: ' . $from,
    );
    
    mail($sendTo, $subject, $emailText, implode("\n", $headers));

    $responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
    $responseArray = array('type' => 'danger', 'message' => $errorMessage);
}

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');

    echo $encoded;
}
else {
    echo $responseArray['message'];
}
$(document).ready(function() {
  $("#submit-button").on('click', function(e) {
    e.preventDefault(); // Prevent form submission
	
	// you would need to set the following values from your form fields
	var name = $("#form_name").val();
	var email = $("#form_email").val();
	var phone = $("#form_phone").val();
	var message = $("#form_message").val();
    var dataString = 'surname='+ name + '&email=' + email + '&phone=' + phone + '&message=' + message;
	
    $.ajax({
      type: "POST",
      url: "contact.php",
      data: dataString,
      success: function() {
		$(".messages").html("Thank you for contacting me.  I will be in touch soon.").css("visibility", "visible");
        $("#submit-button").trigger("reset")
		$('.messages').fadeTo( "slow", 1 ).fadeTo(3000, 0);
      }
    });
  });
});

this is the contact.js

$(function () {

    $('#contact-form').validator();

    $('#contact-form').on('submit', function (e) {
        if (!e.isDefaultPrevented()) {
            var url = "contact.php";

            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function (data)
                {
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;

                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                    if (messageAlert && messageText) {
                        $('#contact-form').find('.messages').html(alertBox);
                        $('#contact-form')[0].reset();
                    }
                }
            });
            return false;
        }
    })
});

$(document).ready(function() {
  $("#submit-button").on('click', function(e) {
    e.preventDefault(); // Prevent form submission
	
	// you would need to set the following values from your form fields
	var name = $("#contact-form").val();
	var email = $("#form_email").val();
	var phone = $("#form_phone").val();
	var message = $("#form_message").val();
    var dataString = 'surname='+ name + '&email=' + email + '&phone=' + phone + '&message=' + message;
	
    $.ajax({
      type: "POST",
      url: "contact.php",
      data: dataString,
      success: function() {
		$(".messages").html("Thank you for contacting me.  I will be in touch soon.").css("visibility", "visible");
        $("#submit-button").trigger("reset")
		$('.messages').fadeTo( "slow", 1 ).fadeTo(3000, 0);
      }
    });
  });
});

#9

I will help you out with the JavaScript code. When I gave you the code earlier, I meant for that to replace what you had. Now you have two sections of code that load when the DOM is ready.

One thing I forgot to include on my last post was you will need to add an id named “submit-button” to your form button. The line in my code references the submit button.

$("#submit-button").on('click', function(e) {

#10

I changed my code to do what you said to do but still something is wrong. Now when I hit submit the contact.php opens with this code shown

    $(function () {

    $('#contact-form').validator();

    $('#contact-form').on('submit', function (e) {
    if (!e.isDefaultPrevented()) {
    var url = "contact.php";

    $.ajax({
    type: "POST",
    url: url,
    data: $(this).serialize(),
    success: function (data)
    {
    var messageAlert = 'alert-' + data.type;
    var messageText = data.message;

    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert"     aria-hidden="true">&times;</button>' + messageText + '</div>';
    if (messageAlert && messageText) {
    $('#contact-form').find('.messages').html(alertBox);
    $('#contact-form')[0].reset();
    }
    }
    });
    return false;
    }
    })
    });

    $(document).ready(function() {

    $("#submit-button").on('click', function(e) {
    e.preventDefault(); // Prevent form submission
	
    // you would need to set the following values from your form fields
    var name = $("#contact-form").val();
    var email = $("#form_email").val();
    var phone = $("#form_phone").val();
    var message = $("#form_message").val();
    var dataString = 'surname='+ name + '&email=' + email + '&phone=' + phone + '&message=' + message;
	
    $.ajax({
    type: "POST",
    url: "contact.php",
    data: dataString,
    success: function() {
    $(".messages").html("Thank you for contacting me.  I will be in touch soon.").css("visibility", "visible");
    $("#submit-button").trigger("reset")
    $('.messages').fadeTo( "slow", 1 ).fadeTo(3000, 0);
    }
    });
    });
    });

#11

That entire section of code is the code I gave you to use in your index.htm page. Take it out of the contact.php.