Search jQuery

jQuery Forum

Contact Form In Dialog

in Using jQuery UI • 1 year ago

Hi everyone. I have been following the sample modal form found here http://jqueryui.com/demos/dialog/#modal-form but I cannot figure out how to get this form to send an email instead. I would like to use PHP but I am unsure how to make this work with the jQuery code. Any tips or better yet, a working sample that's close to the example provided?

Replies(2)

kboudloche

Re: Contact Form In Dialog

1 year ago

i'm doing this on my site with the following code:

<div id="contact" class="comments">
<form id="contactform" method="POST" action="/ajax/">
<h1>Contact Tentonaxe.com</h1>
<input type="hidden" name="method" value="contactEmail" />
<label for="name">Name</label><input type="text" id="stuff" name="stuff" class="stuff" /><input type="text" id="name" name="name" maxlength="20" /><br /><br />
<label for="email">Email Address</label><input id="email" type="text" name="email" maxlength="75" /><br /><br />
<label for="website">Website</label><input id="website" type="text" name="website" maxlength="75" /><br /><br />
<label for="content-comment">Content</label><textarea id="content-comment" name="content"></textarea><br />
<div class="note">Limit: 500 characters. All xml/html tags will be converted to plain text.</div><br />
<input type="submit" value="Submit" />
</form>
</div>
<script>
$(document).ready(function(){
$('#contactform').submit(function(){
var $f = $(this);
$.ajax({
url: $f.attr('action'),
type: $f.attr('method'),
data: $f.serializeArray(),
success: function(){
$f.parent().html('<div class="thankyou">Thank you!</div>');
}
});
return false;
});
});
</script>

and i'm handling the dialog with a plugin called Boxy, however, this form will work in a jqueryUI dialog aswell.

serverside, you just accept the form fields and send an email with them. I dont do much php, so i cant help you with that part. you can see it in action at www.tentonaxe.com, just click on contact at the top.

the input with an ID and Class of "stuff" is my honeypot captcha, the idea behind it is to require that it be blank before sending any emails. The purpose of that is spam bots like to fill in all the fields, so if it fills in the stuff input, the i dont send the email on the server-side, but get rid of the form asif it was successful.

-- Kevin

------------------------------------------------
http://www.tentonaxe.com - New Design!

kfsanders

Re: Contact Form In Dialog

1 year ago

Thanks for the example! I'm not understanding how to get the server to process the data. I simply want to send an email. So after validation occurs, how do I call the php file that will send the email? Below is the code from the sample modal form provided on this website. What code would I use to process the send_mail.php file?

					if (bValid) {
						$('#users tbody').append('<tr>' +
							'<td>' + name.val() + '</td>' + 
							'<td>' + email.val() + '</td>' + 
							'<td>' + password.val() + '</td>' +
							'</tr>'); 
						$(this).dialog('close');

Top Reply

Response title

Attachments

jQuery Forum

Contact Form In Dialog

Replies(2)

Re: Contact Form In Dialog

Re: Contact Form In Dialog

Statistics

Tags

Actions

Related Posts