Loading a php form in a lightbox

When a user clicks a “Send Enquiry” button on my website is it possible to load the form on a lightbox. On clicking the button a value is also passed to the form (product-name).
Kindly help.
Thanks in advance…

PHP does not care where your html form shows up as long as it is valid it should work.

Get this working in straight html first, then make a PHP version if you need to.

As far as I am aware a lightbox is merely a named div with some html inside it, just make sure it is a valid and working form.

Thank you for your reply, Cups.
Let me take a look and come back.

Thanks to your hint, I got the form part working in the popup / lightbox. :slight_smile:
Now after filling the form, when the user clicks submit, is it possible to show the form feedback also inside the same popup?
Kindly tell me how to do it.
Thanks a lot in advance.

You’d need to read up on Ajax to find out how that is done, you replace the contents of the named div with the return value from the form.

If using JQuery this is pretty trivial.

As ever, divide and conquer - get this working in html first, forget about the lightbox code for a bit, just get the Ajax working without the page refreshing, then carefully bring it all together again checking each step of the way.

Thank you…
I used a little ajax script I still am getting the thank you message on an empty window instead of inside the popup. Please be kind enought to spare some time and take a look, tell me what I am doing wrong. Thank you.

This is the part which calls the form on a popup.

<div id="enqbtn">
<p>
<img src="images/enqbtn.gif"  class="fltrht" width="162" height="37" alt="Send Enquiry" />
</p>
</div>

<script type="text/javascript">
T$('enqbtn').onclick = function(){TINY.box.show('testenqform.php?productname=Lifting Socket',1,225,375,1)}
</script>

This is the ajax and the form part


<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//engage on the page load
$(function() {
  $('#enquiryform').submit( function(){
  $('#enquiryform').hide();

  $('.loader').append($('.bar'));
  $('.bar').css({display:'block'});

  $.get('mailenq.php',{name:$('#name').val(),
phone:$('#phone').val(),
email:$('#email').val(),
product:$('#prodct').val()},

  function(data){
    $('.bar').css({display:'none'});
    $('.loader').append(data);
  });
  return false;
  });
});
</script>



<div class="loader"></div>
<div class="bar"></div>

<div id="lbformdiv">
<h3>Enquiry Form</h3>

<form action="mailenq.php" method="" name="enquiryform" id="enquiryform">

<div class="formcapt">Please fill up everything..  </div>
<label for="name">Name </label><br />
<input name="name" type="text" tabindex="1" />
<br />
<label for="phone">Phone  </label><br />
<input name="phone" type="text" tabindex="2" />
<input name="address" class="addr" type="text" />
<br />
<label for="email">Email  </label><br />
<input  name="email" type="text" tabindex="3" />
<br />
<label for="prodct">Product interested in  </label><br />
<input name="prodct" value= "<?php echo $_GET['productname'];?>" type="text" tabindex="4" />
<br />
<label for="button1"></label>
<input id="button1" type="submit" value="SEND" />

</form>

<br class="clear" />
</div>

and finally the sending php with the feedback comments:


<?php
$name = $_GET['name'];
$phone = $_GET['phone'];
$email = $_GET['email'];
$product = $_GET['prodct'];
$subject = "Enquiry";
$message = " Interested in: $product \\r \
 From: $name  \\r \
 Phone: $phone \\r \
 Reply to: $email";
					
mail("xyz@gmail.com", $subject, $message);
?>

<p>
Thank you  <strong><?php echo $name ?></strong>
</p>
<p>
Your message will be answered as soon as possible.
</p>

Extremely sorry for the long post. I am only a php beginner. Kindly help. Thanks a million

I’m sorry but I can feel myself slipping here.

Now you are mixing 3 languages, PHP, JS and HTML.

I am just not that good I am afraid.

If you are fiddling with Ajax you really want to have a browser (Chrome) or an add-in (Firefox’s LiveHTTPHeaders ) which shows you what is being passed back and forth.

This line looks wrong, though it may be a pasting error;


T$('enqbtn').onclick 

But the glaring omission in your code is in that final block, you are not filtering any of the input from the form, you are sending it directly to mail() which leaves you wide open for an attack.

So, in the spirit of divide and conquer… Exactly what is PHP passing back to your page?

If that looks ok and is what you expect, then you probably have a jQuery error in there, so again, you need to start using console.log() at various points - with your browsers debugging kit.

Thanks… but to send the form PHP also has to be used…
Now I click on the button and the form opens and I can send it… But I am facing a new problem…
My page has some javascript tabs… Each product is on a separate tab and the send enquiry button (which mentioned before) on each tab.
The button on first tab works fine… the problem is when I click on the button on second tab nothing happens there but the button on the first tab gets executed! (ie., the form opens) All buttons have similar code.
(I apologize for posting a completely different problem here.)
Anyway, kindly tell me how to prevent this.
Thank you for your help…

I’m sorry but unless you can distill a problem to a piece of code it is unlikely anyone will help you, no matter in which language said problem lies.

Do it in this order:

Get your html working.

Get php outputting your html and get that working without tabs, popups and lightboxes etc - at this stage it does not matter how ugly it looks.

Gradually add your JS or JQuery.

Thank you for your reply, Cups…I will remember your tips…