Salesforce - Leads werden nicht gesendet

Question

Ich habe ein Formular, das ich eingereicht habe, sodass Leads zu Salesforce weitergeleitet werden können. Aus irgendeinem Grund passieren die Informationen nicht. Dieser Fehler kann daran liegen, dass ich die Senden-Schaltfläche zunächst deaktiviert habe. Sobald der Benutzer alle Informationen eingegeben hat, wird die Schaltfläche aktiviert. Die Informationen oder Leads werden jedoch weiterhin nicht in Salesforce übertragen. Der Client sagt, wenn ich die Übermittlungsschaltfläche ohne "disabled =" deaktiviert "im HTML, dass das Formular funktioniert und die Leads an Salesforce gehen. Das Problem ist, dass, wenn ich die" deaktiviert = "deaktiviert" aus dem HTML der Der Benutzer kann immer noch auf Senden klicken, auch wenn in den Eingabefeldern kein Text vorhanden ist. Wenn jemand mir bei diesem Problem helfen könnte, würde ich es sehr schätzen. Ich habe eine Geige angebracht, aber es zeigt wirklich nicht die Salesforce-Seite der Dinge.

Fiddle

<form id="contact_form" class="container form-hide" autocomplete="off" autocomplete="false" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" style="background-color: #00AB8E"> 
       <label>First Name 
       <span class="error">Please enter data.</span> 
       <input id="tesFN first_name " maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i> 
       </label> 
       <label>Last Name 
       <input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i> 
       </label> 
       <label>Email 
       <span class="error">Please enter a valid email address</span> 
       <input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-times-circle-o" aria-hidden="true"></i> 
       </label> 
       <label>Phone 
       <span class="error">Please enter a valid phone number</span>    
       <input id="phone" maxlength="80" name="phone" size="20" type="tel" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i> 
       </label> 
       <label>City 
       <input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i> 
       </label> 
       <label>State/Province 
       <input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i> 
       </label> 
       <label id="co">Company 
       <input id="company" name="company" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i> 
       </label> 
       <label>Comments 
       <textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()" required style="background-color: #30bda6"></textarea> 
       <input id="sub2" type="submit" disabled="disabled" value="SUBMIT"/> 
       </label> 

       <div>     
        <select hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest"> 
        <option value="">--None--</option> 
        <option selected="selected" value="Visiant">Visiant</option> 
        <option value="Tessellate">Tessellate</option> 
       </select><br> 

       <select hidden="true" id="lead_source" name="lead_source"> 
        <option value="">--None--</option> 
        <option value="Internal">Internal</option> 
       <option value="Trade Show">Trade Show</option> 
       <option selected="selected" value="Website">Website</option> 
       <option value="Direct Marketing">Direct Marketing</option> 
       <option value="Social Media">Social Media</option> 
       <option value="Other">Other</option> 
       </select><br> 
       </div> 
      </form> 


body { 
    color: #fff; 
    background-color: #30bda6; 
    text-align: center; 
} 

form { 
    color: #fff; 
    background-color: #f78e2a; 
    text-align: center; 
    font-family: Lato; 
} 

* { 
    box-sizing: border-box; 
} 

.form-title { 
    font-size: 38px; 
    color: #fff; 
    font-family: "Lato"; 
    letter-spacing: 70px; 
} 

input { 
    font-size: 15px; 
    height: 48px; 
    margin-top: 8px; 
    color: #333; 
} 

input[type="tel"] { 
    width: 100%; 
    padding: 10px; 
    background-color: #f9a558; 
    border: 1px solid #fff; 
    font-size: 15px; 
    height: 48px; 
    color: #333; 

} 
input[type="text"] { 
    width: 100%; 
    padding: 10px; 
    background-color: #f9a558; 
    border: 1px solid #fff; 
    font-size: 15px; 
    color: #333; 

} 

input:focus { 
    background-color: #fff; 
} 


input[type="text"]:focus { 
    background-color: #fff; 
} 

input[type="text"]:visited { 
    background-color: #fff; 
} 

input[type="tel"]:focus { 
    background-color: #fff; 
} 

input[type="tel"]:visited { 
    background-color: #fff; 
} 

.container { 
    display: flex; 
    flex-direction: column; 
    padding: 5px 0; 
} 

textarea { 
    width: 100%; 
    background-color: #f9a558; 
    border: 1px solid #fff; 
    color: #333; 
    font-family: Lato; 
} 

textarea:focus { 
    background-color: #fff; 
} 

#co { 
    flex-basis: 100%; 
    max-width: 100%; 
} 

label:nth-last-child(-n+2) { 
    flex-basis: 100%; 
    max-width: 100%; 
} 

select, 
label { 
    height: 50px; 
    width: 48%; 
    margin: 2% 1%; 
    text-align: left; 
    font-family: "Lato"; 
    font-size: 15px; 
} 

#sub { 
    border-radius: 6px; 
    width: 120px; 
    height: 35px; 
    text-transform: uppercase; 
    display: block; 
    margin-top: 48px; 
    font-size: 16px; 
    font-family: Lato; 
    border: none; 
} 

#sub2 { 
    border-radius: 6px; 
    width: 120px; 
    height: 35px; 
    text-transform: uppercase; 
    display: block; 
    margin-top: 48px; 
    font-size: 16px; 
    font-family: Lato; 
    border: none; 
} 


label { 
    position: relative; 
} 

.fa { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    transform: translate(-50%, 65%); 
    opacity: 0; 
    transition: opacity .5s, color .5s; 
} 

[data-valid] .fa { 
    opacity: 1; 
    color: #00594C; 
} 

[data-valid="valid"] .fa { 
    color: #00594C; 
} 

[data-valid="error"] .fa { 
    color: #AB0000; 
} 

.error { 
    display: none; 
    color: #AB0000; 
    font-size: .7em; 
    position: absolute; 
    left: 10px; 
    top: 0; 
    transform: translateY(150%); 
    font-size: 12px; 
    margin-top: 2px; 
} 

[data-valid="error"] .error { 
    display: block; 
} 

input#sub2:not([disabled]){ 
    background-color: #fff; 
    color: #00AB8E; 
} 

input#sub:not([disabled]){ 
    background-color: #fff; 
    color: #F68D2E;; 
} 


#thankyou { display:none;} 

#thankyou.success { 
    display: block; 
    text-align: center; 
} 

#tessellate-page input:focus { 
    background-color: #fff !important;; 
} 

#tessellate-page textarea:focus { 
    background-color: #fff !important;; 
} 

#tessellate-page input[type="text"] { 
    width: 100%; 
    padding: 10px; 
    background-color: #30bda6; 
    border: 1px solid #fff; 
    color: #333; 
} 

#tessellate-page input[type="tel"] { 
    background-color: #30bda6; 
} 

#tessellate-page textarea{ 
    background-color: #30bda6; 
} 

#comments_label { 
    margin-top: 8px; 
} 

#cap { 
    margin-top: 20px; 
} 


@media (max-width: 656px) { 
    label { 
    width: 98%; 
    height: 70px; 
    } 

    .fa { 
    transform: translate(-50%, -45%); 
    } 
} 

@media (min-width: 656px) { 
    .container { 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-self: flex-start; 
    } 

    label { 
    margin-bottom: 20px; 

    } 


} 

label { 
    margin-bottom: 48px; 
} 

function phoneNumber(phone) { 
    var phoneno = /^\d{9,11}$/; 

    console.log("PHONE: "+phoneno.test(phone)); 
    return phoneno.test(phone); 
} 

$('input[type="tel"]').on('keyup', function() { 
    var $label = $(this).closest('label'); 
    if ($(this).val().trim() != '') { 
    if ($(this).is('#phone')) { 
     if (phoneNumber($(this).val())) { 
     $label.attr('data-valid', 'valid'); 
     $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle"); 
     } else { 
     $label.attr('data-valid', 'error'); 
     $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o"); 
     } 
    } else { 
     $label.attr('data-valid', 'valid'); 
    } 
    } else { 
    $label.removeAttr('data-valid'); 

    } 
}); 



function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 

    console.log("email: "+re.test(email)); 
    return re.test(email); 
} 

$('input[type="text"]').on('keyup', function() { 
    var $label = $(this).closest('label'); 
    if ($(this).val().trim() != '') { 
    if ($(this).is('#email')) { 
     if (validateEmail($(this).val())) { 
     $label.attr('data-valid', 'valid'); 
     $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle"); 

     } else { 
     $label.attr('data-valid', 'error'); 
     $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o"); 
     } 
    } else { 
     $label.attr('data-valid', 'valid'); 
    } 
    } else { 
    $label.removeAttr('data-valid'); 
    } 

}); 


test = function() { 
    if ($("#first_name").val() 
     && $("#last_name").val() 
     && (validateEmail($("#email").val())) 
     && (phoneNumber($("#phone").val())) 
     && $("#phone").val() 
     && $("#city").val() 
     && $("#state").val() 
     && $("#company").val() 
     && $("#comments").val()) { 

    $("#sub").removeAttr("disabled") && $("#sub2").removeAttr("disabled"); 
    } 
} 


$('#phone').keydown(function(){ 
    var self = $(this); 
    var removedText = self.val().replace(/\D/, ''); 

    self.val(removedText); 
}); 


$("#contact_form").submit(function(event) { 
    console.log("Form success"); 
    ("#contact_form"). 
    event.preventDefault(); 
    return false; 
}) 

$("#sub").submit("click", function(e){e.preventDefault()}) 

$("#sub").on("click", function(e) 
{ 
$("#contact_form").remove(); 
$("#thankyou").addClass("success"); 
}) 


$("#sub2").submit("click", function(e){e.preventDefault()}) 

$("#sub2").on("click", function(e) 
{ 
$("#contact_form").remove(); 
$("#thankyou").addClass("success"); 
}) 

Answer 1

Der Grund, warum die Informationen nicht durch zu Salesforce vorging war, weil die Form abgelöst wurde immer, wenn der Benutzer einreichen geklickt. Das Hinzufügen zu meinem JavaScript löste das Problem:

$("#contact_form").submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url : $(this).attr('action'), 
     type: "post", 
     data: $(this).serialize(), 
     complete : function(jXHR, textStatus) 
     { 
     // console.log("Form success"); 
     $("#contact_form").remove(); 
     $("#thankyou").addClass("success"); 

     }, 
     error: function(jXHR, textStatus, errorThrown) 
     { 
     // console.log(errorThrown); 
     } 
    }); 
});