I make a email sender, and I want if the message sent, so that the text is not displayed but that a notification box is displayed. I want that if the form is submitted, a notification box will pop up. I do not know exactly how put html in php. Thanks.
Here is my code:
<?php
if(isset($_POST['submit'])){
$to = "[email protected]";
$from = $_POST['email'];
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$subject = "New form entry";
$subject2 = "Form copy";
$message = $first_name . " " . $last_name . " wrote: " . "\n\n" . $_POST['message'];
$message2 = "Here is copy:" . $first_name . "\n\n" . $_POST['message'];
$headers = "From:" . $from;
$headers2 = "From:" . $to;
mail($to,$subject,$message,$headers);
mail($from,$subject2,$message2,$headers2);
echo '<div class='content'>
<div class="alert alert-success alert-white rounded">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<div class="icon"><i class="fa fa-check"></i></div>
<strong>Sent!</strong> Message was sucessfully sent!
</div>
</div>';
}
?>
And here is CSS for notification box:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family:'Open Sans',sans-serif;
line-height:normal;
padding:0;
margin:0;
}
.content {
padding:0;
margin:10% 15%;
}
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .2;
}
.close:hover,.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .5;
}
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert h4 {
margin-top: 0;
color: inherit;
}
.alert .alert-link {
font-weight: bold;
}
.alert>p,.alert>ul {
margin-bottom: 0;
}
.alert>p+p {
margin-top: 5px;
}
.alert-dismissable {
padding-right: 35px;
}
.alert-dismissable .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-success .alert-link {
color: #2b542c;
}
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
}
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-info .alert-link {
color: #245269;
}
.alert-warning {
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b;
}
.alert-warning hr {
border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
color: #66512c;
}
.alert-danger {
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442;
}
.alert-danger hr {
border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
color: #843534;
}
.alert {
border-radius: 0;
-webkit-border-radius: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.11);
}
.alert .sign {
font-size: 20px;
vertical-align: middle;
margin-right: 5px;
text-align: center;
width: 25px;
display: inline-block;
}
.alert-success {
background-color: #dbf6d3;
border-color: #aed4a5;
color: #569745;
}
.alert-info {
background-color: #d9edf7;
border-color: #98cce6;
color: #3a87ad;
}
.alert-warning {
background-color: #fcf8e3;
border-color: #f1daab;
color: #c09853;
}
.alert-danger {
background-color: #f2dede;
border-color: #e0b1b8;
color: #b94a48;
}
.alert-white {
background-image: linear-gradient(to bottom,#FFFFFF,#F9F9F9);
border-top-color: #d8d8d8;
border-bottom-color: #bdbdbd;
border-left-color: #cacaca;
border-right-color: #cacaca;
color: #404040;
padding-left: 61px;
position: relative;
}
.alert-white .icon {
text-align: center;
width: 45px;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: 1px solid #bdbdbd;
}
.alert-white .icon:after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display: block;
content: '';
width: 10px;
height: 10px;
border: 1px solid #bdbdbd;
position: absolute;
border-left: 0;
border-bottom: 0;
top: 50%;
right: -6px;
margin-top: -5px;
background: #fff;
}
.alert-white.rounded {
border-radius: 3px;
-webkit-border-radius: 3px;
}
.alert-white.rounded .icon {
border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
}
.alert-white .icon i {
font-size: 20px;
color: #FFF;
left: 12px;
margin-top: -10px;
position: absolute;
top: 50%;
}
.alert-white.alert-danger .icon,.alert-white.alert-danger .icon:after {
border-color: #ca452e;
background: #da4932;
}
.alert-white.alert-info .icon,.alert-white.alert-info .icon:after {
border-color: #3a8ace;
background: #4d90fd;
}
.alert-white.alert-warning .icon,.alert-white.alert-warning .icon:after {
border-color: #d68000;
background: #fc9700;
}
.alert-white.alert-success .icon,.alert-white.alert-success .icon:after {
border-color: #54a754;
background: #60c060;
}
My Answer:
To display a notification box instead of the text message, you can use JavaScript to show the notification box after the form is submitted. Here is an example of how you can achieve this:
html
Email Sender
In this code, the notification box is initially hidden with `style="display: none;"`. When the form is submitted and the email is sent successfully, the JavaScript code inside the PHP block will change the display style of the notification box to `block`, making it visible to the user. The `closeNotification()` function allows the user to close the notification box by clicking the close button.
Rate this post
3 of 5 based on 2636 votesComments