私は自分のサイトにフィードバックセクションを設定したいのですが、コードはw3schoolのTryIt Editorで正常に動作していたようですが、何らかの理由で自分のサイトでは機能しませんでした。 MAILTO:フォームアクションの代替?
のmailtoを...私はかなり似ても、ここでスタックオーバーフロー上の別の質問を見つけたが、私はこのanswerを見た:フォームアクションがうまく一緒に遊んでブラウザやローカル電子メールクライアントに依存します。彼らはこれをまれにしか行いませんが、mailto:フォームアクションはWWW上では使用できません。
電子メールを送信するサーバー側プログラムと置き換えます。
誰かがこれが意味するものの例を挙げることができますか?それはかなり曖昧だった、私は彼らがPHPのようなものを意味していたと仮定しているが、私はあまりよく分からない。
CSS:
.form-style-1 {
margin:10px auto;
max-width: 400px;
padding: 20px 12px 10px 20px;
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
padding: 0;
display: block;
list-style: none;
margin: 10px 0 0 0;
}
.form-style-1 label{
margin:0 0 3px 0;
padding:0px;
display:block;
font-weight: bold;
}
.form-style-1 input[type=text],
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea,
select{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border:1px solid #BEBEBE;
padding: 7px;
margin:0px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}
.form-style-1 input[type=text]:focus,
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus,
.form-style-1 select:focus{
-moz-box-shadow: 0 0 8px #88D5E9;
-webkit-box-shadow: 0 0 8px #88D5E9;
box-shadow: 0 0 8px #88D5E9;
border: 1px solid #88D5E9;
}
.form-style-1 .field-divided{
width: 49%;
}
.form-style-1 .field-long{
width: 100%;
}
.form-style-1 .field-select{
width: 100%;
}
.form-style-1 .field-textarea{
height: 100px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
background: #4B99AD;
padding: 8px 15px 8px 15px;
border: none;
color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style input[type=button]:hover{
background: #4691A4;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
.form-style-1 .required{
color:red;
}
HTML:
<html>
<head>
</head>
<body>
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
<ul class="form-style-1">
<li>
<label>
Full Name <span class="required">*</span>
</label>
<input type="text" name="field1" class="field-divided" placeholder="First"/>
<input type="text" name="field2" class="field-divided" placeholder="Last"/>
</li>
<li>
<label>
Email <span class="required">*</span>
</label>
<input type="email" name="field3" class="field-long" />
</li>
<li>
<label>
Subject
</label>
<select name="field4" class="field-select">
<option value="Feedback">Feedback</option>
<option value="Suggestion">Suggestion</option>
<option value="General">General</option>
</select>
</li>
<li>
<label>
Your Message <span class="required">*</span>
</label>
<textarea name="field5" id="field5" class="field-long field-textarea"></textarea>
</li>
<li>
<input type="submit" value="Submit" />
</li>
</ul>
</form>
<body>
これは部分的な回答に過ぎず、完全には解決できません。彼らのコードで何かを逃した。 –