Question

我使用来自Tympanus.net的Fullscreen form来允许用户请求报价。我使用以下PHP代码将表单中的答案提交给我的电子邮件，这对我有用。

submit.php

<?php
$FROM = $_POST['Email'];
$to = "myemail@email.com";
$subject = 'A quote for ' . $name . 'is needed.';
$name = $_POST['Name'];
//print_r($_POST);
$data ="";
foreach ($_POST as $field => $value)
{
$data .= "$field: $value\n";
}
//echo $data;
$mime_boundary = "MYFORM".md5(time());
$headers = "From: ".$FROM."\r\n";
$headers .= "Reply-To: ".$FROM."\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: multipart/alternative; boundary=\"$mime_boundary\"\r\n";
$message = "--$mime_boundary\n";
$message .= "Content-Type: text/plain; charset=UTF-8\n";
$message .= "Content-Transfer-Encoding: 8bit\n\n";
$message .= "$data\n\n";
$message .= "--$mime_boundary--\n\n";
$mail_sent = mail( $to, $subject, $message, $headers );

if(mail($FROM, $subject, $message, $headers)) {

    // Email has sent successfully, echo a success page.

    echo "<h2>Email Sent Successfully.</h2>";
    echo "<p>Thank you <strong>$name</strong>, your message has been sent to us.</p>";
    echo "<p>We will get back to you shortly!</p>";

} else {

    echo 'ERROR!';

}

这是表单的HTML代码：

＆＃13;

<form id="myform" method="post" class="fs-form fs-form-full" autocomplete="off" action="submit.php">

<ol class="fs-fields">
	<li>
		<label class="fs-field-label fs-anim-upper" for="q1">What's your name?</label>
		<input class="fs-anim-lower" id="q1" name="Name" type="text" placeholder="John Doe" required/>
	</li>
	<li>
		<label class="fs-field-label fs-anim-upper" for="q2" data-info="We won't send you spam, we promise...">What's your email address?</label>
		<input class="fs-anim-lower" id="q2" name="Email" type="email" placeholder="johndoe@mail.com" required/>
	</li>
	<li data-input-trigger>
		<label class="fs-field-label fs-anim-upper" for="q3" data-info="This will help us know what kind of service you need">What's your priority for your new website?</label>
			<div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
				<span><input id="q3b" name="Type" type="radio" value="conversion"/><label for="q3b" class="radio-conversion">Sell things</label></span>
				<span><input id="q3c" name="Type" type="radio" value="social"/><label for="q3c" class="radio-social">Become famous</label></span>
				<span><input id="q3a" name="Type" type="radio" value="mobile"/><label for="q3a" class="radio-mobile">Mobile market</label></span>
			</div>
	</li>
	<li data-input-trigger>
		<label class="fs-field-label fs-anim-upper" data-info="We'll make sure to use it all over">Choose a primary color for your website.</label>
			<select class="cs-select cs-skin-boxes fs-anim-lower" id="q6" name="Color" required>
				<option value="" disabled selected>Pick a color</option>
				<option value="#588c75" name="Color" data-class="color-588c75" value="#588c75">#588c75</option>
				<option value="#b0c47f" name="Color" data-class="color-b0c47f" value="#b0c47f">#b0c47f</option>
				<option value="#f3e395" name="Color" data-class="color-f3e395" value="#f3e395">#f3e395</option>
				<option value="#f3ae73" name="Color" data-class="color-f3ae73" value="#f3ae73">#f3ae73</option>
				<option value="#da645a" name="Color" data-class="color-da645a" value="#da645a">#da645a</option>
				<option value="#79a38f" name="Color" data-class="color-79a38f" value="#79a38f">#79a38f</option>
				<option value="#c1d099" name="Color" data-class="color-c1d099" value="#c1d099">#c1d099</option>
				<option value="#f5eaaa" name="Color" data-class="color-f5eaaa" value="#f5eaaa">#f5eaaa</option>
				<option value="#f5be8f" name="Color" data-class="color-f5be8f" value="#f5be8f">#f5be8f</option>
				<option value="#e1837b" name="Color" data-class="color-e1837b" value="#e1837b">#e1837b</option>
				<option value="#9bbaab" name="Color" data-class="color-9bbaab" value="#9bbaab">#9bbaab</option>
				<option value="#d1dcb2" name="Color" data-class="color-d1dcb2" value="#d1dcb2">#d1dcb2</option>
				<option value="#f9eec0" name="Color" data-class="color-f9eec0" value="#f9eec0">#f9eec0</option>
				<option value="#f7cda9" name="Color" data-class="color-f7cda9" value="#f7cda9">#f7cda9</option>
				<option value="#e8a19b" name="Color" data-class="color-e8a19b" value="#e8a19b">#e8a19b</option>
				<option value="#bdd1c8" name="Color" data-class="color-bdd1c8" value="#bdd1c8">#bdd1c8</option>
				<option value="#e1e7cd" name="Color" data-class="color-e1e7cd" value="#e1e7cd">#e1e7cd</option>
				<option value="#faf4d4" name="Color" data-class="color-faf4d4" value="#faf4d4">#faf4d4</option>
				<option value="#fbdfc9" name="Color" data-class="color-fbdfc9" value="#fbdfc9">#fbdfc9</option>
				<option value="#f1c1bd" name="Color" data-class="color-f1c1bd" value="#f1c1bd">#f1c1bd</option>
			</select>
	</li>
						
	<li>
		<label class="fs-field-label fs-anim-upper" for="q4">Extra Details</label>
		<textarea class="fs-anim-lower" id="q4" name="Details" required></textarea>
	</li>
	<li>
		<label class="fs-field-label fs-anim-upper" for="q5">What's your budget?</label>
		<input class="fs-mark fs-anim-lower" id="q5" name="Budget" type="number" placeholder="USD" step="100" min="100" required/>
	</li>
</ol><!-- /fs-fields -->
	<button class="fs-submit" type="submit">Send</button>
</form><!-- /fs-form -->

＆＃13;

基本上，我想要的是当用户点击“提交”按钮时，按钮变为绿色，文本变为“已提交”状态。而不是将其带到空白页面并显示代码当前所做的成功行。我知道我可能不知道如何去做。任何帮助将不胜感激！

提交表单并显示成功/错误消息，无需重新加载页面

0 个答案: