View Full Version : Popup contact form through html need help

02-15-2012, 04:24 AM
ok so i have researched how to do popup forms on websites yet i have not found any help for my particular problem...basically on the front of my one page site i want the contact form to pop out onto the main page when a button at the bottom of the page is clicked. The code for everything is done i just need help with how to integrate a pop up command within my code for the contact form/main page.

This is such a simple concept yet i cannot understand how to get it to work for my situation. :confused:

If you need anymore input please let me know

This is the code for the main page

<!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" xml:lang="en" lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Example Ex</title>

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="tab.css" />
<link rel="stylesheet" type="text/css" href="style4.css" />

<!--[if IE]>

<style type="text/css">
.clear {
zoom: 1;
display: block;




<div class="section" id="page">

<div class="header">

<h1>Example example</h1>
<h3>"Slogon goes here yay yay"</h3>
<h3 id="move">Follow Us!</h3>
<div class="nav clear">

<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>


<div class="section" id="articles"> <!-- A new section -->

<!-- section 1 start -->

<div class="article" id="article1">

<div class="line"></div>

<div class="articleBody clear">

<div class="figure"> <!-- The figure tag marks data (usually an image) that is part of the area -->
<div id="navigation-block">

<ul id="sliding-navigation">
<li class="sliding-element"><h3>Useful Tools for Your Computer</h3></li><br />
<li class="sliding-element"><a href="http://download.cnet.com/AVG-Anti-Virus-Free-Edition-2012/3000-2239_4-10320142.html?tag=pop.software&cdlPid=10861654">AVG Download</a></li><br />
<li class="sliding-element"><a href="http://www.update.microsoft.com/windowsupdate/v6/thanks.aspx?ln=en&&thankspage=5">Where to update your operating system</a></li><br />
<li class="sliding-element"><a href="http://www.safer-networking.org/en/download/index.html">Spy bot destruction</a></li><br />
<li class="sliding-element"><a href="http://www.zonealarm.com/">ZoneAlarm computer protection</a></li>



<h4 align="center">About Us</h4>
<br />
<p align="center" margin-left="30px">We specialize in computer tune-ups, maintenance, repairs and also installation of stereo systems.</p>
<br />
<br />
<h4 align="center">Contact Info</h4>
<br />

<ul id="ul1">
<li>blah blah blah blah blah blah</li>
<br />
<li>Phone Number: (123) 456-7890</li>
<br />
<li>Email: exampleEmail@gmail.com</li>
<br />

<br />
<br />
<br />
<br />
<h4 id="mv">You can set up an appointment anytime from 11:00 am to 5:30 pm</h4>
<br />
<h4 id="mv2">Have a question or need to contact right away? Click here for our contact page</h4>
<br />
<br />
<a class="a_demo_four" href="index2.html">Click Here!</a>
<br />
<br />
<br />
<br />

<div class="footer"> <!-- Marking the footer section -->

<div class="line"></div>

<p id="cp">Copyright 2012 - example.com</p>

<a href="#" class="up">Go UP</a>


</div> <!-- Closing the #page section -->

<!-- JavaScript Includes -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>

This is the code for the contact form

<!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">

<title>Contact Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="formStyle.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />

<link rel="stylesheet" href="css/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>

$(document).ready(function() {

// SUCCESS AJAX CALL, replace "success: false," by: success : function() { callSuccessFunction() },
ajaxSubmit: true,
ajaxSubmitFile: "ajaxSubmit.php",
ajaxSubmitMessage: "Thank you, We will contact you soon !",
success : false,
failure : function() {}


<div id="wrapper">
<div id="form-div">
<h1>Send us a message!</h1>
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] text-input" id="name" />
<label for="name">Name</label>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] text-input" id="email" />
<label for="email">E-mail</label>
<p class="web">
<select name="Subject">
<option value="Question" selected="selected">Question</option>
<option value="Comment">Comment</option>
<option value="Set appointment" >Set Appointment</option>
<label for="subject">Subject</label>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] text-input" id="comment"></textarea>
<p class="submit">
<input type="submit" value="Send" />