ActiveCampaign Forum

Two-step forms


#1

Is it possible to create a two-step form to embed on a website? I currently have a form where the user fills out their name and email address, hits submit, and then is taken to a new page with a form that asks some additional questions. I would like to replicate this in ActiveCampaign.

I assume I would have to create 2 forms; but is there a way to link them so the name and email is passed on to the second form?


Update form for returning visitor
#2

Hey Catherine,

The short answer is no, unfortunately that is not possible right now, however Progressive Forms is a highly requested feature and we would love to solicit your feedback on how you imagine that working (for example 2-stage forms). You can jump into that conversation here: http://feedback.activecampaign.com/forums/238014-feedback-ideas/suggestions/5535773-progressive-profiling

The longer answer is that it is possible, but requires a teensy bit of JavaScript to accomplish.

After the user submits the form, you will want to “catch” their email address, name, age, etc… and store it as a variable, either in a cookie or in localStorage.

You would then need to create a javascript script that checks if the variable exists in localStorage (or where ever you saved it) and if it does, pre-fill the form fields based on those attributes.

I will try and write up the blog post for you and will post it here as soon as it is finished!


#3

Ok, thanks Jordan! Look forward to your post.


#4

Just posted my feedback on this feature. Something Infusionsoft has and I know I use all the time as do other Infusionsoft consultants. In the meantime, sure would appreciate the js code as a workaround. Was just looking for this for a multi-step form asking for opt-in on first page and segementation on second. :slight_smile:


Get Your List To Segment Itself
Updating subscriptions
#5

Hey Everyone,

Thank you for sharing your feedback about the progressive profiling.

I dug into this a bit more and it turns out there are currently two ways that you can accomplish this.

Passing variables

Right now you can pass variables to different forms by appending the variables to the URL in the toolbar. For example activecampaign.com/forms/2?email=jskole@activecampaign.com would pre-fill the email field in the form with jskole@activecampaign.com

That means that if you wanted to create a multi-stage form, instead of displaying a “thank you” message you could redirect the user on submit to your second form, and append whatever personalization tags you wish to prefill, for example activecampaign.com/forms/2?email=%EMAIL%

JavaScript

The JavaScript way does require a bit of programming knowledge, but is not hard. The strategy is to prevent the form from submitting normally, check if the user’s browser has localStorage capabilities and if it does store the variables in localStorage.

This script might work if you copy and paste it, but I don’t recommend doing so unless you can read the script and it seems to make sense for you.

<script type="text/javascript">

  // PART I: Saving user details locally

  // we need to grab our form
  var myForm = document.querySelector("._form");
  // var myForm = document.getElementById("_form_5_"); // Optionally only grab details from a specific form: "_form_5_"
  
  // listen for the user to submit the form 
  myForm.addEventListener("submit", function (event) {

    // prevent the form from submitting as usual so we can save some of this information
    event.preventDefault();

    // check if the user's browser has localStorage support
    if (typeof(Storage) !== "undefined") {
        // Code for localStorage/sessionStorage.
        // customize this for the form fields you want to save locally

        // store the full name in localStorage
        var fullname = document.querySelector("input[name=fullname]");
        localStorage.user_name = fullname.value;

        // save the email in localStorage
        var email = document.querySelector("input[name=email]");
        localStorage.user_email = email.value;

        // repeat this process for all the fields you want to save
        // var organization = document.querySelector("input[name=organization]"); // etc...
    }
  });

  // PART II: Pre-filling forms forms with locally saved values
  if (typeof(Storage) !== "undefined") 

    // check if the user has a name field stored 
    if (localStorage.user_name) {
      name_field = document.querySelector("._form input[name=fullname]");
      name_field.value = localStorage.user_name;
    }

    // check if the user has an email field stored
    if (localStorage.user_email) {
      email_field = document.querySelector("._form input[name=email]");
      email_field.value = localStorage.user_email;
    }

    // continue this process for all the fields you want to pre-fill; organization, etc...
  }

</script>

JavaScript Gotchas

  • You will need to update the user’s information in localStorage every time they update the form. If you fail to do so, the old information will persist and it can create a potentially jarring experience for your users.

JavaScript Bonus Mode

If you are comfortable with JavaScript there is a bit more that you could do to enhance the functionality of this approach. Here are just a few ideas I had.

  • Update the localStorage information as the form field changes, using input, blur, etc events.
  • Danger!! hide pre-filled fields on progressive forms using CSS if the information exists in localStorage

Hope this helps!


How to prefill fields of embedded forms
Adding contact to list with AJAX
Add Script on Thank You Message
#8

Hello !

Didnt knew there was already a topic about it, but I’m trying to implement the solution with Passing Variable to the second form.

I would like to pass the E-mail captured in the First form (otherwise it looks strange to ask it again), but would like to “hide” the E-mail Text box.

But using CSS to hide the e-mail box doesn’t seems to be allowed (to taken into account after saving the form)


#9

Any updates on this - I want to do this usnig a leadpages account rather than my wordpress site. Not sure how wordpress will know when that same person comes back to the leadpage later…? Would love to have a direct 1-1 conversation about it rather than get lost in forum land…- Richard