Email-URL pass-through

Design help Custom code
1

Hi everyone!

Has anyone been able to custom code a multi-step optin, where each step is captured at the next click?

We want to capture the email first for the highest optin rates, but the questions afterwards are ‘nice to haves’ that we’d like connected to that email address. We’d also like if they abandoned because they didn’t feel like replying, we’d capture those as well.

Our design currently has three pages before the user signs up:

Optin Page 1 - captures email address - https://the-flipside.webflow.io/

Optin Page 2 - captures political preference - https://the-flipside.webflow.io/youre-in

Optin Page 3 - open ended question - https://the-flipside.webflow.io/one-more-thing

Halp!

2

I have used parsleyjs to accomplish something similar, however not on Webflow. Off hand I can’t see why it would not work. However it may be easier to use a third party form engine for this task. This is not a feature currently available in Webflow forms.

3

Here is the custom code for passing form data through a URL. For your setup you would need to make an email field on the second page (and third) and then hide it. This way when the user submits on the second page you will have the email along with the submitted data.

Page 1:

$(document).ajaxStop(function() {

  // Get all form values
  var string = '?' + $( ".FORMCLASS" ).find('input, select, textarea').map(function() {
  	// encodes characters such as ?,=,/,&,:
    var header = encodeURIComponent((this.name || this.id).trim());
    return header ? header + '=' + encodeURIComponent($(this).val()) : null;
  }).get().join('&');

  // Redirect to this URL with the value of the form fields appended to the end of the URL
  location.href = 'https://YOURDOMAIN/PAGE-2-URL' + string;
});

Page 2:

function getParam(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); }
Webflow.push(function() {

  // Auto-populate form fields
  $('input:text, input[type=email]').each(function() {
    var paramValue = getParam(this.id);
    if(this.value == "" && paramValue != "") this.value = paramValue;
  });

});

You are going to have to modify this code a bit if you want to add another step but hopefully this gets you started. Feel free to ask any questions.

Edit: Forgot to mention both of those code snippets are to be included in the “before body tag” custom code section in the settings of their respective page.

2 Likes
4

How would you submit the form using Webflow’s default action on the first page AND redirect to the second page with the email appended to the URL?

1 Like