What is your developer-dependent CMS actually costing you? Calculate your costs and get a full report
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 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.
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.
Install the Salesforce App
You can install the Salesforce app from the Settings / Apps section of Agility.
Using the Salesforce App
After Installing the Salesforce App add a Salesforce custom field to a Component Model.
Now that we have created the Salesforce lead component 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 component we just created. After adding the new component, 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.
Rendering the form data in Next.js
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 create pages and components.
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;On this page