Generate your first Web to Lead form

Introduction

Web-to-Lead is a functionality that every business should implement, if they aren’t already. I’ve seen too many organizations that receive contact form fills via email, and then manually enter that same information into Salesforce as a new lead. Why not skip that step and save some time?

From the Video

Below is the final code of the simple web-to-lead form that we generated, cleaned up, and styled ever-so-minimally!

If you want to copy this code, remember to replace “YOUR_ORG_ID_HERE” on line 20 (highlighted below) with whatever your Org ID is — or just generate your own form and paste the generated line over this one.

<!DOCTYPE HTML>

  <head>
    <title>My Web-To-Lead</title>
    <link rel="stylesheet" href="styles.css" />
    <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8" />
  </head>

  <body>

    <div class="container mw7 center pa5">

      <div class="form-title pb4">
        <span class="f2 fw4">My Web-to-Lead Form</span>
      </div>

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

        <div class="form-item cf">
          <input type=hidden name="oid" value="YOUR_ORG_ID_HERE">
          <input type=hidden name="retURL" value="http://mywebsite.com/thankyoupage">
        </div>

        <div class="form-item cf pa4">
          <div class="fl item-label w-100">
            <span class="f3 fw6">First Name</span>
          </div>
          <div class="fl item-input w-100">
            <input class="w-75-ns w-100 f4" id="first_name" name="first_name" type="text" />
          </div>
        </div>

        <div class="form-item cf pa4">
          <div class="fl item-label w-100">
            <span class="f3 fw6">Last Name</span>
          </div>
          <div class="fl item-input w-100">
            <input class="w-75-ns w-100 f4" id="last_name" name="last_name" type="text" />
          </div>
        </div>

        <div class="form-item cf pa4">
          <div class="fl item-label w-100">
            <span class="f3 fw6">Email Address</span>
          </div>
          <div class="fl item-input w-100">
            <input class="w-75-ns w-100 f4" id="email" name="email" type="text" />
          </div>
        </div>

        <div class="form-item cf pa4">
          <div class="fl item-label w-100">
            <span class="f3 fw6">Phone Number</span>
          </div>
          <div class="fl item-input w-100">
            <input class="w-75-ns w-100 f4" id="phone" name="phone" type="text" />
          </div>
        </div>

        <div class="form-item cf pa4">
          <div class="fl item-label w-100">
            <span class="f3 fw6">Company</span>
          </div>
          <div class="fl item-input w-100">
            <input class="w-75-ns w-100 f4" id="company" name="company" type="text" />
          </div>
        </div>

        <div class="form-item cf pa4">
          <input class="pa2 w5" type="submit" name="submit">
        </div>


      </form>

    </div>

  </body>

Add comment

Recent Posts

Categories