Salesforce Web-to-Lead

Salesforce lets you easily create web-to-lead forms that capture information about visitors to your website. The information is automatically stored in new lead records in your Salesforce dashboard, and the lead can then be scored, qualified, and routed to sales reps. From there, you can redirect visitors to other pages on your site, send automated email follow-ups, and start them on customer journeys..

Setting up the Salesforce App

Step 1: Sign Up to Salesforce

To get started with Salesforce, sign up for a Free Account

Step 1: Sign up for Salesforce 

Step 1: Sign Up to Salesforce

Step 2: Setting up an Agility CMS Website

We'll want to add our Salesforce App to an Agility CMS powered website. Sign up for a Free Agility CMS Account. Once you have an account, you'll be able to select a starter and create an Instance.

Getting Started with Agility CMS

Step 3: Getting your OID key

To allow your app to send leads from your site to Salesforce, we need to generate an OID key.

Go to the Web-to-lead page by clicking on the settings icon near your profile picture and search for Web-to-lead on the quick search bar.

Web-to-lead page

Click on the create a form button and hit generate. 

You should then see an HTML text that contains the OID input element. Copy the value.

Click on the create a form button and hit generate. 

Install the Salesforce App

In order to use an App in Agility CMS, you must register this app within your Organization in Agility CMS. Then, you can install this app within any Instance in your Organization.

Register this app in Agility [Update when app is deployed in Vercel]

See here for more documentation on Agility CMS Apps.

Using the Salesforce App

After Installing the Salesforce App add a Salesforce custom field to a Page Module.

Make sure the custom field is highlighted and the Salesforce app is selected under the field type dropdown then save.

Using the Salesforce app

Now that we have created the Salesforce lead module we then need to attach it to a page.

Create a new page and hit Add. On the fly-out panel you should see the Salesforce lead module we just created. After adding the new module, click it and you should be able to see a custom form builder.

Available fields are the fields your site will display to capture leads and send those to your Salesforce dashboard. You can also re-order the fields if needed.

Return URL is the URL the user will be redirected to after submitting the form.

Submit Text is the submit button text your form will display.

Submit text for Saleforce 

Rendering the form data

Once you've installed and applied the app as custom field to your page, you can then use the script below to convert the form data to HTML.

For this example we are using the Agility CMS NextJS starter

Please see the above README on how to consume pages and modules.

import React from "react";

const InputText = ({ id, name, metaData }) => {
  return (
    <div className="input-field">
      <label htmlFor={id}>
        {name}
      </label>
      <input id={id} maxLength={metaData.maxlength} name={id} type={metaData.type} />
    </div>
  )
}

const Select = ({ id, name, metaData }) => {
  return (
    <div className="select-field">
      <label htmlFor={id}>{name}</label>
      <select id={id} name={id}>
        <option value="">--None--</option>
        {metaData.options.map((option) => (
          <option value={option}>{option}</option>
        ))}
      </select>
    </div>
  )
}

const Textarea = ({ id, name, metaData }) => {
  return (
    <div className="textarea-field">
      <label htmlFor={id}>{name}</label>
      <textarea name={id}></textarea>
    </div>
  )
}

const Checkbox = ({ id, name, metaData }) => {
  return (
    <div className="checkbox-field">
      <label for={id}>{name}</label>
      <input id={id} name={id} type={metaData.type} value={metaData.value} />
    </div>
  )
}

const HiddenText = ({ name, value }) => {
  return (
    <input type="hidden" name={name} value={value} />
  )
}

const renderFields = (param, index) => {
  if (!param.isSelected) return null;
  switch (param.metaData.type) {
    case 'text':
      return <InputText {...param} key={index} />;
    case 'textarea':
      return <Textarea {...param} key={index} />;
    case 'select':
      return <Select {...param} key={index} />;
    case 'checkbox':
      return <Checkbox {...param} key={index} />;
    default:
      return null;
  }
}


const SalesforceLead = ({ module }) => {
  // replace salesforceLead with the property name you set your custom field to
  const { fields: { salesforceLead = undefined } } = module;
  if (!salesforceLead) return null;

  const { leadOID, actionURL, formData, retURL, submitText } = JSON.parse(salesforceLead);

  return (
    <div className="form-container">
      <h1>{module.fields.title}</h1>
      <form action={actionURL} method="POST">
        <HiddenText name="oid" value={leadOID} />
        // if return URL is empty it will default to the agilitycms website
        <HiddenText name="retURL" value={retURL ? retURL : "http://agilitycms.com"} />
        {formData.map((field, index) => (
          renderFields(field, index)
        ))}
        // set default button to submit
        {formData.length && <input type="submit" value={submitText ? submitText : "Submit"} />}
      </form>
    </div>
  );
};

export default SalesforceLead;