Question

我有一个SVG动画按钮作为联系表单的提交按钮。我找到了一个带有标签here的简洁解决方案，但是标签不允许在其中使用div。我在网上搜索并在按钮标签中找到了一个解决方案，据说其功能与输入提交相同。不幸的是，我不知道为什么它不起作用。如果我使用标签解决方案进行测试，它就可以工作，并且表单会被提交，所以PHP部分似乎没问题。

HTML：

<form method="post" action="resources/js/send_email.php" id="contact_form">
   <div class="row">
       <div class="col span-2-of-4">
           <input type="text" name="name" id="name" placeholder="Name" required>
            <input type="email" name="email" id="email" placeholder="E-mail" required>
    </div>
    <div class="row">
         <textarea name="message" placeholder="Message" id="message" required></textarea>
     </div>
     <div class="row" id="send-btn">
         <div class="btn btn-main">
             <button type="submit" class="send-btn">       
             <svg>
                <rect fill="none" width="100%" height="100%"/>
             </svg>
                   SEND
              </button>
          </div>     
      </div>
     </div>                   
 </form>

CSS：

.btn {
  color: #c9234a;
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  line-height: 45px;
  max-width: 240px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
  margin: 0 20px;
  border-radius: 5px;
}

.btn p {
    color: #373638;
}

.btn-main {
  font-weight: 100;
}

.btn-main svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.btn-main rect {
  fill: none;
  stroke: #c9234a;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
}

.btn-main:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 700;
  letter-spacing: 1px;
}

.btn-main:hover rect {
  stroke-width: 3;
  stroke-dasharray: 74, 380;
  stroke-dashoffset: 85;
  transition: all 1.35s cubic-bezier(0.35, 1, 0.1, 1);
}

PHP：

<?php
//we need to get our variables first

$to       =   'test@test.me'; //the address to which the email will be sent
$name     =   $_POST['name'];
$email    =   $_POST['email'];
$message  =   $_POST['message'];
$subject  =   'CONTACT FORMULAR';

/*the $header variable is for the additional headers in the mail function,
 we are assigning 2 values, first one is FROM and the second one is REPLY-TO.
 That way when we want to reply the email gmail(or yahoo or hotmail...) will know
 who are we replying to. */
$headers  = "From: $email\r\n";
$headers .= "Reply-To: $email\r\n";

if ($_POST['submit']){     
if(mail($to, $subject, $message, $headers)){
    echo '<p>Thank you. We will answer your message in the shortest time possible.</p>'; // we are sending this text to the ajax request telling it that the mail is sent.      
}else{
    echo '<p>Something went wrong, go back and try again!</p>';// ... or this one to tell it that it wasn't sent    
}
}
?>

我知识渊博，所以非常感谢你的帮助！

Answer 1

2个解决方案， 1.使用JavaScript在点击事件上提交表单，在这种情况下，您几乎可以使用任何东西来触发事件。

简单JS示例

var form = document.getElementById("myFormId");
document.getElementById("myButtonId").addEventListener("click", function () {
  form.submit();
});

单独保存svg并将其用作现有按钮的背景图像

SVG文件示例请注意动画如何保存在文件中

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="50px" height="50px" viewBox="0 0 128 128" xml:space="preserve"><g><path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z" fill="#ffffff" fill-opacity="1"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1200ms" repeatCount="indefinite"></animateTransform></g></svg>

CSS

.myButtonElement{
  background-image:url('path to my SVG');
}

第二种方法的缺点是你无法访问svg元素用于CSS或JS目的。

联系表格SVG提交按钮不起作用（按钮标签而不是输入标签）

1 个答案: