Cant get email FORM to work properly

General PHP Help
#1

Hey there! Thanks for taking the time and reading my post, I hope you can help me!

If i load the index_contact.html page it instantly sends me an email. Another problem is that after you filled in the imputs and click on send. It just stays on a blanc HTML page saying it is the .php file. But i just want it to go back to the index_contact.html and say thanks for contacting us. Or something like that

awaiting reactions and help.

Here is my HTML code

[code]

html, body { margin:0; padding:0; } Contact
Leidsche Rijn
Winkelcentrum 
    <div class="jumbotron">
        <div class="jumbobal01">
            <p id="contacttext01">Contact</p>
        </div>
		<a id="contacttext02">Heb jij een vraag? Stuur gerust een e-mail en wij proberen binnen 7 werkdagen jou vraag te beantwoorden.</a><br><br><br>
		
		<div id="contactforum">
			    <?php include("contact.php"); ?>
				<form name="contact-form" action="contact.php" method="POST" class="form1">
					<label for="field_name"><a>Naam:</a></label><br>
					<input type="text" id="naam" name="sender_name"/><br><br>
					<label for="field_email"><a>e-mail adres:</a></label><br>
					<input type="text" id="email" name="sender_email"/><br><br>
					<label for="field_phone"><a>Telefoonnummer:</a></label><br>
					<input type="text" id="telefoon" name="sender_phone"/><br><br>
					<label for="field_message"><a>Bericht:</a></label><br>
					<textarea style="resize: none;" id="bericht" name="sender_message"></textarea><br><br>
				<input type="submit" name="send_message" value="Verstuur">
				</form>
		</div>
    </div>
[/code]

Here is my PHP code.
[php]<?php
$mail_to = ‘[email protected]’; //dont worry i changed it for demonstration purposes

$name = $_POST['sender_name'];
$mail_from = $_POST['sender_email'];
$phone = $_POST['sender_phone'];
$message = $_POST['sender_message'];

$subject = 'Bericht van een bezoeker. ' . $name;

$body_message = 'From: ' . $name . "\r\n";
$body_message .= 'E-mail: ' . $mail_from . "\r\n";
$body_message .= 'Phone: ' . $phone . "\r\n";
$body_message .= 'Message: ' . $message;

$headers = 'From: ' . $mail_from . "\r\n";
$headers = 'Reply-To: ' . $mail_from . "\r\n";

$mail_sent = mail($mail_to, $subject, $body_message, $headers);

if ($mail_sent == true){ ?>
    <script language="javascript" type="text/javascript">
    alert('Bedankt voor het reageren, wij zullen binnen 3 werkdagen reageren.');
    window.location = 'index_contact.html';
    </script>
<?php } else { ?>
<script language="javascript" type="text/javascript">
    alert('Bericht niet verstuurd. Neem alstublieft contact op met [email protected]');
    window.location = 'index_contact.html';
</script>
<?php
}

?>
[/php]

And for the CSS file.

body {
    background-color: #f0f0f0;
    overflow-y: scroll;
}


#navbarul *{
    display: inline;
    
}

.navbar {
    border: 1px solid #A6CA60;
    border-radius: 3px;
    background-color: #A6CA60;
    overflow: hidden;
    position: relative;
    
}

.navbarheader a, visited{
    float: left;
    font-size: 30px;
    text-decoration: none;
    color: #4A4A4A;
    font-family: Courier;
    padding: 10px 10px 10px 10px;
    font-weight: bold;
}

.navbarheader a:hover{
    float: left;
    font-size: 30px;
    text-decoration: none;
    color: #7C7C7C;
    font-family: Courier;
    padding: 10px 10px 10px 10px;
    font-weight: bold;
}

.navbartext a, visited{
    float: right;
    font-size: 20px;
    text-decoration: none;
    color: #4A4A4A;
    font-family: Courier;
    padding: 10px 10px 10px 10px;
    border: 1px solid #A6CA60;
    margin-right: 10px;
}

.navbartext a:hover{
    background-color: #4A4A4A;
    font-weight: bold;
    float: right;
    font-size: 20px;
    text-decoration: none;
    color: #A6CA60;
    font-family: Courier;
    padding: 10px 10px 10px 10px;
    border: 1px solid #4A4A4A;
    border-radius: 3px;
    margin-right: 10px;
}

.jumbotron {
    border: 2px solid #A6CA60;
    background-color: white;
    border-radius: 5px;
    height: 500px;
    margin: 35px 20px 0px 20px;
    text-align: center;
    overflow: hidden;
}

.jumbotronpicture {
    border: 2px solid #A6CA60;
    border-radius: 5px;
    margin-top: 10px;
}

.jumbobal01 {
    border: 1px solid white;
    height: auto;
    width: auto;
    margin: 10px 50px 0px 50px
}

.jumbobal01 p {
    font-size: 30px;
    color: #4A4A4A;
    font-family: Courier;
}

.infodiv {
    border: 2px solid #A6CA60;
    background-color: white;
    font-family: Arial;
    height: 310px;
    border-radius: 5px;
    margin: 40px 40px 20px 40px;
    padding: 10px 15px 10px 15px;
    text-align: left;
}

#contacttext01 {
	font-weight: bold;
}

#contacttext02 {
	font-family: Arial;
	font-size: 15px;
	margin: 0px 15px 0px 15px;
}


#form1 a {
	font-family: Courier;
}

.form1 a {
    font-family: Courier;
}

/*AANGEPASTE NAVBAR KOPJES HIERONDER

#contact_navbar {
    background-color: #4A4A4A;
    font-weight: bold;
    float: right;
    font-size: 20px;
    text-decoration: none;
    color: #A6CA60;
    font-family: Courier;
    padding: 10px 10px 10px 10px;
    border: 1px solid #4A4A4A;
    border-radius: 3px;
    margin-right: 10px;
}
#contact_navbar:hover {
    background-color: #6E6E6E;
    font-weight: bold;
    float: right;
    font-size: 20px;
    text-decoration: none;
    color: #A6CA60;
    font-family: Courier;
    padding: 10px 10px 10px 10px;
    border: 1px solid #6E6E6E;
    border-radius: 3px;
    margin-right: 10px;
}

#openingstijden_navbar, #informatie_navbar, #winkels_navbar {
    float: right;
    font-size: 20px;
    text-decoration: none;
    color: #4A4A4A;
    font-family: Courier;
    padding: 10px 10px 10px 10px;
    border: 1px solid #A6CA60;
    margin-right: 10px;
}



#openingstijden_navbar:hover, #informatie_navbar:hover, #winkels_navbar:hover {
    background-color: #4A4A4A;
    font-weight: bold;
    float: right;
    font-size: 20px;
    text-decoration: none;
    color: #A6CA60;
    font-family: Courier;
    padding: 10px 10px 10px 10px;
    border: 1px solid #4A4A4A;
    border-radius: 3px;
    margin-right: 10px;
}
*/[/code]

[b]Little icons i have..[/b]
[code]@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-el5mdn');
	src:url('fonts/icomoon.eot?#iefix-el5mdn') format('embedded-opentype'),
		url('fonts/icomoon.woff?-el5mdn') format('woff'),
		url('fonts/icomoon.ttf?-el5mdn') format('truetype'),
		url('fonts/icomoon.svg?-el5mdn#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-office:before {
	content: "\e601";
}
.icon-books:before {
	content: "\e600";
}
.icon-envelope:before {
	content: "\e603";
}
.icon-calendar:before {
	content: "\e602";
}
#2

You don’t need to include the contact.php file in the html file - unless it performs some other functionality.

Either remove the include line and use the action attribute of the form to point at contact.php or
wrap the php code in a if clause.
[php]if(isset($_POST[‘send_message’])) {
//
// place contact.php code here
//
}[/php]

Hope that makes sense,
Red :wink:

#3

Thanks for reacting, i actually got it to work already, but wanted to see what the reaction here was. Link to the site here, if you want to check it out: https://clean-bagel.codio.io/HTMLA/index.html

For my next problem, I really hope you can help me with this. Because Google isn’t really helping.
I want, if i re size the page. The navbar to change to a button. Now i think i know how to do the button thing. But i don’t know how to get page width and process it. Important! I don’t want to use Bootstrap.

Thanks in advance,

M4rsH_

#4

take a look here: www.redscouse.com (it’s a site i run)
drag the page smaller/wider and watch what happens to the navbar.

I achieved this by using media queries in CSS like so:

/* This is our starting block */
.nav {
    font-size: 10px;
}

/* now i'm addressing screensizes of 320px or more */
@media only screen and (min-width: 320px) {
    .nav {
        font-size: 12px;
    }
}

/* now i'm addressing screensizes of 640px or more */
@media only screen and (min-width: 640px) {
    .nav {
        font-size: 16px;
    }
}

Using css like this means i can have different layouts for different screen sizes.
Hope that helps,
Red :wink:

PS: Remember to start with a small screen and progressively get wider, not the other way around :wink:

#5

Thanks, I will implement it later today or tomorrow, you will hear from me. :smiley:

#6

No worries, happy to help :wink:

#7

I can see some use for this, but you can’t use it as if else statement. So if it is smaller than 1200px display this navbar(button) and if it is larger than 1200px display the full button navbar. And all of this real time, without relpoading the page. Do you know how to do that? :smiley:

#8 
/* screensize of 1200px or less */
.nav {
    background: url(/path/to/image.jpg);
}

/* screensizes of 1200px or more */
@media only screen and (min-width: 1200px) {
    .nav {
        background: url(/path/to/other_image.png);
    }
}

Hope that helps,
Red :wink:

Sponsor our Newsletter | Privacy Policy | Terms of Service