Modal Notification Appear On Form Send, Foundation/Abide.js - javascript

I'm doing something very similar to this site here. When you send the form that is in in the footer, a modal window appears upon successful sending that thanks the user for submitting a form. I've built a site in Foundation and am validating the fields using Abide.js.
Everything was working this morning until I tried using different AJAX/jQuery methods to have a message appear on the same page where the form is instead of the modal. Now that I'm trying to do the modal, my form isn't working at all.
Here's my form's HTML:
<form id="form-contact" name="form-contact" action="include/contact-form-send.php" method="post" data-abide>
<div class="row">
<div class="large-12 columns">
<input id="contact-name" name="name" type="text" placeholder="Full Name" pattern="alpha" required />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input id="contact-email" name="email" type="text" placeholder="Email Address" pattern="email" required />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input id="contact-phone" name="phone" type="text" placeholder="Phone Number" pattern="number" required />
</div>
</div>
<div class="row">
<div class="large-6 medium-6 small-12 columns" id="form-left">
<input id="contact-security" name="security" type="text" placeholder="10 - 3 =" pattern="[7]" required />
</div>
<div class="large-6 medium-6 small-12 columns" id="form-right">
<input type="submit" value="submit" class="button green-button" id="form-send" />
</div>
</div>
PHP:
$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$to = "example#email.com";
$subj = "The Rivers Quick Contact Request";
$mess = "The following person has filled out the quick contact form on The Rivers website:
Name: $name
Email: $email
Phone: $phone
";
$headers = "From: info#therivers.com" . "\r\n" .
"CC:example#email.com";
$mailsend = mail($to,$subj,$mess,$headers);
And ideally the line of JS that would help the modal appear when the form is sent, using a function as defined by Foundation here.
$(document).ready(function() {
$('#form-contact').on('valid.fndtn.abide', function() {
$('.modal').css({'opacity':'1'});
});
});
It's my understanding that the Abide.js should be taking care of all the validation, and then the PHP file will send the form to the specified email. I'm having a hard time figuring out where to go from here now that I've broken it.

I think we're missing too much code to be of much help :/
When I go to the provided link, your php error is at line 19, but there aren't 19 lines of php provided.
Have you syntax checked your php? If not, here's a php syntax checker.
Concerning calling the modal, have you tried foundation's reveal modal plugin? Check it out if you haven't.
Great looking site btw!

Related

404 Not Found Error when submitting form on website

I am trying to build a contact form that uses bootstrap form HTML structure and PHP to control the backend validation and send the form information to my email.
Right now whenever I hit the submit button, I get a 404 Not Found Error which I assume has to do with the HTML not communicating the correct way with my PHP code. My website is 100% live (being hosted through NameCheap), and have been using cPanel's File Manager to upload all HTML, CSS, Image, and PHP files. I followed a Youtube tutorial on what the PHP should look like to validate my form's data and send it to my email.
I hadn't tried the $invalid_class_name aspect of the code yet, as I was trying to get the data to pass successfully first. I have the contact-form.php file in the same location as my HTML file, but I am wondering if I need to save my index.html file as a PHP file to make this work or an extra PHP plug-in on my website.
I have this PHP code included in HTML right above my form code
<?php
if($message_sent);
?>
<h3>Thanks,we'll be in touch</h3>
<?php
else:
?>
HTML
<form name=”contact_form” action=”contact-form.php” method=”POST” class="row g-4">
<div class="col-md-6">
<label for="first-name" class="form-label">First Name</label>
<input type="text" name="first-name" class="form-control" id="first-name" placeholder="John" required>
</div>
<div class="col-md-6">
<label for="last-name" class="form-label">Last Name</label>
<input type="text" name="last-name" class="form-control" id="last-name" placeholder="Smith" required>
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email</label>
<input type="email" name="email" class="form-control" id="email-address" required>
</div>
<div class="col-md-12">
<label for="notes" class="form-label">Notes</label>
<textarea class="form-control" name="notes" id="notes" rows="4" placeholder="Include any additional information"></textarea>
</div>
<div class="col-12">
<button type="submit" class="pcs-cta-button form-submit-button">Submit</button>
</div>
</form>
PHP
<?php
$message_sent = false;
if (isset($_POST['email'])) && $_POST['email'] !='') {
if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ){
//submit the form
$userFirstName = $_POST['first-name'];
$userLastName = $_POST['last-name'];
$userEmail = $_POST['email'];
$message = $_POST['notes'];
$to = "myemail#gmail.com";
$body = "";
$body .= "From: ".$userFirstName." ".$userLastName "\r\n";
$body .= "Email: ".$userFirstName. "\r\n";
$body .= "Notes: ".$message. "\r\n";
mail($to, $messageSubject, $body);
$message_sent = true;
}
else {
$invalid_class_name = "form-invalid";
}
}
?>
This is because you are using ” instead of " in action of the form (and generally form attributes)
Change this:
<form name=”contact_form” action=”contact-form.php” method=”POST” class="row g-4">
to this:
<form name="contact_form" action="contact-form.php" method="POST" class="row g-4">
Now your browser tries to GET "%E2%80%9Dcontact-form.php%E2%80%9D" instead of "contact-form.php". And yes, it tries GET (default method) not POST, as your form method is invalid as well (same reasons - wrong quotation marks).

How redirect php Window.location.href or Window.open () methods in php and JavaScript

I follow up a tutorial to learn more about php, in it's source code there is something which seems works at that time but not anymore. here is the code , please let me know what should i change in the code in order to make login process work (currently after entering a valid user name and pass and clicking login it freezes and show first page and not go to home.php
here is template/header.php:
<div class="container">
<!--Head wrap starts-->
<div id="head_wrap">
<!--Header starts-->
<div id="header">
<img src="images/logo.png" style="float:left;"/>
<form method="post" action="" id="form1">
<strong>Email:</strong>
<input type="email" id="email" name="email" placeholder="Email" required="required" />
<strong>Password:</strong>
<input type="password" id="pass" name="pass" placeholder="****" required="required"/>
<button type="submit" id="login">Login</button>
</form>
</div>
<!--Header ends-->
</div>
here is login.php
<?php
session_start();
include("includes/connection.php");
if(isset($_POST['login'])){
$email = mysqli_real_escape_string($con,$_POST['email']);
$pass = mysqli_real_escape_string($con,$_POST['pass']);
$get_user = "select * from users where user_email='$email' AND user_pass='$pass'";
$run_user = mysqli_query($con,$get_user);
$check = mysqli_num_rows($run_user);
if($check==1){
$email = mysqli_real_escape_string($con,$_POST['email']);
$_SESSION['user_email']=$email;
echo "<script>window.open('home.php','_self')</script>";
}
else {
echo "<script>alert('Passowrd or email is not correct!')</script>";
}
}
?>
please note i have tried
echo "<script> window.location.href = 'home.php';</script>";
instead of
echo "<script>window.open('home.php','_self')</script>";
and still doesn't work, since it's tutorial and i have search through stackoverflow can't find any answer i appreciate your help.
This is your HTML code but with a submit button. You say all files are located in the same folder so this should work. I did not make any changes to login.php but it should run when the page is submitted.
<div class="container">
<!--Head wrap starts-->
<div id="head_wrap">
<!--Header starts-->
<div id="header">
<img src="images/logo.png" style="float:left;"/>
<form method="post" action="login.php" id="form1">
<strong>Email:</strong>
<input type="email" id="email" name="email" placeholder="Email" required="required" />
<strong>Password:</strong>
<input type="password" id="pass" name="pass" placeholder="****" required="required"/>
<input type="submit" id="login" name="login" value="Login">
</form>
</div>
<!--Header ends-->
</div>
</div>
Edit: I can't debug your entire project but after looking over some things I see you are not using the 'name' attribute. When a page is submitted a name/value pair is sent in the $_POST array. If you have no 'name' attribute nothing is sent. Start by adding the 'name' attribute. I have modified the above HTML code to show you how.
You have to use header(...) function but don't forget that your page keep to run at the end. Don't forget to use with die to stop your script. ;)
die(header("Location: home.php"))
or after 5 seconds :
header("refresh: 5; url=home.php");
if($check==1){
$email = mysqli_real_escape_string($con,$_POST['email']);
$_SESSION['user_email']=$email;
return 1;
}
else {
return 0;
}
and javascript check status 1 and 0 then window.location.href and window.open use
Check in your file..
1) header() must be called before any actual output is sent, either by
normal HTML tags, blank lines in a file, or from PHP
2) Combine all your PHP codes and make sure you don't have any spaces
at the beginning of the file.
3) after header('location: home.php'); add exit();
4) after sesssion_start() add ob_start();

Getting Empty emails using html5 form and php

I have some html5 form fields on a website that I manage that push the data inputted by users to a php file that sends an email to a dedicated yahoo email for the site.
Here is the html:
<form role="form" method="post" action="php/contact-us.php" lang="es" id="contactForm">
<div class="row">
<div class="form-group col-lg-4 required">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" required placeholder="Enter Name" />
</div>
<div class="form-group col-lg-4 required">
<label for="email">Email</label>
<input type="email" class="form-control" name="email" required placeholder="Enter valid email" />
</div>
<div class="form-group col-lg-4">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" name="phone" placeholder="e.g. (000) 000 - 0000">
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12 required">
<label for="message">Mensaje</label>
<textarea class="form-control" rows="6" name="message" required placeholder="Write your message here"></textarea>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-default">Enviar</button>
</div>
</div>
</form>
Before, I did not have any validation on the fields, but I was getting empty emails with no user content so I thought people are just pushing the button without entering anything which I could also test myself. So I added the following validation JS, also eused webshim for unsupported browsers (and the required tags in the form elements above):
<script>
$('#contactForm input[type=text], select, textarea').on('change invalid', function() {
var field = $(this).get(0);
field.setCustomValidity('');
if (!field.validity.valid) {
field.setCustomValidity('Please fill required fields');
}
});
$('#contactForm input[type=email]').on('change invalid', function() {
var field = $(this).get(0);
field.setCustomValidity('');
if (!field.validity.valid) {
field.setCustomValidity('Enter a valid email');
}
});
</script>
Previously I was getting the inputted email form the user and setting it as the senders email but I was having issues with certain email addresses, etc. So I defaulted it to a random email that would always work and just included the users inputted email in the message. Here is my php file (contact-us.php):
<?php
// Set your email below
$to = "<dedicatedemail>#yahoo.com";
// Receive and sanitize input
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$subject = "Request from website";
$headers = "From: no-reply#gmail.com";
// set up email
$msg = "Sender Information \nName: " . $name . "\nEmail: " . $email . "\nPhone: " . $phone . "\n\n" . $message;
$msg = wordwrap($msg,70);
// mail
mail($to,$subject,$msg,$headers);
header('Location: ../contact-thank-you.html');
?>
So first let me say that everything is working. When I test the functionality here everything works. I am able to send an email from my ios device and my laptop and I have had a couple friends send from their android devices. The validation works for me so it does not let me send an email without at least filling the required fields out. I was getting empty emails before I added validation and setting the sender email to a default one. However I still get empty emails even after all the changes. When I test I cannot test across all platforms and browsers but I cannot force an empty email after I added checks. Is my validation failing somewhere? I feel like people are filling in the fields but somehow the email is coming in empty. When I say empty I mean the stuff that I programmatically add to the message comes through but the actual info that the user is suppose to input does not? How is this happening?
Always perform server side validation and confirm there is a POST incoming. Otherwise even something as simple as a webcrawler will tigger empty emails.
<?php
if (empty($_POST['email']) || empty($_POST['name'])) {
// Respond with a proper error message
...
} else {
// Send email
$to = "<dedicatedemail>#yahoo.com";
$name = $_POST['name'];
$email = $_POST['email'];
...
}

Submit form using one button, one to emailmeform using html script and another to my internal database

Im sorry for my bad english.
Im begineer with PHP and all coding method.
I've been searching this for a days and still cannot find what I need lack to my understanding especially with php, java or ajax.
I have an emailmeform form and I have my own form on 1 php file which I want when client submit the send button, it will save the data entered previously by client to my internal database and send it to emailmeform in the same time but I cannot make this happen.
The solution I think will work is maybe ajax or javascript, but since lack of my knowledge with those codes I cannot solve this issue by my self.
Here's my code (all in 1 php script page):
<?php
session_start();
include "connection/database.php";
$sql = mysql_query("SELECT * from tb_config");
$config = mysql_fetch_array($sql);
if (isset($_POST['send'])) {
$username = $_POST['element_1'];
$password = $_POST['element_2'];
$referral = $_POST['referral'];
$a = mysql_num_rows(mysql_query("SELECT * from tb_member where username='$username'"));
if (empty($username) || empty($password)) {
echo "<script> alert('Please fill all the required form!!'); </script>";
} else if (strlen($_POST['element_2']) < 6) {
echo "<script> alert('Password at least 6 digit!!!'); </script>";
} else {
$save = mysql_query("insert into tb_member(username,password) values ('$username','$password')");
exit;
}
}
?>
<!-- this is emailmeform scipt -->
<form id="emf-form" target="_parent" class="leftLabel" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/emf/to/ref">
<div id="emf-form-description"><h2>Form Register</h2></div>
</div>
<ul>
<li id="emf-li-0" class="emf-li-field emf-field-text data_container ">
<label class="emf-label-desc" for="element_0">Your Name</label>
<div class="emf-div-field"><input id="element_0" name="element_0" value="" size="30" type="text"
class="validate[optional]"/><div class="emf-div-instruction">Please fill your name</div></div>
<div class="emf-clear"></div>
</li><li id="emf-li-1" class="emf-li-field emf-field-text data_container ">
<label class="emf-label-desc" for="element_1">Username <span>*</span></label>
<div class="emf-div-field"><input id="username" name="element_1" value="<?php if (isset($_POST['element_1'])) { echo $_POST['element_1']; } ?>" size="30" type="text"
class="validate[required,length[6,15]]"/><div class="emf-div-instruction">At least 6 characters</div></div>
<div class="emf-clear"></div>
</li><li id="emf-li-2" class="emf-li-field emf-field-text data_container ">
<label class="emf-label-desc" for="element_2">Password <span>*</span></label>
<div class="emf-div-field"><input id="element_2" name="element_2" value="" size="30" type="text"
emf_mask_input="true"
class="validate[required,length[6,]]"/><div class="emf-div-instruction">At least 6 characters</div></div>
<li id="emf-li-post-button" class="middle">
<input value="Send" type="submit" name="send" onmouseover="return true;"/>
</li>
</ul>
<input name="element_counts" value="14" type="hidden" />
<input name="embed" value="forms" type="hidden" />
</form>
This script works and send to emailmeform, but wont submit any data to my internal database, BUT IF I change the action button to
<form method="post" action="">, this will submit to my internal database but not send to emailmeform. I want this work together, submit to my database and send it also to emailmeform.
I have struggling with this and still not found the answer.
Kindly please help.
Any help will be appreciated
Thanks
Refer this, it will demostrate how to insert data in database

jQuery PopUp from Form Submit (via .php email form)

I'm having trouble figuring out how to have a nice popup that thanks the user for their form submission. On my hosting site, I'm using a .php page that sends me an email (form mail feature) after the form has been submitting. In my website code, I have a redirect to a thank you page. But, I'm not sure how to have the popup go to the redirect thank you page (thankyou.html) so I can style it (instead of using the default browser popup). I still want to make sure the .php file is used to send to my gmail account.
Form in my website:
<div id="container-footer">
<form action="gdform.php" method="post" id="contact">
<fieldset class="wrapper"><legend>Contact</legend>
<input type="hidden" name="subject" value="Submission" />
<input type="hidden" name="redirect" value="/thankyou.html" />
<ul class="group">
<li class="name"><label for="name">Your Name</label> <input id="name" name="name" type="text" /></li>
<li class="email"><label for="email">Your Email</label> <input id="email" name="email" type="email" /></li>
<li class="message"><label for="message">Say Hello</label><textarea id="message" name="message"></textarea></li>
</ul>
<input class="send" name="submit" type="submit" value="Send" />
</fieldset>
</form>
<footer class="wrapper" id="colophon">
<p>©2014 all rights reserved.</p>
</footer>
</div>
gdform.php
<?php
$request_method = $_SERVER["REQUEST_METHOD"];
if($request_method == "GET"){
$query_vars = $_GET;
} elseif ($request_method == "POST"){
$query_vars = $_POST;
}
reset($query_vars);
$t = date("U");
$file = $_SERVER['DOCUMENT_ROOT'] . "/../data/gdform_" . $t;
$fp = fopen($file,"w");
while (list ($key, $val) = each ($query_vars)) {
fputs($fp,"<GDFORM_VARIABLE NAME=$key START>\n");
fputs($fp,"$val\n");
fputs($fp,"<GDFORM_VARIABLE NAME=$key END>\n");
if ($key == "redirect") { $landing_page = $val;}
}
fclose($fp);
if ($landing_page != ""){
header("Location: http://".$_SERVER["HTTP_HOST"]."/$landing_page");
} else {
header("Location: http://".$_SERVER["HTTP_HOST"]."/");
}
?>
thankyou.html (I'd like this in the nice jQuery or other than browser popup)
<h1>THANK YOU!</h1>
<p>Thank you for contacting me. I'll get back with you as soon as possible.</p>
You could probably make the popup using Jack Moore's jQuery Modal. Then, you can call that JS function with your PHP code.
I'm not the best in this field, so someone else can probably give a better, more definitive answer.

Categories

Resources