2015-04-19 3 views
1

Как написать код для создания рабочей кнопки отправки, где кто-то нажимает кнопку отправки на моей странице, и эти данные поступают на мой рабочий идентификатор электронной почты, например, до [email protected].Создайте рабочую кнопку отправки формы для отправки электронной почты

"Не отдавая предпочтение JavaScript .. Предпочитаю писать код в HTML 5 & CSS3"


Вот HTML-код для моей формы

<div id="forms"> 
    <form class="form"> 

     <p class="name"> 
      <input type="text" name="name" id="name" placeholder="Enter Your Name" /> 
     </p> 

     <p class="email"> 
      <input type="text" name="email" id="email" placeholder="[email protected]" /> 
     </p> 

     <p class="web"> 
      <input type="text" name="web" id="web" placeholder="9876 543 210" /> 
     </p>   

     <p class="text"> 
      <textarea name="text" placeholder="Write something to us" /></textarea> 
     </p> 

     <p class="submit"> 
      <input type="submit" value="Send" /> 
     </p> 
    </form> 
</div> 

и Вот мой CSS код для кнопки отправки

.submit input { 
    width: 100px; 
    height: 40px; 
    background-color: #474E69; 
    color: #FFF; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px;  
} 

ответ

2

Первый: простые формы имеют атрибут действия, который содержит адрес страницы, которая получает данные формы, в то время ваша форма не имеет:

<form action="sendmail.php"> 

Второе: Вы не можете отправить форму с использованием чистого HTML и CSS, и вам нужен язык стороне сервера а также PHP или ASP для получения данных формы и обработки их для отправки по электронной почте.

+0

Thnx дорогой .. Так что это можно сделать с .net. Если да, то моя проблема будет решена. !! – unnikrishnan

+1

Проверьте этот код. Вы должны заменить почтовый ящик и ресивер и т. Д. Данными, полученными из формы: https://help.1and1.com/hosting-c37630/scripts-and-programming-languages-c85099/aspnet-c39624/send-an-e -mail-using-aspnet-a604246.html –

+1

Кроме того, Добро пожаловать в stackoverflow.com. Вы можете принять ответы на лучший ответ или ранг, используя флажки и стрелки сверху вниз рядом с ответами. –

0

Концепция заключается в том, чтобы зафиксировать кнопку отправки и предотвратить поведение функции по умолчанию, возвращая значение false. Внутри функция захватывает входное значение формы и строит тело. активируйте ссылку, отправив ей mailto в качестве значения для href. Я не проверял его для активации связи с тем, вероятно, лучше, чтобы начать тестирование с IE Надеется, что это может помочь Алан Mehio Лондона

<body> 
    <div id="forms" > 
<form id="myform" class="form" action="#"> 

<p class="name"> 
<input type="text" name="myname" id="myname" placeholder="Enter Your Name" /> 
</p> 

<p class="email"> 
<input type="text" name="myemail" id="myemail" placeholder="[email protected]" /> 
</p> 

<p class="web"> 
<input type="text" name="myphone" id="myphone" placeholder="9876 543 210" /> 
</p>   

<p class="text"> 
<textarea name="mytext" placeholder="Write something to us" /></textarea> 
</p> 

<p class="submit" > 
<input type="submit" value="Send" onClick="sendEmail()"/> 
</p> 
</form> 
    <a id="mylink" href="#"> </a> 
</div> 
    <script> 
    function sendEmail() { 
     var str = "name: " + document.forms.myform.myname.value + "\n" + "email: " + document.forms.myform.myemail.value + "\n" + "phone: " + document.forms.myform.myphone.value + "\n" + 
      "text: " + document.forms.myform.mytext.value;  
     var link = document.getElementById("mylink"); 
     link.href="/mailto:[email protected]?subject=form submottion&body=" + str; 
     clickLink(link); 
     return false; 
    } 


function clickLink(link) { 

    if (isIE()) 
    { 
     link.click(); 
     return; 
    } 
    else if (document.createEvent) 
    { 
     var e = document.createEvent('MouseEvents'); 
     e.initEvent(
     'click'  // event type 
     ,true  // can bubble? 
     ,true  // cancelable? 
    ); 
    var allowDefaultAction = link.dispatchEvent(e);   
    } 

} 

function isIE() { 
    var myNav = navigator.userAgent.toLowerCase(); 
    return (myNav.indexOf('msie') != -1) ? true : false; 
} 

</script> 

</body> 
+0

Просто чтобы подтвердить здесь, что javascript не может отправить электронное письмо, но вышеприведенная ссылка, которая вызывается, вызовет почтовый клиент по умолчанию на пользовательском компьютере с предварительно заполненными данными. Пользователь должен отправить электронное письмо с помощью выбранного почтового клиента. –

-1
   <div class="col-md-6 col-sm-12" > 
        <h3>Need Help ? Write Us. </h3> 
        <hr /> 
        <form> 
         <div class="row"> 
          <div class="col-md-6 col-sm-6"> 
           <div class="form-group"> 
            <input type="text" class="form-control" required="required" placeholder="Name"> 
           </div> 
          </div> 
          <div class="col-md-6 col-sm-6"> 
           <div class="form-group"> 
            <input type="text" class="form-control" required="required" placeholder="Email address"> 
           </div> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-12 col-sm-12"> 
           <div class="form-group"> 
            <textarea name="message" id="message" required="required" class="form-control" rows="3" placeholder="Message"></textarea> 
           </div> 
           <div class="form-group"> 
            <button type="submit" class="btn btn-primary">Submit Request</button> 
           </div> 
          </div> 
         </div> 
        </form> 
       </div> 

      </div> 
     </div> 
+0

Не могли бы вы объяснить, почему вы подразумеваете, что это правильный ответ? – Squazz

0

Рева код будет представлять письмо на адрес электронной почты введите вместо [email protected] (в вашем случае [email protected])

<input type="submit" value="SUBMIT EMAIL TO: [email protected]"><a href="mailto:[email protected]"> 
+2

Добро пожаловать в переполнение стека! Благодарим вас за этот фрагмент кода, который может предоставить некоторую ограниченную немедленную помощь. Правильное объяснение [значительно улучшило бы] (// meta.stackexchange.com/q/114762) его долгосрочную ценность, показав * почему * это хорошее решение проблемы и сделало бы его более полезным для будущих читателей с другие, подобные вопросы. Пожалуйста, отредактируйте свой ответ, чтобы добавить какое-то объяснение, включая сделанные вами предположения. –

Смежные вопросы