The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Email Web Form Not Working. HTML / PHP
Spitfire
post Apr 18 2015, 03:39 AM
Post #1





Group: Members
Posts: 4
Joined: 18-April 15
Member No.: 22,502
Hi

I'm trying to get a web form to work without success. When I press 'Submit' nothing happens.

The form came came from a template I purchased. In the documentation it gives these instructions.



QUOTE
To activate the contact form you need to include contact from script in the <head> section of HTML file and copy "bat" folder to your website root folder. The "bat" folder should contain 1 file: MailHandler.php

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

<script type="text/javascript" src="js/forms.js"></script>

After this you should initialize your contact form on the $(window).load() : event


<script type="text/javascript">

$(window).load(function(){

$('#form1').forms({

ownerEmail:'#'

})

})

</script>


Use the following parameters for initialization:

ownerEmail – the Email address the data will be sent to;
successShow – the period of time in milliseconds, during which the Send Message will be shown and after which the fields will be emptied, by default it is 4000 - 4 sec.



I have incorporated the contact form script in the <head> section of the contact form page and the ownerEmail address in the PHP file but am unsure about where to put this: 'After this you should initialize your contact form on the $(window).load() : event'

and

'successShow – the period of time in milliseconds, during which the Send Message will be shown and after which the fields will be emptied, by default it is 4000 - 4 sec.'


Here is my <head> section:

QUOTE
<head>
<title>Contact</title>
<meta charset="utf-8">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="description" content="">
<meta name="keywords" content="r">
<meta name="author" content="">
<meta name = "format-detection" content = "telephone=no" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--CSS-->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font/font-awesome.css">
<!--JS-->
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/forms.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript">
<!--[if lt IE 8]>
<div style='text-align:center'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/></a></div>
<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie.css">
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>


Here is the form HTML:

QUOTE
<h2>Contact form</h2>
<form id="contact-form">
<div class="success"> Contact form submitted! <strong>We will be in touch soon.</strong> </div>
<fieldset>
<div>
<div class="form-div-1">
<label class="name">
<input type="text" value="Name:">
<br>
<span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="form-div-2">
<label class="email">
<input type="email" value="E-mail:">
<br>
<span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="form-div-3">
<label class="phone">
<input type="tel" value="Phone:">
<br>
<span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span> </label>
</div>
</div>
<div>
<label class="message">
<textarea>Message:</textarea>
<br>
<span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span>
</label>
</div>
<div class="btns">
<a href="#" data-type="submit" class="btn btn-link">Submit<em class="icon-double-angle-right"> </em></a>
</div>
</fieldset>
</form>
</article>
</div>
</div>


Here is the MailHandler PHP:

QUOTE
<?php
$owner_email = $_POST["Email address inserted here"];
$headers = 'From:' . $_POST["email"] . "\r\n" . 'Reply-To: ' . $email . "\r\n" . 'Content-Type: text/plain; charset=UTF-8' . "\r\n";
$subject = 'A message from your site visitor ' . $_POST["name"];
$messageBody = "";

if($_POST['name']!='nope'){
$messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['email']!='nope'){
$messageBody .= '<p>Email Address: ' . $_POST['email'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}else{
$headers = '';
}
if($_POST['state']!='nope'){
$messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['phone']!='nope'){
$messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['fax']!='nope'){
$messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['message']!='nope'){
$messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";
}

if($_POST["stripHTML"] == 'true'){
$messageBody = strip_tags($messageBody);
}

try{
if(!mail($owner_email, $subject, $messageBody, $headers)){
throw new Exception('mail failed');
}else{
echo 'mail sent';
}
}catch(Exception $e){
echo $e->getMessage() ."\n";
}
?>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 18 2015, 06:34 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
This form seems to be complicated mix of jQuery and PHP. Is the full documentation available on the web somewhere?

QUOTE(Spitfire @ Apr 18 2015, 10:39 AM) *

am unsure about where to put this[/b]: 'After this you should initialize your contact form on the $(window).load() : event'

I suppose it's the jQuery snippet above:

CODE
<script type="text/javascript">
$(window).load(function(){
$('#form1').forms({
ownerEmail:'#'
})
})
</script>

--try adding the above in the HEAD section. Maybe "form1" should be changed to your HTML form's ID, but I assume that a readymade template would use matching values by default. unsure.gif

QUOTE
and

'successShow – the period of time in milliseconds, during which the Send Message will be shown and after which the fields will be emptied, by default it is 4000 - 4 sec.'

No idea, maybe it's in "forms.js".

QUOTE

<script type="text/javascript">
<!--[if lt IE 8]>
<div style='text-align:center'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/></a></div>
<![endif]-->
</head>

The above is invalid, SCRIPT (or HEAD) can't contain a DIV or an A element.

QUOTE
Here is the form HTML:

The form fields lack NAME attributes, that PHP needs. Maybe they are inserted by the jQuery script for some reason, can't say.

QUOTE
$owner_email = $_POST["Email address inserted here"];

I don't think you should insert the email address there, rather that's where the value of the email form field's NAME attribute should appear (which is missing).

My guess is that your email address should replace the # character in the jQuery snippet above:

CODE
ownerEmail:'#'

but I can't say for sure.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Spitfire
post Apr 18 2015, 07:33 AM
Post #3





Group: Members
Posts: 4
Joined: 18-April 15
Member No.: 22,502
QUOTE(Christian J @ Apr 18 2015, 06:34 AM) *

This form seems to be complicated mix of jQuery and PHP. Is the full documentation available on the web somewhere?

QUOTE(Spitfire @ Apr 18 2015, 10:39 AM) *

am unsure about where to put this[/b]: 'After this you should initialize your contact form on the $(window).load() : event'

I suppose it's the jQuery snippet above:

CODE
<script type="text/javascript">
$(window).load(function(){
$('#form1').forms({
ownerEmail:'#'
})
})
</script>

--try adding the above in the HEAD section. Maybe "form1" should be changed to your HTML form's ID, but I assume that a readymade template would use matching values by default. unsure.gif

QUOTE
and

'successShow – the period of time in milliseconds, during which the Send Message will be shown and after which the fields will be emptied, by default it is 4000 - 4 sec.'

No idea, maybe it's in "forms.js".

QUOTE

<script type="text/javascript">
<!--[if lt IE 8]>
<div style='text-align:center'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/></a></div>
<![endif]-->
</head>

The above is invalid, SCRIPT (or HEAD) can't contain a DIV or an A element.

QUOTE
Here is the form HTML:

The form fields lack NAME attributes, that PHP needs. Maybe they are inserted by the jQuery script for some reason, can't say.

QUOTE
$owner_email = $_POST["Email address inserted here"];

I don't think you should insert the email address there, rather that's where the value of the email form field's NAME attribute should appear (which is missing).

My guess is that your email address should replace the # character in the jQuery snippet above:

CODE
ownerEmail:'#'

but I can't say for sure.


These are the only instructions I have in the documentation. The form HTML (index.4) and the MailHandler.php (in bat folder) were already incorporated into the site template I purchased.


QUOTE
Contact Form manual
Contact Form gives visitors the opportunity to send messages to the site-owner. The contact data (Name, Email, Text message) is submitted into the corresponding fields. It can be very beneficial if the visitor does not have an Email Client installed or uses someone else's computer (e.g. in the internet club). For this reason we have developed the universal contact form that sends messages to the email specified by the site owner, has the expandable number of fields and transmissible data verification feature.
Contact Form Sample





Enter Message:

ClearSubmit
Description
The HTML structure inside the form is flexible, the only condition is that all the fields (input, textarea HTML elements) should be placed inside the label tags that have class corresponding to their type.

There are following classes/types by default:

name – the User's Name. Validation: digits are disallowed, not less than 2 symbols;
email – the User's Email;
state – Country (Area). Validation: digits are disallowed, not less than 2 symbols;
phone – Phone. Validation: digits only, not less than 5 symbols. Additional acceptable not alphabetical symbols: "space", "+" and "-";
fax – Fax. Validation: digits only, not less than 5 symbols. Additional acceptable not alphabetical symbols: "space", "+" and "-";
message – Message. Validation: any symbols, not less than 20 symbols.
notRequired – This class is used as a pointer for the optional fields while filling the forms out.

The Code:


<label class="name">

<input type="text" value="Enter Name:">

</label>

<label class="email">

<input type="email" value="Enter Email:">

</label>

<label class="state notRequired">

<input type="text" value="Enter Your State:">

</label>

<label class="phone">

<input type="tel" value="Enter Phone:">

</label>

<label class="fax">

<input type="tel" value="Enter Fax:">

</label>

<label class="message">

<textarea>Enter Message:</textarea>

</label>



Also label tag mentioned above can contain nested span elements with classes error and empty, which include the error message in case the data in the field is specified incorrectly or the field is just empty.
The Code:


<label class="name">

<input type="text" value="Enter Name:">

<span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span>

</label>

<label class="email">

<input type="email" value="Enter Email:">

<span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span>

</label>

<label class="state notRequired">

<input type="text" value="Enter Your State:">

<span class="error">*This is not a valid state name.</span> <span class="empty">*This field is required.</span>

</label>

<label class="phone">

<input type="tel" value="Enter Phone:">

<span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span>

</label>

<label class="fax">

<input type="tel" value="Enter Fax:">

<span class="error">*This is not a valid fax number.</span> <span class="empty">*This field is required.</span>

</label>

<label class="message">

<textarea>Enter Message:</textarea>

<span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span>

</label>



There is also div container with the class success inside the form, which is displayed after the message has been sent.
The Code:


<div class="success"> Contact form submitted!

<strong>We will be in touch soon.</strong> </div>


Script Initialization

To activate the contact form you need to include contact from script in the <head> section of HTML file and copy "bat" folder to your website root folder. The "bat" folder should contain 1 file: MailHandler.php

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

<script type="text/javascript" src="js/forms.js"></script>

After this you should initialize your contact form on the $(window).load() : event


<script type="text/javascript">

$(window).load(function(){

$('#form1').forms({

ownerEmail:'#'

})

})

</script>


Use the following parameters for initialization:

ownerEmail – the Email address the data will be sent to;
successShow – the period of time in milliseconds, during which the Send Message will be shown and after which the fields will be emptied, by default it is 4000 - 4 sec.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 18 2015, 01:53 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
Could you post the forms.js file as well?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Spitfire
post Apr 18 2015, 02:12 PM
Post #5





Group: Members
Posts: 4
Joined: 18-April 15
Member No.: 22,502
QUOTE(Christian J @ Apr 18 2015, 01:53 PM) *

Could you post the forms.js file as well?


Sure.

QUOTE
//forms
;(function($){
$.fn.forms=function(o){
return this.each(function(){
var th=$(this)
,_=th.data('forms')||{
errorCl:'error',
emptyCl:'empty',
invalidCl:'invalid',
notRequiredCl:'notRequired',
successCl:'success',
successShow:'4000',
mailHandlerURL:'bat/MailHandler.php',
ownerEmail:'support@template-help.com',
stripHTML:true,
smtpMailServer:'localhost',
targets:'input,textarea',
controls:'a[data-type=reset],a[data-type=submit]',
validate:true,
rx:{
".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".message":{rx:/.{20}/,target:'textarea'}
},
preFu:function(){
_.labels.each(function(){
var label=$(this),
inp=$(_.targets,this),
defVal=inp.val(),
trueVal=(function(){
var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
return defVal==''?defVal:tmp
})()
trueVal!=defVal
&&inp.val(defVal=trueVal||defVal)
label.data({defVal:defVal})
inp
.bind('focus',function(){
inp.val()==defVal
&&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
})
.bind('blur',function(){
_.validateFu(label)
if(_.isEmpty(label))
inp.val(defVal)
,_.hideErrorFu(label.removeClass(_.invalidCl))
})
.bind('keyup',function(){
label.hasClass(_.invalidCl)
&&_.validateFu(label)
})
label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
})
_.success=$('.'+_.successCl,_.form).hide()
},
isRequired:function(el){
return !el.hasClass(_.notRequiredCl)
},
isValid:function(el){
var ret=true
$.each(_.rx,function(k,d){
if(el.is(k))
ret=d.rx.test(el.find(d.target).val())
})
return ret
},
isEmpty:function(el){
var tmp
return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
},
validateFu:function(el){
el.each(function(){
var th=$(this)
,req=_.isRequired(th)
,empty=_.isEmpty(th)
,valid=_.isValid(th)

if(empty&&req)
_.showEmptyFu(th.addClass(_.invalidCl))
else
_.hideEmptyFu(th.removeClass(_.invalidCl))

if(!empty)
if(valid)
_.hideErrorFu(th.removeClass(_.invalidCl))
else
_.showErrorFu(th.addClass(_.invalidCl))
})
},
getValFromLabel:function(label){
var val=$('input,textarea',label).val()
,defVal=label.data('defVal')
return label.length?val==defVal?'nope':val:'nope'
}
,submitFu:function(){
_.validateFu(_.labels)
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",
url:_.mailHandlerURL,
data:{
name:_.getValFromLabel($('.name',_.form)),
email:_.getValFromLabel($('.email',_.form)),
phone:_.getValFromLabel($('.phone',_.form)),
fax:_.getValFromLabel($('.fax',_.form)),
state:_.getValFromLabel($('.state',_.form)),
message:_.getValFromLabel($('.message',_.form)),
owner_email:_.ownerEmail,
stripHTML:_.stripHTML
},
success: function(){
_.showFu()
}
})
},
showFu:function(){
_.success.slideDown(function(){
setTimeout(function(){
_.success.slideUp()
_.form.trigger('reset')
},_.successShow)
})
},
controlsFu:function(){
$(_.controls,_.form).each(function(){
var th=$(this)
th
.bind('click',function(){
_.form.trigger(th.data('type'))
return false
})
})
},
showErrorFu:function(label){
label.find('.'+_.errorCl).slideDown()
},
hideErrorFu:function(label){
label.find('.'+_.errorCl).slideUp()
},
showEmptyFu:function(label){
label.find('.'+_.emptyCl).slideDown()
_.hideErrorFu(label)
},
hideEmptyFu:function(label){
label.find('.'+_.emptyCl).slideUp()
},
init:function(){
_.form=_.me
_.labels=$('label',_.form)

_.preFu()

_.controlsFu()

_.form
.bind('submit',function(){
if(_.validate)
_.submitFu()
else
_.form[0].submit()
return false
})
.bind('reset',function(){
_.labels.removeClass(_.invalidCl)
_.labels.each(function(){
var th=$(this)
_.hideErrorFu(th)
_.hideEmptyFu(th)
})
})
_.form.trigger('reset')
}
}
_.me||_.init(_.me=th.data({forms:_}))
typeof o=='object'
&&$.extend(_,o)
})
}
})(jQuery)
$(window).load(function(){
$('#contact-form').forms({
ownerEmail:'the email address is already inserted here'
})
})
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 18 2015, 04:27 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
Going back to the first post, not sure if you can run two jQuery library files like this without conflicts:

CODE
<script src="js/jquery.js"></script>
...
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

? unsure.gif

Regarding forms.js:
QUOTE(Spitfire @ Apr 18 2015, 09:12 PM) *

$(window).load(function(){
$('#contact-form').forms({
ownerEmail:'the email address is already inserted here'
})
})

This last part of forms.js is the same snippet that you posted in the very first post, so probably it's enough to keep it in forms.js. The "#contact-form" ID value seems correct too, since your HTML form uses that ID.

It also appears the jQuery script inserts NAME attributes into the form fields, so their absense in the HTML is probably intentional. Of course this form will not work for anyone that disables javascript, so you may want to add a message in a NOSCRIPT element for such users.

I still don't understand why this part of the PHP script looks like it does:
CODE
$owner_email = $_POST["Email address inserted here"];

If you're supposed to insert your own email there I suppose it should look like this:

CODE
$owner_email = "Email address inserted here";

but at the same time your email address is specified in jQuery's "ownerEmail", and then I don't see the need for the PHP $owner_email variable. unsure.gif

Also I still can't find "successShow" anywhere in the scripts.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 19 2015, 09:02 AM
Post #7


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
I got the jQuery part working when I just used a single jQuery library:

CODE
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/forms.js"></script>

--at least the above produced a "success" message when I submitted the form, but I still got no emails (perhaps due to other things, like my test server configuration) and no error message from the PHP script.

In forms.js, I found the variable "successShow" on line 12, while "ownerEmail" is specified on both line 14 and 185 for some reason.

In MailHandler.php, maybe this line should be left literally like it is:
CODE
$owner_email = $_POST["Email address inserted here"];

--at least the jQuery didn't work when I changed it (the jQuery script makes an Ajax call to the PHP script).

I must say this contact form seems very complex for no good reason (there's no reason to depend on javascript/jQuery/Ajax for form submissions), while the documentation seems confusingly vague.



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Spitfire
post Apr 20 2015, 12:51 AM
Post #8





Group: Members
Posts: 4
Joined: 18-April 15
Member No.: 22,502
QUOTE(Christian J @ Apr 19 2015, 09:02 AM) *

I got the jQuery part working when I just used a single jQuery library:

CODE
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/forms.js"></script>

--at least the above produced a "success" message when I submitted the form, but I still got no emails (perhaps due to other things, like my test server configuration) and no error message from the PHP script.

In forms.js, I found the variable "successShow" on line 12, while "ownerEmail" is specified on both line 14 and 185 for some reason.

In MailHandler.php, maybe this line should be left literally like it is:
CODE
$owner_email = $_POST["Email address inserted here"];

--at least the jQuery didn't work when I changed it (the jQuery script makes an Ajax call to the PHP script).

I must say this contact form seems very complex for no good reason (there's no reason to depend on javascript/jQuery/Ajax for form submissions), while the documentation seems confusingly vague.


Thanks for your help, this is all beyond my ability so I'm thinking of trying another contact form. This one looks OK: http://w3layouts.com/kontak-form-a-flat-co...idget-template/ but it does not have a MailHandler.php file
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 08:21 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC