JavaScript - Contact Form Lightbox Scroll Problem
Hei!
I am trying to use a contact form which appears in a lightbox from : http://www.xul.fr/javascript/lightbox-form.html It is working great but, of course I have a problem. My page is very big and when I want my page to scroll to the point where the form is. I am using window.scrollTo function. the problem is that before scrolling to that point , it automatically scrolls to the coordinates (0,0) and only after that. I am posting my javascript and css code. Thanks for your help ! JAVASCRIPT Code: function gradient(id, level) { var box = document.getElementById(id); box.style.opacity = level; box.style.MozOpacity = level; box.style.KhtmlOpacity = level; box.style.filter = "alpha(opacity=" + level * 100 + ")"; box.style.display="block"; if(id=='boxa') { window.scrollTo(2500,0); } else { window.scrollTo(100,100); } return; } function fadein(id) { var level = 0; while(level <= 1) { setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10); level += 0.01; } } function openbox(formtitle, fadin,boxtitle,boxN) { var box = document.getElementById(boxN); document.getElementById('filter').style.display='block'; //var btitle = document.getElementById(boxtitle); // btitle.innerHTML = formtitle; // var btitle = document.getElementById(boxtitle); // btitle.innerHTML = formtitle; if(fadin) { gradient(boxN, 0); fadein(boxN); } else { box.style.display='block'; } } // Close the lightbox function closebox() { document.getElementById('box').style.display='none'; document.getElementById('filter').style.display='none'; document.getElementById('boxa').style.display='none'; document.getElementById('filter').style.display='none'; } CSS Code: #filter { display: none; position: absolute; top: -500px; left: -500px; width: 7200px; height: 3300px; background-color: #000; z-index:10; opacity:0.5; filter: alpha(opacity=50); } #box { display: none; position: absolute; top: 20%; left: 20%; width: 400px; height: 200px; padding: 48px; margin:0; border: 1px solid black; background-color: white; z-index:101; overflow: none; } #boxtitle { position:absolute; float:center; top:0; left:0; width:496px; height:24px; padding:0; padding-top:4px; left-padding:8px; margin:0; border-bottom:4px solid #3CF; background-color: #09c; color:white; text-align:center; } #boxa { display: none; position: absolute; top: 350px; left: 2950px; width: 700px; height: 200px; padding: 48px; z-index:101; overflow: visible; /* background-image: url(../imagini/tutorial.png); */ background-repeat:no-repeat; } Similar TutorialsHey there guys, I am building a site of which I would like the contact information and form to pop up from the button on the menu/header frame into the main frame as a lightbox ...no matter which page is loaded in the main frame. I was trying to experiment with the archived "jQuery Contact form for your website" tutorial from web devlopment blog . com. (I didnt want to post a link to it as I dont want to possibly flag the moderators) Any Ideas? Go to http://whitetailfantasies.com to see the layout and what I am going for. Thanks Hi Everybody. i have a contact form here PHP Code: <form id="form1" method="post" action="/contact.php" onsubmit="return validate(this)"> <p> <label for="name">Name:</label> <input type="text" name="name" id="name" /> <img src="alert.gif" alt="" class="alertImg" /> </p> <p> <label for="number">Mobile:</label> <input type="text" name="number" id="number" /> <img src="alert.gif" alt="" class="alertImg" /> </p> <p> <label for="email">Email:</label> <input type="text" name="email" id="email" /> <img src="alert.gif" alt="" class="alertImg" /> </p> <p> <label for="msg">Comments:</label> <textarea name="msg" id="msg" cols="30" rows="3"></textarea> <img src="alert.gif" alt=""class="alertImg" /> </p> <p> <input class="submit_btn" type="image" src="images/submit_btn.gif" name="submit" value="Submit" /></p> <!-- --> </form> and i have an external js script to validate the form and the code is below PHP Code: var alertImgs = []; var nImage = ""; function validate(nForm){ for (i=0; i<alertImgs.length; i++) { nImage[alertImgs[i]].style.visibility = "hidden"; } var nName = nForm['name']; var nMobile = nForm['number']; var nEmail = nForm['email']; if (nFirstName.value.replace(/s/g, "").length < 1) { alert('Please Enter Your Name'); document.images[alertImgs[0]].style.visibility = "visible"; return false; } if (!/[ds-]+$/.test(nmobile.value) || !/d{10}/.test(nmobile.value.replace(/[s-]/g, ""))) // must contain 10 digits; { alert('Enter your mobile phone number'); document.images[alertImgs[2]].style.visibility = "visible"; return false; } if (!/^w+[w|.|-]{0,1}w*[w|.|-]{0,1}w*@w+[w|-]{0,1}w*[w|-]{0,1}w*.{1,1}[a-z]{2,4}$/.test(nEmail.value)) { alert('Invalid Email'); document.images[alertImgs[3]].style.visibility = "visible"; return false; } if (nForm['msg'].value == "") { alert('Please write a comment'); document.images[alertImgs[4]].style.visibility = "visible"; return false; } alert('Thank you for your submission'); return true; } function init(){ nImage = document.images; var imgFileName = ""; for (i=0; i<nImage.length; i++) { imgFileName = nImage[i].src; imgFileName = imgFileName.substring(imgFileName.lastIndexOf("/")+1,imgFileName.length) if (imgFileName == "alert.gif") { alertImgs[alertImgs.length] = i; nImage[i].style.visibility = "hidden"; } } } navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); Could anyone tell me why it wont work for me and is there any problem with the code? Thanks for your help if you give some please i want to know how to make lightbox effects with the idea of switching between pages using the lightbox please follow this link: http://particletree.com/examples/lightbox/ while pressing on "submit an inquiry " it will show a form... all that i need is to make the same idea but using registration form first page: contains user data ---> on pressing next .. i want to be on same lightbox box effect but using next page that contains his work data... and on third page he will have a message that his registration is done successfully.. so how to switch between pages in lightbox effects??? Hi. I've used CoffeeCup Form Builder to create a nice form for my site and would like to have it open in a lightbox/thickbox, or open in a layer? (If it matters, do have an iFrame on the page, FYI). I've got LightBox Gone Wild to work nicely, except it won't load the form. If I open the HTML page (directly) the form works fine. This is the code on the HTML page: Code: <script type="text/javascript" src="swfobject.js"></script> <div id="flashcontent"></div> <script type="text/javascript"> var so = new SWFObject("form.swf", "form.xml", "653", "527", "7,0,0,0", "#ffffff"); so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"); so.addParam("quality", "high"); so.addParam("scale", "noscale");so.addParam("salign", "lt"); so.addParam("wmode", "transparent"); so.addParam("FlashVars", "xmlfile=form.xml&w=653&h=527"); so.write("flashcontent");</script> Thanks in advance... ---- Okay. I used CoffeCup Form Builder for my form and wanted it to open like the examples at their website: http://www.coffeecup.com/form-builder. Having it on the page or in a pop-up was okay, but I like the 'LightBox' effect. Anyway, someone did help me and I wanted to share the code in case others can use it. It uses an iframe that opens in a new layer. You can probably improve on it and change the size, etc., but it's a start. One thing I'm planing is to use the CSS and JS in an external file rather than in the <head>: Code: <style type="text/css"> div#OVERLAY { position: absolute; top: 0px; left: 0px; width: 100%; height: 1200px; background-color: black; -moz-opacity: 0.70; opacity: 0.60; filter: alpha(opacity=70); z-index: 10; display: none; } div#FORMHOLDER { position: absolute; top: 0px; left: 0px; width: 100%; background-color: transparent; text-align: center; z-index: 15; display: none; margin: 0px; padding: 0px; right: 0px; bottom: 0px; } div#FORMHOLDER span.closer { padding-left: 100px; padding-right: 100px; color: #E5BC9D; background-color: black; } div#FORMHOLDER iframe { width: 653px; height: 527px; margin: 0px; padding: 0px; background-color: #000; } </style> <script type="text/javascript"> function overshow() { var hold = document.getElementById("FORMHOLDER"); hold.style.display = "block"; var stop = parseInt(document.body.scrollTop); if ( isNaN(stop) ) stop = 0; if ( stop == 0 ) { var stop = parseInt(document.documentElement.scrollTop); if ( isNaN(stop) ) stop = 0; } hold.style.top = stop + 50 + "px"; document.getElementById("OVERLAY").style.display = "block"; } function overoff() { document.getElementById("OVERLAY").style.display = "none"; document.getElementById("FORMHOLDER").style.display = "none"; } </script> Next, use the <div> and an <iframe> tag in the fist line after the <body> tag: Code: <div id="OVERLAY"></div> <div id="FORMHOLDER"> <span class="closer" onclick="overoff()">Click here to close</span><br /> <iframe src="form.html" scrolling="no" frameborder="0"></iframe> <br /><span class="closer" onclick="overoff()">Click here to close</span> </div> Finally, when you link to the form page CoffeeCup creates, the code is: Code: <a href="#" onclick="overshow(); return false;">link</a> I hope this is useful to some of you. I looked long and hard and could find nothing so... Cheers! i made a gallery using lightbox but i have a problem that the menu (created by allwebmenu program) is always on top of the lightbox so the pictures i cutted.. how to solve this problem? I have been working on a site for some time and only yesterday did something happen which wont upload these two images I replaced in my lightbox run through: here is the page: http://newghost.net/GRAPHICS.html The last image wont come up(just a white box) and the five image wont change to the new edited image. I made sure the text and images were all directly linked, the code was checked etc. All I did was replace the images, edited the images. One thing I did notice that was different was it says (run script) : ( Void) or something similar to that at the bottom left corner of the browser on all the images that are working but not on the last.--(??) Is there something I should do with this? its the only clue I have. I have been trying to get some fresher stuff up for a client I referred. Now I am afraid that they won't see the work... sigh...:/ I spent several hours yesterday trying to figure it out... but I wont give up. Is there a problem with my server? Is there some update that threw everything off? I am afraid to update anything more.... Any help would be greatly appreciated! Thanks! Hi Guys, I'm developing a registration form to be viewed on an iPad, this will be put on display in store for customers to complete. The idea is that once the form has been completed a success message will show in lightbox form (currently using query reveal) and then after a few seconds disappear and the form will be refreshed. Any idea on how to do this? I am using the below code but the obvious error is with the action. "<form name="signup" class="form" id="signup" action="data-reveal-id="myModal"" method="post" onsubmit="return validate_signup(this)">" All help very much appreciated. Not totally sure this is in the correct section but here goes!... I've coded up my form in html / css and added some scripts i found online that should prevent users from submitting the form without the fields filled in. However the form only seems to work in chrome, safari and yet firefox it lets users submit without needing anything filled in. my form is he http://www.rhombusone.com/projecttiger/contact.html Also targeting the error text so that it appears below the field box instead of being all over the place, what value am i targeting? Thanks M i cant see to get my finger on the validation correctly, im trying to achieve that: (*) Required fields are required in the final submission All other fields are validated by their content type But all fields without (*) Required are not needed for the form to be submitted http://www.on-media.co.uk/clients/hlmd/ http://www.on-media.co.uk/clients/hl...ipt/contact.js is the below code: Code: function formValidator(){ // Make quick references to our fields var name = document.getElementById('name'); var sname = document.getElementById('sname'); var phone = document.getElementById('phone'); var cell = document.getElementById('cell'); var calltime = document.getElementById('calltime'); var email = document.getElementById('email'); var address = document.getElementById('address'); var zip = document.getElementById('zip'); var loana = document.getElementById('loana'); var loanb = document.getElementById('loanb'); var balance = document.getElementById('balance'); // Check each input in the order that it appears in the form! if(isAlphabet(name, "Please enter only letters for your name")){ if(isAlphabet(sname, "Please enter only letters for your surname")){ if(isNumeric(phone, "please enter only numbers for your phone number")){ if(isNumeric(cell, "please enter only numbers for your cell number")){ if(madeSelection(calltime, "Please select a time for your callback")){ if(isAlphanumeric(address, "please enter your address in numbers and letters")){ if(isNumeric(zip, "Please enter a valid zip code")){ if(emailValidator(email, "Please enter a valid email address")){ if(isAlphanumeric(loana, "Please enter the value of your loan")){ if(isAlphanumeric(loanb, "Please enter the value of your loan")){ if(madeSelection(balance, "Select the duration you are behind on your loan re-payments")){ return true; } } } } } } } } } } } return false; } function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; } function isNumeric(elem, helperMsg){ var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function isAlphabet(elem, helperMsg){ var alphaExp = /^[a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function isAlphanumeric(elem, helperMsg){ var alphaExp = /^[0-9a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function madeSelection(elem, helperMsg){ if(elem.value == "Please Choose"){ alert(helperMsg); elem.focus(); return false; }else{ return true; } } function emailValidator(elem, helperMsg){ var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; if(elem.value.match(emailExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } is my form: Code: <form onsubmit='return formValidator()' ><div id="contactfC"> <div id="contactf1"> <table width="240" border="0"> <tr> <td width="102"><span style="color:#F00;">*</span>Name:</td> <td width="108"><input name="name" type="text" id="name" size="15" /></td> </tr> <tr> <td><span style="color:#F00;">*</span>Surname:</td> <td><input name="sname" type="text" id="sname" size="15" /></td> </tr> <tr> <td><span style="color:#F00;">*</span>Phone Number:</td> <td><input name="phone" type="text" id="phone" size="15" /></td> </tr> <tr> <td>Cell Number:</td> <td><input name="cell" type="text" id="cell" size="15" /></td> </tr> <tr> <td>Best time to call:</td> <td><select name="calltime" id="calltime"> <option value="Morning">Morning</option> <option value="Afternoon">Afternoon</option> <option value="Evening">Evening</option> <option value="Anytime">Anytime</option> <option value="Please Choose" selected="selected">Please Choose</option> </select></td> </tr> <tr> <td>Address:</td> <td><textarea name="address" id="address" cols="15" rows="3"></textarea></td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> <div id="contactf2"> <table width="245" border="0"> <tr> <td width="133"><span style="color:#F00;">*</span>Zip Code:</td> <td width="118"><input name="zip" type="text" id="zip" size="15" /></td> </tr> <tr> <td><span style="color:#F00;">*</span>Email:</td> <td><input name="email" type="text" id="email" size="15" /></td> </tr> <tr> <td><span style="color:#F00;">*</span>1st Loan Amount:</td> <td><input name="loana" type="text" id="loana" size="15" /></td> </tr> <tr> <td>2nd Loan Amount:</td> <td><input name="loanb" type="text" id="loanb" size="15" /></td> </tr> <tr> <td><span style="color:#F00;">*</span>Balance Past Due:</td> <td><select name="balance" id="balance"> <option value="One Month">1 Month</option> <option value="Two Months">2 Months</option> <option value="Three Months">3 Months</option> <option value="Four Months">4 Months</option> <option value="Five Months +">5 Months +</option> <option value="Not Applicable">N/A</option> <option value="Please Choose" selected="selected">Please Choose</option> </select></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td><input type="submit" name="button" id="button" value="Submit" /></td> </tr> </table> </div> </div></form> i appricate any help thanks Code: // Form submission $('#contact-form').submit(function() { // Hide any message $('span#contact-msg').css('opacity', 0); // Build data string var fields = [ 'name', 'email', 'message' ]; var data = 'ajax=1'; for (var i = 0; i < fields.length; i++) data += '&' + fields[i] + '=' + encodeURI($('#' + fields[i]).val()); // Submit $.ajax( { url : $('#contact-msg').attr('action'), dataType: 'json', data: data, type: 'POST', success: function(data) { if (data.sent == true) { $('span#contact-msg').html('Thanks for the message. I will get back to you as soon as possible.'); $('#send').css('backgroundPosition', '-207px -168px'); $('#send').attr('disabled', 'disabled'); } else $('span#contact-msg').html(data.error); $('span#contact-msg').animate( { opacity: 1 }, 400); } }); return false; }); I got this code for an contact form, but where can I set the email address to send to? Hi, I have created a website which employs javascript contact forms. There is a javascript contact form located on the left of every page of the website which works fine but on the contact page where there are two forms the main form on the page does not work. The contact us page is located he http://www.goodletterwriting.co.uk/contact-us.html The two javascript files that are being used a http://www.goodletterwriting.co.uk/scripts/scripts.js & http://www.goodletterwriting.co.uk/scripts2/scripts2.js Can somebody please help? Thanks in advance, Peter Does someone know how to let 2 of the same type of contact form, working on the same page? Because i have the contact form on the footer of my page, and when you visit at the mennu: contact us, the same contact form will be shown. But it wont work, only the one in the footer. Basically I can't get it to work. I'm following this tutorial and I'm not able to hide the error messages, or just get the form to submit. I could really use some direction. Here is the page I am working on: http://www.mustlovepink.com/public_html/contact.php Hello JScript gurus, though I am quite an advanced and experienced VB& .NET programmer, I am totally new to Jscript coding, (I don't actually code Jscript) but I build websites all the same too. I am also new here. I really need help from you gurus here. I am working on a website and I really wish to incorporate a contact or an order form to it so that when the user fills in the fields and clicks send, I receive the data in my email. I have made some searches and found quite a few but all didn't touch on how I retrieve my data. Please help me. I will be very grateful. Thank you. I already have the html and the php part of my form. My Form already can be verified using only php, but i would also like it to use javascipt so they dont have to load a new page just to say ''this field is blank"" im not very intelligent with javascipt so im just looking that if the user does not have a field that is needed that a red mark comes up around it or next to it saying you need to fill it out. Im using php also for verification just incase someone turns on JavaScript on there browser.. heres my php file Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <?php $errors = ''; $myemail = 'support@ludemanndistributors.net';//<-----Put Your email address here. if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) { $errors .= "\n Error: all fields are required"; } $name = $_POST['name']; $email_address = $_POST['email']; $message = $_POST['message']; if (!eregi( "^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email_address)) { $errors .= "\n Error: Invalid email address"; } if( empty($errors)) { $to = $myemail; $email_subject = "Contact form submission: $name"; $email_body = "You have received a new message. ". " Here are the details:\n Name: $name \n ". "Email: $email_address\n Message \n $message"; $headers = "From: $myemail"; $headers .= "Reply-To: $email_address"; mail($to,$email_subject,$email_body,$headers); //redirect to the 'thank you' page header('Location: contact-form-thank-you.html'); } ?> <body> </body> </html> and heres the html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form</title> </head> <body> <form action='process.php' method=post> <table width="506" height="268" border="0"> <tr> <td width="500"><label> Name (required)<br /> <br /> <input type="text" size="40" maxlength="40" name="Name"> <br /> </label></td> </tr> <tr> <td><label> Email Address (required)<br /> <br /> <input type="text" size="40" maxlength="40" name="Email"> </label></td> </tr> <tr> <td><label> Date of Birth (required)<br /> <br /> <select name='Month'> <option selected></option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select name='Day'> <option selected></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select name='YYYY'> <option selected></option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> <option value="1949">1949</option> <option value="1948">1948</option> <option value="1947">1947</option> <option value="1946">1946</option> <option value="1945">1945</option> <option value="1944">1944</option> <option value="1943">1943</option> <option value="1942">1942</option> <option value="1941">1941</option> <option value="1940">1940</option> <option value="1939">1939</option> <option value="1938">1938</option> <option value="1937">1937</option> <option value="1936">1936</option> <option value="1935">1935</option> <option value="1934">1934</option> <option value="1933">1933</option> <option value="1932">1932</option> <option value="1931">1931</option> <option value="1930">1930</option> <option value="1929">1929</option> <option value="1928">1928</option> <option value="1927">1927</option> <option value="1926">1926</option> <option value="1925">1925</option> <option value="1924">1924</option> <option value="1923">1923</option> <option value="1922">1922</option> <option value="1921">1921</option> <option value="1920">1920</option> <option value="1919">1919</option> <option value="1918">1918</option> <option value="1917">1917</option> <option value="1916">1916</option> <option value="1915">1915</option> <option value="1914">1914</option> <option value="1913">1913</option> <option value="1912">1912</option> <option value="1911">1911</option> <option value="1910">1910</option> <option value="1909">1909</option> <option value="1908">1908</option> <option value="1907">1907</option> <option value="1906">1906</option> <option value="1905">1905</option> <option value="1904">1904</option> <option value="1903">1903</option> <option value="1902">1902</option> <option value="1901">1901</option> <option value="1900">1900</option> </select> </label></td> </tr> <tr> <td> <label> Comments (required)<br /> <br /> <textarea rows="5" cols="45" name="Comment" wrap="physical"></textarea><br /> </label></td> </tr> </table> <p> <label> <input type="submit" name="Submit" id="button" value="Submit" /> <input type="reset" name="Reset" id="button" value="Reset" /> </label> </p> </form> </body> </html> </html> Thanks in advance. Friends, I want a simple contact form of 3 fields on my website which emails data on my email address or write a file on my server or just other any way inform me that data. But I dont want that "submit" button redirects to other 'thankyou' page where code is located. Plzzzzzzzz suggest or tell me what I have to do?? I have heard that it is wrong to just do client validtion. SO can anyone help me with my form? The code below, has client validation and php and I am not sure that I have got it right. Also I would need to cover server side validation too but have no idea on how to do this. I must say I have very small knowledge of JS. Does anyone know the easiest method of doing forms with php, JS server and client side validation. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="en" name="language" /> <meta content="Seniors community venue contact details, Seniors community venue contact form, email, address, and telephone number" name="description" /> <meta content="Seniors community venue contact form, email, telephone, address" name="keywords" /> <title>Seniors Community Venue - Contact details</title> <link href="../styles/mainstyle.css" rel="stylesheet" type="text/css" /> <link href="../styles/navigation.css" rel="stylesheet" type="text/css" /> <link href="../styles/layout.css" rel="stylesheet" type="text/css" /> <link href="http://fonts.googleapis.com/css?family=Cabin|Ubuntu" rel="stylesheet" type="text/css" /> <link href="../styles/form.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../javascript/validate.js"></script> <style type="text/css"> .antispam { display: none; } </style> <script type="text/javascript"> var first = "enquiries"; var last = "seniors260.org";</script> </head> <body> <div id="bodyblock"> <div id="container"> <div id="header"> <div class="indentmenu"> <ul> <li><a href="faqs.html">FAQS</a></li> <li><a href="venue_location.html">Location</a></li> <li><a href="about_us.html">About Us</a></li> <li class="first"><a href="home.html">Home</a></li> </ul> </div> <div class="logo_venue"> <img alt="Seniors Community Venue logo" height="100" src="../images/venue_logo.gif" width="200" title="Return to hompage" /></div> <div class="top2"> <p class="tagtitle">"The best community venue<br /> your money can buy"</p> <address class="top"> 260 Stanstead Road<br /> London SE23 1DD<br /> 020 8699 4977</address> </div></div> <div class="indentmenu2"> <ul> <li><a href="room_hire.html">Room Hire</a></li> <li><a href="testimonials.html">Testimonials</a></li> <li><a href="album.html">Photo Album</a></li> <li class="first2"><a href="venue_donations.html">Donations</a></li> </ul> </div> <div id="content"> <h1>Venue Contact Details</h1> <h2>Contact Form</h2> <div id="form_box"> <form id="form" action="../php_files/submit2.php" onsubmit="return validate()" enctype="multipart/form-data" method="post" name="form_to_email" /> <fieldset> <legend>Contact Form</legend> <p><label for="name"><span>Name</span></label><input id="name" name="name" size="35" type="text" /></p> <p><label for="email"><span>Email</span></label><input id="email" name="email" size="35" type="text" /></p> <p><label for="subject"><span>Subject</span></label><input id="subject" name="subject" size="35" type="text" /></p> <p class="antispam">Leave this empty: <br /> <input name="url" /></p> </fieldset><fieldset> <legend>Message</legend> <textarea id="message" cols="50" name="message" rows="10"></textarea></fieldset><fieldset> All fields Required </fieldset><p> <input id="submit" name="submit" type="submit" value="Submit" /></p> Hello, I have an existing php contact form which incorporates php validation (required name with only characters, valid email address format, and minimum message length) and re-captcha. I would like to add some "real time" validation to the fields on my form (there are 3 fields - name, email and message) before the "Submit" button is pressed. For example when the user tabs from one text box to the next but hasn't filled in the required information. I am totally new to any type of java, but am I right in thinking I need either JavaScript, Ajax or JQuery to perform real-time validation? If so, which should I be looking into and are there any basic examples of form validation? I want to keep my pup validation as I'm aware that php is client-side but still needed as people can turn Java off in their web browsers. Any tips and pointers will be very much appreciated! Thankyou, Tom Hi! I would like to show you guys the JavaScript that i using for my contact form /*----- Code goes here by clicking the link -----*/ http://web.ezenne.com/js/completeValid.js The above code was copied from a Youtube tutorial about JavaScript. I would like to ask, what additional code should be added in the existing code in order to validate the numbers only and an email format before the form to be submitted? Thanks! Regards, Ezenne Dear all, MAIN QUESTIONS : QUESTIONS for www.cyoffshore.byethost12.com/feedback4test.html I designed the Contact Us (Feedback) page of my website but something goes wrong. I would like to set an email address or some email addresses where the visitors can find me. Now, this function does not work! I would also like the users / visitors who complete and submit the (my) Contact Form, to receive an auto-confirmation to their email which will confirms that they have addressed to me with their details (their name, address, tel ,etc) according to their input into the fields and options from the (my) Contact form and if they would like to see their written request (what they have written to me if they did), they could use an option button from the (my) Contact Form. Actually the details of their written request will depend of what they would like to choose (depends on their choice). According to the submitted Contack Form, generally many users take the advantage of the Contact Us Forms where they send spam emails via the Contact Form. This might be avoid by the usage of the free tool: http://www.google.com/recaptcha Below is the url of the feedback.html page of my website. I have created a copy of the same and I renamed it to: feedback4test.html for testing purposes. www.cyoffshore.byethost12.com/feedback4test.html Here is the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <!-- this template was designed by http://www.tristarwebdesign.co.uk - please visit for more templates & information - thank you. --> <head> <title>cyproservices</title> <!-- change to whatever you want as the title for your website --> <meta name="description" content=" " /> <!-- enter a description for your website inside the " " --> <meta name="keywords" content=" " /> <!-- enter a a string of keywords that relate to your website inside the " " --> <meta http-equiv="Content-Language" content="en-gb" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="headercont"> <div id="header"> <h1><span>cyproservices</span></h1> </div> </div> <div id="menucont"> <div id="menu"> <ul> <li><a title="link one" title="home" href="index.html">ABOUT CYPRUS</a></li> <li><a title="link two" href="ourservices.html">OUR SERVICES</a></li> <li><a title="link three" href="offshorejurisdictions.html">OFFSHORE JURISDICTIONS</a></li> <li><a title="link four" href="fees.html">PRICES</a></li> <li><a class="active" href="feedback.html">CONTACT US</a></li> </ul> </div> </div> <div id="maincont"> <div id="main"> <h1>Feedback</h1> <p style="margin-top: 0; margin-bottom: 0" align="justify"> <font size="3" face="Book Antiqua" color="#FF0000"> Tell me what you think about my website. I welcome all of your comments and your suggestions.</font></p> <form method="POST" action="--WEBBOT-SELF--" onSubmit="location.href='../_derived/nortbots.htm';return false;" name="SENDEMAIL" webbot-onSubmit> <!--webbot bot="SaveResults" u-file="C:\Users\antonis\Documents\My Documents\My webs\cyproservices\_private\formresults.csv" s-format="TEXT/CSV" s-label-fields="TRUE" b-reverse-chronology="FALSE" s-date-format="%d %b %Y" s-time-format="%H:%M:%S" s-builtin-fields="REMOTE_NAME REMOTE_USER HTTP_USER_AGENT Date Time" u-confirmation-url="confirm.htm" s-email-address="georgeashiotis@yahoo.com" s-email-format="TEXT/PRE" startspan --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot bot="SaveResults" endspan i-checksum="43374" --><p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua"> What kind of comment would you like to send?</font></strong></p> <dl> <dd> <p align="justify" style="margin-top: 0; margin-bottom: 0"><font color="#666666" face="Book Antiqua"><strong><input type="radio" name="MessageType" value="Complaint">Complaint <input type="radio" name="MessageType" value="Problem">Problem <input type="radio" checked name="MessageType" value="Suggestion">Suggestion <input type="radio" name="MessageType" value="Praise">Praise</strong></font></dd> </dl> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua"> Subject:</font></strong></p> <blockquote> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="26" maxlength="256" name="Subject"></p> </blockquote> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua"> Enter your comments in the space provided below:</font></strong></p> <dl> <dd> <p align="justify" style="margin-top: 0; margin-bottom: 0"><textarea name="Comments" rows="5" cols="42"></textarea></dd> </dl> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua"> Tell me how to get in touch with you:</font></strong></p> <dl> <dd> <table> <tr> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong> <font color="#666666" face="Book Antiqua">Name:</font></strong></td> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="Username"></td> </tr> <tr> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong> <font color="#666666" face="Book Antiqua">E-mail:</font></strong></td> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="UserEmail"></td> </tr> <tr> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong> <font color="#666666" face="Book Antiqua">Tel:</font></strong></td> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="UserTel"></td> </tr> <tr> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong> <font color="#666666" face="Book Antiqua">Fax:</font></strong></td> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="UserFAX"></td> </tr> </table> </dd> </dl> <p align="justify" style="margin-top: 0; margin-bottom: 0"> <strong><font color="#666666" face="Book Antiqua"> </font></strong><p align="justify" style="margin-top: 0; margin-bottom: 0"> <strong><font color="#666666" face="Book Antiqua"> <input type="checkbox" name="ContactRequested" value="ContactRequested"> Please contact me as soon as possible regarding this matter.</font></strong><p align="justify" style="margin-top: 0; margin-bottom: 0"> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="submit" value="Submit Comments"> <input type="reset" value="Clear Form"></p> </form> </li> </ul> </td> </tr> </table> </div> </div> </div> <div id="footercont"> <div id="footer"> <div id="footerleft"> <p><a title="back to top" href="#headercont">^ back to top</a></p> </div> <div id="footerright"> <p>template design by <a title="derby web design" href="http://www.tristarwebdesign.co.uk">tristar web design</a></p> </div> </body> </html> </body> </html> According to the above CODE , I would like to inform you that I've just done a copy and paste to the above FORM from an other website of mine which is working properly, meaning that I do receive emailS from the users/ visitors when they fill and submit the (my) Contact Form. . This website is www.cypruspainters.net and the related web link is: http://cypruspainters.net/feedback2.htm The related CODE of the secondary website which I have copied and pasted the above code is the following CODE: : Code: <html> <head> <meta content="text/html; charset=windows-1252" http-equiv="Content-Type"> <meta content="en-us" http-equiv="Content-Language"> <title>Feedback2</title> <meta name="Microsoft Theme" content="pixel 011"> </head> <body background="_themes/pixel/pixbkgnd.gif" bgcolor="#FFFFFF" text="#000000" link="#6666CC" vlink="#999999" alink="#663333"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"> <tr> <td width="49" colspan="2" align="center"> <p style="margin-top: 0; margin-bottom: 0"> <a href="http://www.agora-gallery.com/" rel="nofollow" target="_blank"> <img border="0" src="photogallery/logoForLinks2.gif" hspace="3" width="125" height="78"></a></p> </td> <td align="center" width="907"><p style="margin-top: 0; margin-bottom: 0"> <img border="0" src="HEADERS/feedback2.gif" width="621" height="60"></td> </tr> <tr> <td width="882" colspan="3" style="border-bottom-style: none; border-bottom-width: medium"> <p style="margin-top: 0; margin-bottom: 0"></td> </tr> </table><table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="border-bottom-style: solid; border-bottom-width: 1" align="right"> <h4 style="margin-top: 0; margin-bottom: 0"> </h4> </td> </tr> </table><table border="0" cellpadding="0" cellspacing="0" width="727" height="78"> <tr> <td style="border-style: none; border-width: medium" valign="top" width="140"> <p> <!--webbot b-include-home="TRUE" b-include-up="FALSE" bot="Navigation" s-orientation="vertical" s-rendering="graphics" s-theme="nature 100" s-type="siblings" --> </p> <p><br> </p> <p> </p> </td> <td style="border-style: none; border-width: medium" valign="top" width="3"> <p></p> </td> <td height="100%" style="border-style: none; border-width: medium" valign="top" width="584"> <h3 align="justify" style="margin-top: 0; margin-bottom: 0"> <font color="#FF0000" face="Book Antiqua" size="3">Tell me what you think about my website. I welcome all of your comments and your suggestions.</font></h3> <h1><b><b><b><b><b>Contact Us:</b></b></b></b></b></h1> <form action="test.mf" method="post"> Your Name:<br /> <input name="Name" size="20" type="text" value="" /><br /> <br /> Email:<br /> <input name="Email" size="20" type="text" value="" /><br /> <br /> Comments:<br /> <textarea cols="40" name="Comments" rows="10"></textarea><br /> <br /> <script src="http://api.recaptcha.net/challenge?k=6LfxMwYAAAAAAM8fEdeJUlJzGmueIL9-gDhnUdpo " type="text/javascript"></script> <noscript> <iframe frameborder="0" height="300" src="http://api.recaptcha.net/noscript?k=6LfxMwYAAAAAAM8fEdeJUlJzGmueIL9-gDhnUdpo " width="500"> </iframe><br> <textarea cols="40" name="recaptcha_challenge_field" rows="3"> </textarea> <input name="recaptcha_response_field" type="hidden" value="manual_challenge"></noscript><input type="submit" value="Submit Form" /> </form> </td> </tr> </table></td> </tr> </table></td> </tr> </table> <blockquote> </blockquote> <p> </p> <p style="margin-top: 0; margin-bottom: 0"> </p> <p style="margin-top: 0; margin-bottom: 0"> <a href="index.htm"><img align="right" border="0" height="40" src="images/Press/home3.gif" width="40"></a></p> <p style="margin-top: 0; margin-bottom: 0"> </p> <table border="0" cellpadding="0" cellspacing="0" width="746" height="0%" style="border-collapse: collapse"> <tr> <td valign="baseline" width="746"> <p align="right" style="margin-top: 0; margin-bottom: 0"> <a href="Links.htm"> <img border="0" src="images/Press/back.gif" width="47" height="29"></a><a href="feedback2.htm"><img border="0" src="images/Press/top.gif" width="40" height="29"></a></td> </tr> </table></body> </html> You can email me at: antonis20032002@yahoo.gr and I can reply to you by attaching, uploading and sending my www.cyoffshore.byethost12.com website or/ and www.cyoffshore.byethost12.com/feedback4test.html (Contact Us Form) to your email in order to investigate the case! SECONDARY QUESTIONS : ADDITIONAL QUESTIONS for www.cypruspainters.net/feedback2.htm under your consideration: Firstly, when I visit my website a pop up page appears which is very annoying for the visitors! The url of the pop up is: http://www.freelotto.com/register.as...&affiliateid=3 Another issues are : According to these issues, I have attached the screenshots and the text below: The screenshots below are refered to my previous software which was FRONTPAGE. Now I am using a substituted program which is Microsoft Expression Web 3. The problem is when I would like to use a Captcha image to block form spam and include this setting in my test.mf file (see attached screenshot -test.mf file), then @recaptchaFailPage is pointing to the page I want the visitor redirected to should they enter the wrong text from the image and does not work (see attached screenshot - recaptchaFailPage). In addition, we can add more fields to Misk Contact Us.htm Form (see attached screenshot- Misk Contact Us.htm Form) and the file test.htm is merely an example of what can be done! I created under my website a web link www.cypruspainters.net/MiskMailForm.htm with 3 images to look over the guidelines describing what is supported by my hosting provider and it will help you setup any form with their Mail Form service. Another issue, as instructed in the pdf, my hosting provider provides a Mail Form service which I can setup a confirmation page to notify people of their form being submitted successfully within the test.mf file. My confirmation page is listed as: @redirPage=confirm2.htm within the test.mf file. This is merely a redirect and will not pass Form Information to the page in order to show people what was submitted. Currently this might not be a feature of my hosting provider Mail Form service. But I am not sure! According to the attached screenshot- confirm2.htm , could you make the necessary changes to confirm2.htm in order to notify people of their form being submitted successfully with a more detailed and presentable way, for example, showing what the visitors have requested (visitors input), their details, their comments, etc and at the bottom maybe will be better if we would add a web link back to the Form! You can email me at: georgeashiotis@yahoo.com and I can reply to you by attaching, uploading and sending my www.cypruspainters.net/index.htm website or/ and www.cypruspainters.net/feedback2.htm (Contact Us Form) to your email in order to investigate the case! Thanks! Antonis |