Don’t make your customers angry forcing them to rewrite the information you already collected.

This article will demonstrate how to easily extract information from the URL address and prefill a form on your website. It is very useful with newsletters but can be used also with your CRM or any other software or app, where a customer clicks on a link.

With a simple jQuery code and one CSS select, you can prefill any form on your website without additional plugins or PHP code.

Example:

In a newsletter, your customer clicks on a link Join the Webinar.

If you set up this link to include an e-mail address in the URL parameter, it can be passed to the linked landing page.

Example of such link is:

example.com/landing/webinar?email=name@customerdomain.com

The result is a landing page with form prefilled

example.com/landing/webinar

Notice that e-mail address is already there, your customer does not have to write it again.

Step 1 – create the link

Whatever modern newsletter system you use, you can customize your texts, templates, and HTML of e-mail messages by using placeholders.

Example for Mailchimp

<a href=”https://example.com?email=|EMAIL|*”>Join the Webinar</a>

Example for Sendy newsletter

<a href=”https://example.com?email=[email]”>Join the Webinar</a>

 Customize the link in any way so it contains parameter=value following the ? on the domain end.

Step 2 – prefill the form

In this example, we use Divi Forms Module with Divi Code Module for a simple demonstration. You can use any other WordPress plugin such as Forminator, Contact Form 7, WPForms, Formidable, Gravity forms, Ninja forms, it is up to you. This blog explains how to prefill independently on the theme or form builder.

Create your landing page and your form to be prefilled.

Take note of CSS ID, class of the element to be prefilled.

In Chrome, Chromium, Firefox, or whatever browser you use, using Devtools, inspect the form element you are willing to prefill. (F12) to open DevTools and usually right-click on the form field and click Inspect to inspect specific elements.

Notice that our id is et_pb_contact_email_0, tak a note.

Insert the following javascript snippet on the same page

Now if you use Divi, use the code module. If you use any other theme or builder, find a way to insert code snippets in your documentation. 


<script>
jQuery( document ).ready(function() {

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
    sURLVariables = sPageURL.split('&amp;'),
    sParameterName,
    i;

for (i = 0; i &lt; sURLVariables.length; i++) {
    sParameterName = sURLVariables[i].split('=');

if (sParameterName[0] === sParam) {
    return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
 }
}
};

var email = getUrlParameter('email');
jQuery('#et_pb_contact_email_0').val(email);

});

<script>

In the javascript, notice the line jQuery('#et_pb_contact_email_0').val(email);.

Change #et_pb_contact_email_0 with whatever is your CSS ID from previous step. 

Change variable email to the parameter name, you are trying to extract from the URL.

This way, you can alter the script to add more parameters to extract and more parameters to prefill depending on your needs.

 

Step 3 – test the result

Save your landing page with both the form and the jQuery script and reload the page with custom parameters in the URL.

If you call your page from example.com/landing/webinar?email=customer.name@example.com, your result page should look like this:

Congratulations, you are done! 

Pin It on Pinterest

Shares