When you already know some of the answers before your users come to the online form you made in Paperform, you can fill those answers in for them before their arrival (or, pre-fill them).

For example, perhaps you have someone enter their name on Form 1 and you don't want to make them type their name in again on Form 2. You would use pre-filling to take their name from Form 1 and then have it already filled in for them on Form 2.

Alternatively, maybe you only have one form but you have some customer data from your CRM. You could pre-fill their name using the data from your CRM, providing a more personalized touch when users go to your forms.

How to pre-fill an answer to a question

Pre-filling form answers is really easy in Paperform. Most questions (we'll cover the exceptions later) allow pre-filling by using a unique key that represents that specific question called its pre-fill key (for brevity's sake, we'll call them simply keys from here on out).

These keys are automatically generated and set for almost all questions (appointments don't have one) you have on your form. You can use this key in the URL and set it equal to the value you want in order to pass that answer to the question in the form.

Finding the key

A question's key is located at the bottom of its configuration settings.

Pre-fill key of a question

Above, the key is dphv5.

Additionally, you can set a custom key by typing your own in the input underneath that key with the placeholder Custom Pre-fill Key. You can then use that custom key to refer to the same question that dphv5 does.

Using the key in the form's URL

To actually pre-fill something, you have to use its key in the form's URL. This takes the form of

key=value

in order to set the answer of key to value.

This is known as a key-value pair because it maps a key to a value and they always come in pairs. You can add multiple answers to a form simultaneously by adding & in between each key-value pair.

At the end of the typical URL for your form, add a ? and then however many key-value pairs you want in for how many questions you want to pre-fill, with each pair separated by &.

Example of pre-filling

Let's suppose that we have the following information:

  • Form URL — https://prefilling.paperform.co
  • Question 1 Key — 1sgr2
  • Question 2 Key — 1q797
  • Question 1 Answer — q1answer
  • Question 2 Answer — q2answer

To build the URL that would help us put those answers into their corresponding questions for the given form URL, our URL would look like

https://prefilling.paperform.co?1sgr2=q1answer&1q797=q2answer

If you go to that form using that URL, you'll see that the answers for Question 1 and Question 2 are already filled in.

Pre-filling from a third-party service

Want to pre-fill your form using third-party variables, but aren't sure where to start? Look no further!

ConvertKit Example

If you have a hidden field called subscriber email, you can pre-fill the value using the example URL shown below.

yourform.paperform.co?paperform-prefill-key={{%20subscriber.email_address%20}}

Still confused? Play around with the pre-fill generator.

Note that the form that the generator links you to for the test link only allows two pre-filled answers. However, additional fields are available on the generator as an example of how to add multiple key-value pairs in the same URL.

How to pre-fill on an embedded form

Pre-filling on an embedded form is very similar to pre-filling via the URL.

First, test out the pre-filling by doing it directly through the form's URL, like the instructions in the previous sections. Then, copy everything after the ?.

For example, using the example in the previous section, you would copy

1sgr2=q1answer&1q797=q2answer

After that, go to the embed code for your embedded for and add data-prefill="URL_VALUES" where URL_VALUES is the copied portion directly above.

Your embed code will then look like

<div data-prefill="URL_VALUES" data-paperform-id="prefilling"></div>  
<script>  
  (function() {  
    var script = document.createElement('script');  
    script.src = "https://paperform.co/__embed.min.js";  
    document.body.appendChild(script);  
  })()  
</script>

or, with the values replaced

<div data-prefill="1sgr2=q1answer&1q797=q2answer" data-paperform-id="prefilling"></div>  
<script>  
  (function() {  
    var script = document.createElement('script');  
    script.src = "https://paperform.co/__embed.min.js";  
    document.body.appendChild(script);  
  })()  
</script>

Dynamically pre-filling an embedded form

You can also dynamically pre-fill an embedded form. Instead of passing the key-value pairs into the div, you can put them in the URL of the page the form is embedded on as if you were pre-filling using the form's URL directly.

To do this, add data-prefill-inherit="1" to your embed code:

<div data-prefill-inherit="1" data-paperform-id="prefilling"></div>  

<script>  
    (function() {  
        var script = document.createElement('script');  
        script.src = "https://paperform.co/__embed.min.js";  
        document.body.appendChild(script);  
    })()  
</script>

Pre-filling a pop-up form that is called programmatically

If we call a function to make our pop-up form appear, pre-filling is treated differently than normal because we don't have an element on the page to add an attribute to directly.

Continuing our trend of using prefilling as the form's slug (which you'll need to replace with your own form's slug), we'll illustrate how to get this done.

Static

Paperform.popup(prefilling, { prefill: { key1: "value1", key2: "value2" }});

Dynamic

Paperform.popup(prefilling, { prefillInherit: true });

Here, we have two separate ways of pre-filling:

  • static: prefill: { key1: "value1", key2: "value2" }
  • dynamic: prefillInherit: true

You'll notice that the static method of pre-filling is a bit different here. Instead of key-value pairs in the form of key=value and separated by &, we use key: value and separate each by ,. Aside from that change, it operates the same way as the more typical method.

No changes need to be made to any URLs to support this.

There is also no requirement to use only static or dynamic pre-filling. You may use both at the same, if you'd like. An instance in which this might be useful is if you want to pre-fill some answers with the same value every time but also want other answers to pull from the URL dynamically.

Pre-filling by question or field type

Different questions or fields operate somewhat differently when it comes to pre-filling. There may be a certain format to adhere to, shortcuts, or limitations.

Please refer to our pre-filling guide's pre-filling by field type section.