Automation, Website

How to generate leads from your website to a specific campaign using Salesforce web-to-lead form

Salesforce Campaign Webform: How to use Salesforce Web-to-Lead Form that will add the lead into a Campaign

HTML CODE:

<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <META> element to your page <HEAD>. -->
<!-- If necessary, please modify the charset parameter to specify the -->
<!-- character set of your HTML page. -->
<!-- ---------------------------------------------------------------------- -->

<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function timestamp() { var response = document.getElementById("g-recaptcha-response"); if (response == null || response.value.trim() == "") {var elems = JSON.parse(document.getElementsByName("captcha_settings")[0].value);elems["ts"] = JSON.stringify(new Date().getTime());document.getElementsByName("captcha_settings")[0].value = JSON.stringify(elems); } } setInterval(timestamp, 500); 
</script>

<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

<input type=hidden name='captcha_settings' value='{"keyname":"PK","fallback":"false","orgId":"XXXXXXX","ts":""}'>
<input type=hidden name="oid" value="XXXXXXX">
<input type=hidden name="retURL" value="https://yourdomain.com/">

<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="info@yourchoicez.com.au"> -->
<!-- ---------------------------------------------------------------------- -->
<div class="field-group">

<div class="field-group-column column-50">
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" />
</div>
<div class="field-group-column column-50">
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" />
</div>
<div class="field-group-column column-100">
<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" />
</div>
<div class="field-group-column column-50">
<label for="phone">Phone</label><input id="phone" maxlength="40" name="phone" size="20" type="text" />
</div>
<div class="field-group-column column-50">
<label for="company">Company</label><input id="company" maxlength="40" name="company" size="20" type="text" />
</div>
<div class="field-group-column column-50">
<label for="title">Title</label><input id="title" maxlength="40" name="title" size="20" type="text" />
</div>
<div class="field-group-column column-50">
<label for="state">State/Province</label><input id="state" maxlength="20" name="state" size="20" type="text" />
</div>
<div class="field-group-column column-100">
<label for="description">
Your Message</label><br><textarea class="field-group-column column-100" name="description" rows="4"></textarea>

<input type=hidden name="lead_source" value="Web">

<input type=hidden name="Campaign_ID" value="7012r000000gXWg">

<div style="margin-top: 15px;" class="g-recaptcha" data-sitekey="XXXXXX"></div>

<input class="elementor-button elementor-size-md" style="margin-top: 15px;" type="submit" name="submit">
</div>
</div>
</form>

CSS CODE:

.field-group-column {
padding: 0px 10px 10px;
}

.field-group-column.column-100 {
width: 100%;
clear: both;
}
@media (min-width: 767px){
.column-50 {
width: 50%;
float: left;
}

}