如何添加一个下拉菜单，当您 select 一个选项并单击“发送”时，它会在电子邮件中显示该选项？
How do I add a dropdown menu that when you select an option and click send it shows the option in the email?
我有一个我正在制作的网站，我正在添加一个电子邮件部分，通过电子邮件将他们的电子邮件和消息发送给我。我想添加另一个下拉菜单部分。它将具有三种不同的定价选项，基本版、专业版和高级版。然后，无论他们选择哪个选项，都会将其放入电子邮件中，这样我就可以在邮件底部看到它。这是我到目前为止的代码：
<form action="https://postmail.invotes.com/send"
method="post" id="email_form">
<input type="text" name="subject" placeholder="Email" />
<textarea name="text" placeholder="Message">
</textarea>
<input type="hidden" name="access_token" value="0i7j9jp18jinjtx8mhlqvg8k" />
<!-- return urls can be fully qualified -OR-
start with / for root relative -OR-
start with . for url relative -->
<input type="hidden" name="success_url" value=".?message=Email+Successfully+Sent%21&isError=0" />
<input type="hidden" name="error_url" value=".?message=Email+could+not+be+sent.&isError=1" />
<!-- set the reply-to address -->
<!-- <input type="text" name="reply_to"
placeholder="Your Email" /> -->
<!-- to append extra fields, use the extra_ prefix.
Entries will be appended to your message body. -->
<!-- <input type="text" name="extra_phone_number"
placeholder="Phone Number" /> -->
<!-- to split your message into 160 chars
for an sms gateway -->
<!-- <input type="hidden"
name="sms_format" value="true" /> -->
<input id="submit_form" type="submit" value="Send" />
<!-- not required, but we'd appreciate it if you'd link to us somewhere on your site -->
<p>Powered by <a href="https://postmail.invotes.com" target="_blank">PostMail</a></p>
</form>
<!-- optional, prevents the submit button from being pressed more than once -->
<script>
var submitButton = document.getElementById("submit_form");
var form = document.getElementById("email_form");
form.addEventListener("submit", function (e) {
setTimeout(function() {
submitButton.value = "Sending...";
submitButton.disabled = true;
}, 1);
});
</script>
<style>/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}</style>
您可以将下拉菜单放在表单中，然后在提交时截取它并将下拉菜单值附加到用户的文本中。
对于此解决方案，我通过不使用直接将表单发送到服务器的按钮来进行拦截。而是代表它调用一个脚本，然后附加下拉值。
所有其他解释在代码注释中。
function validateThenSend() {
// Write a script that appends the "plan" to the message body, then sends the form to the server.
// Optional validation code
// ...
// If validated, then continue:
// Append the user selected Plan to the textarea.
var curText = document.getElementById("text").value;
curText += "\n\nPLAN: " + document.getElementById("plans").value;
document.getElementById("text").value = curText;
// Submit the form
// Uncomment the next line for the actual Send.
// I have it commented for testing here in SO.
// document.getElementById("email_form").submit();
}
<form action="https://postmail.invotes.com/send"
method="post" id="email_form">
<!-- Add in your dropdown, and give it an id but it wont need a name attribute -->
<select id="plans">
<option value="Plan 1">Plan 1</option>
<option value="Plan 2">Plan 2</option>
<option value="Plan 3">Plan 3</option>
</select>
<br/>
<br/>
<input type="text" name="subject" placeholder="Email" />
<br/>
<br/>
<!-- Give the textarea an id -->
<textarea name="text" placeholder="Message" id="text" cols=30 rows=10></textarea>
<input type="hidden" name="access_token" value="0i7j9jp18jinjtx8mhlqvg8k" />
<!-- return urls can be fully qualified -OR-
start with / for root relative -OR-
start with . for url relative -->
<input type="hidden" name="success_url" value=".?message=Email+Successfully+Sent%21&isError=0" />
<input type="hidden" name="error_url" value=".?message=Email+could+not+be+sent.&isError=1" />
<!-- set the reply-to address -->
<!-- <input type="text" name="reply_to"
placeholder="Your Email" /> -->
<!-- to append extra fields, use the extra_ prefix.
Entries will be appended to your message body. -->
<!-- <input type="text" name="extra_phone_number"
placeholder="Phone Number" /> -->
<!-- to split your message into 160 chars
for an sms gateway -->
<!-- <input type="hidden"
name="sms_format" value="true" /> -->
<!-- hide your Send button or simply remove it -->
<input id="submit_form" type="submit" value="Send" style="display:none"/>
<!-- Make a fake Send button the user will see. -->
<button type="button" onclick="validateThenSend()">Send</button>
<!-- not required, but we'd appreciate it if you'd link to us somewhere on your site -->
<p>Powered by <a href="https://postmail.invotes.com" target="_blank">PostMail</a></p>
</form>
我有一个我正在制作的网站，我正在添加一个电子邮件部分，通过电子邮件将他们的电子邮件和消息发送给我。我想添加另一个下拉菜单部分。它将具有三种不同的定价选项，基本版、专业版和高级版。然后，无论他们选择哪个选项，都会将其放入电子邮件中，这样我就可以在邮件底部看到它。这是我到目前为止的代码：
<form action="https://postmail.invotes.com/send"
method="post" id="email_form">
<input type="text" name="subject" placeholder="Email" />
<textarea name="text" placeholder="Message">
</textarea>
<input type="hidden" name="access_token" value="0i7j9jp18jinjtx8mhlqvg8k" />
<!-- return urls can be fully qualified -OR-
start with / for root relative -OR-
start with . for url relative -->
<input type="hidden" name="success_url" value=".?message=Email+Successfully+Sent%21&isError=0" />
<input type="hidden" name="error_url" value=".?message=Email+could+not+be+sent.&isError=1" />
<!-- set the reply-to address -->
<!-- <input type="text" name="reply_to"
placeholder="Your Email" /> -->
<!-- to append extra fields, use the extra_ prefix.
Entries will be appended to your message body. -->
<!-- <input type="text" name="extra_phone_number"
placeholder="Phone Number" /> -->
<!-- to split your message into 160 chars
for an sms gateway -->
<!-- <input type="hidden"
name="sms_format" value="true" /> -->
<input id="submit_form" type="submit" value="Send" />
<!-- not required, but we'd appreciate it if you'd link to us somewhere on your site -->
<p>Powered by <a href="https://postmail.invotes.com" target="_blank">PostMail</a></p>
</form>
<!-- optional, prevents the submit button from being pressed more than once -->
<script>
var submitButton = document.getElementById("submit_form");
var form = document.getElementById("email_form");
form.addEventListener("submit", function (e) {
setTimeout(function() {
submitButton.value = "Sending...";
submitButton.disabled = true;
}, 1);
});
</script>
<style>/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}</style>
您可以将下拉菜单放在表单中，然后在提交时截取它并将下拉菜单值附加到用户的文本中。
对于此解决方案，我通过不使用直接将表单发送到服务器的按钮来进行拦截。而是代表它调用一个脚本，然后附加下拉值。
所有其他解释在代码注释中。
function validateThenSend() {
// Write a script that appends the "plan" to the message body, then sends the form to the server.
// Optional validation code
// ...
// If validated, then continue:
// Append the user selected Plan to the textarea.
var curText = document.getElementById("text").value;
curText += "\n\nPLAN: " + document.getElementById("plans").value;
document.getElementById("text").value = curText;
// Submit the form
// Uncomment the next line for the actual Send.
// I have it commented for testing here in SO.
// document.getElementById("email_form").submit();
}
<form action="https://postmail.invotes.com/send"
method="post" id="email_form">
<!-- Add in your dropdown, and give it an id but it wont need a name attribute -->
<select id="plans">
<option value="Plan 1">Plan 1</option>
<option value="Plan 2">Plan 2</option>
<option value="Plan 3">Plan 3</option>
</select>
<br/>
<br/>
<input type="text" name="subject" placeholder="Email" />
<br/>
<br/>
<!-- Give the textarea an id -->
<textarea name="text" placeholder="Message" id="text" cols=30 rows=10></textarea>
<input type="hidden" name="access_token" value="0i7j9jp18jinjtx8mhlqvg8k" />
<!-- return urls can be fully qualified -OR-
start with / for root relative -OR-
start with . for url relative -->
<input type="hidden" name="success_url" value=".?message=Email+Successfully+Sent%21&isError=0" />
<input type="hidden" name="error_url" value=".?message=Email+could+not+be+sent.&isError=1" />
<!-- set the reply-to address -->
<!-- <input type="text" name="reply_to"
placeholder="Your Email" /> -->
<!-- to append extra fields, use the extra_ prefix.
Entries will be appended to your message body. -->
<!-- <input type="text" name="extra_phone_number"
placeholder="Phone Number" /> -->
<!-- to split your message into 160 chars
for an sms gateway -->
<!-- <input type="hidden"
name="sms_format" value="true" /> -->
<!-- hide your Send button or simply remove it -->
<input id="submit_form" type="submit" value="Send" style="display:none"/>
<!-- Make a fake Send button the user will see. -->
<button type="button" onclick="validateThenSend()">Send</button>
<!-- not required, but we'd appreciate it if you'd link to us somewhere on your site -->
<p>Powered by <a href="https://postmail.invotes.com" target="_blank">PostMail</a></p>
</form>