Menu icon Foundation
Forms, modal & ajax/php

Hi everyone

I was wondering if anyone had experience calling a modal after a form has been sent with php.

I'm really no expert with php/ajax. I mean, I know nothing! A buddy of mine wrote this process-mail.php file that send the content of the form to our company [email protected] address.

<div class="row" id="contact-form">
	<form action="">
		<div class="row">
			<div class="medium-6 columns" style="padding-right:0;">
				<div class="row">
					<div class="medium-6 columns">
						<input type="text" id="firstname" name="firstname" placeholder="First Name" />
					</div>
					<div class="medium-6 columns">
						<input type="text" id="lastname" name="lastname" placeholder="Last Name" />
					</div>
				</div>
				<div class="row">
					<div class="medium-6 columns">
						<input type="text" id="company" name="company" placeholder="Company" />
					</div>
					<div class="medium-6 columns">
						<input id="email" name="email" type="email" placeholder="Email" />
					</div>
				</div>
			</div>
			<div class="medium-6 columns">
				<textarea id="message" name="message" placeholder="Your message"></textarea>
			</div>
		</div>
		<div class="row">
			<div class="medium-2 right" style="text-align:right; padding-right:0.9375em;">
				<a class="button round" id="submit" type="submit" value="Send" data-reveal-id="confirmation-modal">Submit</a>
			</div>
		</div>
	</form>
</div>

    	<div id="confirmation-modal" class="reveal-modal" data-reveal>
			<h2>Awesome. I have it.</h2>
			<p class="lead">Your couch.  It is mine.</p>
			<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>

Two question:

How could I fire a modal that tells the user that the form has been sent after he submitted it?
Is it possible to clear the form's input as the user closes the modal?

Thanks!!

formsmodalsmodalPHPAJAXcall

Hi everyone

I was wondering if anyone had experience calling a modal after a form has been sent with php.

I'm really no expert with php/ajax. I mean, I know nothing! A buddy of mine wrote this process-mail.php file that send the content of the form to our company [email protected] address.

<div class="row" id="contact-form">
	<form action="">
		<div class="row">
			<div class="medium-6 columns" style="padding-right:0;">
				<div class="row">
					<div class="medium-6 columns">
						<input type="text" id="firstname" name="firstname" placeholder="First Name" />
					</div>
					<div class="medium-6 columns">
						<input type="text" id="lastname" name="lastname" placeholder="Last Name" />
					</div>
				</div>
				<div class="row">
					<div class="medium-6 columns">
						<input type="text" id="company" name="company" placeholder="Company" />
					</div>
					<div class="medium-6 columns">
						<input id="email" name="email" type="email" placeholder="Email" />
					</div>
				</div>
			</div>
			<div class="medium-6 columns">
				<textarea id="message" name="message" placeholder="Your message"></textarea>
			</div>
		</div>
		<div class="row">
			<div class="medium-2 right" style="text-align:right; padding-right:0.9375em;">
				<a class="button round" id="submit" type="submit" value="Send" data-reveal-id="confirmation-modal">Submit</a>
			</div>
		</div>
	</form>
</div>

    	<div id="confirmation-modal" class="reveal-modal" data-reveal>
			<h2>Awesome. I have it.</h2>
			<p class="lead">Your couch.  It is mine.</p>
			<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>

Two question:

How could I fire a modal that tells the user that the form has been sent after he submitted it?
Is it possible to clear the form's input as the user closes the modal?

Thanks!!

Eric Dumensil about 5 years ago

Bump, help please! :)

Alexander Assimidis about 5 years ago

You could do it iwth AJAX

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

or u run your php Form Code on the original Site and redirect to another site where to modal opens :=)

[YOUR PHP CODE]
    if (mail($myEmail, $subject, $message)){
        [OPEN YOUR OVERLAY]
    }else{
       [ERROR]
    } 

If u have an further quesiton's just ask