Question

我需要动态主题显示＆＃34; customer_name＆＃34;领域。我不能让它适用于.html静态页面。

也许有人可以指导什么是错的，谢谢

＆＃13;

$(document).ready(function() {
    var $sub = $("#_subject");
    $("#contact_name").on("input", function() {
        $sub.val($(this).val() + " (OAK)");
    });      
}, false);

＆＃13;

<form method="post" action="https://formspree.io/my@email.com">
    <div class="row2">
        <input type="hidden" name="_subject" id="_subject" value="OAK Landing (Bottom)" />
        <input type="hidden" name="_format" value="plain" />
        <input type="hidden" name="_next" value="thankyou.html" />
        <input type="text" name="_gotcha" style="display:none" />
        <div class="12u$"><input type="text" name="Name" placeholder="Name" id="contact_name" required="required"/></div>
        <div class="12u$"><input type="tel" name="Phone" placeholder="Phone Number" /></div>
        <div class="12u$"><input type="text" name="E-mail" placeholder="Email" /></div>
        <div class="12u$"><textarea name="Message" placeholder="Message"></textarea></div>
        <div class="12u$"><input type="submit" value="Send Message" /></div>
    </div>
</form>

＆＃13;

Answer 1

我建议在这里使用 ajax 。只需收集变量中的所有表单数据，然后根据需要进行操作并发送。

<form method="post" action="https://formspree.io/my@email.com">
<div class="row2">
 <input type="hidden" name="_subject" id="_subject" value="Landing(Bottom)" />
  <input type="hidden" name="_format" value="plain" />
   <input type="hidden" name="_next" value="thankyou.html" />
   <input type="text" name="_gotcha" style="display:none" />
           <div class="12u$"><input type="text" name="Name" placeholder="Name" id="contact_name" required="required"/></div>
           <div class="12u$"><input type="tel" name="Phone" id="phone_number" placeholder="Phone Number" /></div>
           <div class="12u$"><input type="text" name="E-mail" placeholder="Email" id="email_id" /></div>
            <div class="12u$"><textarea name="Message" placeholder="Message" id="message"></textarea></div>
            <div class="12u$"><input type="button" value="Send Message" id="submitButton" /></div>

   </div>
</form>

<script>

    $(document).ready(function() {

        $('#submitButton').on('click', function() {

            var contact_name= $('#contact_name').val();
            var phone_number= $('#phone_number').val();
            var email_id= $('#email_id').val();
            var message= $('#message').val();
            var subject= $('#_subject').val();


            //send to formspree via ajax
            $.ajax({
                url:'https://formspree.io/my@email.com',
                method:'POST',
                data:{
                    name: contact_name,               
                    email: email_id,
                    phone: phone_number,
                    comments: message,
                    _subject: subject,
                },
                dataType:"json",
                success:function() {
                    alert('your mail has been sent!');               
                }   

            });     

        });

    });  

</script>

Answer 2

我添加了一条警告声明，似乎在https://jsfiddle.net/fjmwfgy1/处理正常。它显示在您提供的link上，您无法在jQuery库中导入，这可以通过使用jQuery CDN页面上的其中一个链接来完成。

$(document).ready(function() {
    var $sub = $("#_subject");
    $("#contact_name").on("input", function() {
        $sub.val($(this).val() + " (OAK)");
        alert($sub.val());
    });      
}, false);

Formspree的动态主题

2 个答案: