When a customer arrives on a Cloud page, having a pre-filled form with the information we know about the customer is crucial to a good user experience.
Salesforce Marketing Cloud allows us to pre-populate forms with relative ease using only few lines of AMPscript.
Not a fan of reading? Jump to the code snippet.
Data source
To pre-fill a form, we need to retrieve the information we know about the customer from a data source. This source could be a Data Extension, a Salesforce object or the URL parameters.
URL parameters
Let’s start with something simple, by building our Cloud page with the following URL and adding 2 parameters: fname and lname.
https://cloudpage.xyz?fname=Snake&lname=Plissken
As for the form, let’s also keep it simple:
<form>
<input name="fname" type="text" placeholder="First name">
<input name="lname" type="text" placeholder="Last name">
<button>Submit</button>
</form>
In this case, we first need to use the QueryParameter, since we are retrieving the data form the query string. Then a simple v function to output the newly set variables.
%%[
SET @FirstName = QueryParameter('fname')
SET @LastName = QueryParameter('lname')
]%%
<form>
<input name="fname" value="%%=v(@FirstName)=%%" type="text" placeholder="First name">
<input name="lname" value="%%=v(@LastName)=%%" type="text" placeholder="Last name">
<button>Submit</button>
</form>
Let’s have a look at another example, like a select field:
%%[
SET @Fruit = QueryParameter('fruit')
]%%
<select name="fruits" required>
<option value=""></option>
<option %%[ IF @Fruit == 'apple' THEN ]%% selected="" %%[ ENDIF ]%% value="Apple">Apple</option>
<option %%[ IF @Fruit == 'orange' THEN ]%% selected="" %%[ ENDIF ]%% value="Orange">Orange</option>
<option %%[ IF @Fruit == 'peach' THEN ]%% selected="" %%[ ENDIF ]%% value="Peach">Peach</option>
</select>
Easy peasy, let’s move on!
Data Extension
When it comes to Data Extensions, the process gets a bit more complicated, but not by much.
This time, instead of passing the 2 parameters in the URL, let’s retrieve them by using a single parameter, Customer ID:
https://cloudpage.xyz?id=0x00256894
And a Data Extension named DataSource with the following data and structure:
Customer ID | First name | Last name |
0x00256894 | Snake | Plissken |
In this scenario, we need to use a Lookup function to get the data from the Data Extension based on the id parameter from the URL query string.
%%[
SET @id = QueryParameter('id')
SET @FirstName = Lookup('DataSource','First name','Customer ID',@id)
SET @LastName = Lookup('DataSource','Last name','Customer ID',@id)
]%%
This is a fine way to get the data that we need but not the most practical. Instead of retrieving the data one by one, what if we retrieved all the data at once? In this case, LookupRows is the most appropriate function to use.
%%[
SET @Id = QueryParameter('id')
SET @Rows = LookupRows('DataSource','Customer ID',@Id)
IF ROWCOUNT(@Rows) > 0 THEN
SET @FirstName = FIELD(ROW(@Rows,1),'First name')
SET @LastName = FIELD(ROW(@Rows,1),'Last name')
ENDIF
]%%
<form>
<input name="fname" value="%%=v(@FirstName)=%%" type="text" placeholder="First name">
<input name="lname" value="%%=v(@LastName)=%%" type="text" placeholder="Last name">
<button>Submit</button>
</form>
Note that in this example, we retrieve the first record on purpose, considering that Customer ID is a Primary key and is therefore unique.
If there were more than 1 record for the same Customer ID, taking the latest record would have been more appropriate.
SET @FirstName = FIELD(ROW(@Rows,ROWCOUNT(@Rows)),'First name')
Salesforce object
Retrieving a Salesforce object should be done with care, as it’s not as flexible as you might think.
For this example, please consider a Salesforce object named Contact that includes 3 fields, named CustomerID, FName and LName.
In the same manner, let’s code something simple first:
%%[
SET @Id = QueryParameter('id')
SET @FirstName = RetrieveSalesforceObjects('Contact',"FName","CustomerID","=",@Id)
SET @LastName = RetrieveSalesforceObjects('Contact',"LName","CustomerID","=",@Id)
]%%
Again, as simple as it seems, these are 2 separate requests and this method is therefore far from optimal. Let us retrieve all the fields at once:
%%[
SET @Id = QueryParameter('id')
SET @Rows = RetrieveSalesforceObjects('Contact', 'FName, LName', 'CustomerID', '=', @Id)
IF ROWCOUNT(@Rows) > 0 THEN
SET @FirstName = FIELD(ROW(@Rows,ROWCOUNT(@Rows)),'FName')
SET @LastName = FIELD(ROW(@Rows,ROWCOUNT(@Rows)),'LName')
ENDIF
]%%
<form>
<input name="fname" value="%%=v(@FirstName)=%%" type="text" placeholder="First name">
<input name="lname" value="%%=v(@LastName)=%%" type="text" placeholder="Last name">
<button>Submit</button>
</form>
Note that the second parameter in the RetrieveSalesforceObjects function is a comma separated list of field names on the Salesforce side. Forget one and you will not be able to retrieve it with the Field function.
Have I missed anything?
Please poke me with a sharp comment below or use the contact form.
Hi Ivan,
I receive to the error 500 – Internal server error.
There is a problem with the resource you are looking for, and it cannot be displayed. When I perform aall steps in creating the DE and form. Have you seen this before? Any help would be greatly appreciated.
Thank You,
Valerie
Error 500 can sometimes be debugged using this method :
https://ampscript.xyz/how-tos/how-to-debug-ampscript-errors/
It should give you more information about what‘s going on.
Hi Ivan,
Can we have a snippet to pre-populate the dropdown field (Select). I am finding this one as challenging to populate; and might be helpful for others as well.
Thank you in advance.
Your wish is my command Sir: https://ampscript.xyz/how-tos/prefill-form-with-ampscript/#example-select