When you already know some of the answers before your users come to the form, 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 answers is really easy. 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.

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";
        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";
        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";
        document.body.appendChild(script);
    })()
</script>

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. We'll some notable examples below.

Pre-filling emails

If you would like to pre-fill an email address, you can use its key or a shortcut.

The shortcut is adding email=email@example.com where email@example.com is to be replaced by the desired email. Any questions of type email will have the provided email as their answer. So, if you don't want every email address filled in on the form, use keys instead.

Pre-selecting products

You can pre-select products by passing in the SKU of the desired product. To select multiple products from the same question, you have to use the entire key-value repeatedly as if they were separate questions.

For example, say your product key is rjtu5 and you have two SKUs: 001 and 002 . Your URL would need to contain rjtu5=001&rjtu5=002.

There is currently no way to pre-fill products in the more traditional sense. That is, you can only pre-select products that are already on the form. It is not for inserting products that you didn't include through the editor.

Pre-selecting multiple-choice and dropdown questions

If the question needs to have multiple answers, you can simply pass both values in the URL.

Suppose your key is rk8ju

Your URL would look similar to rk8ju=option1&rk8ju=option2, where optionX is the name of the option you want to pre-select.

Alternatively, you can pre-select option by using rk8ju=--1--&rk8ju=--2-- to select the first and second options for a question. That is, you set the key equal to the option's place in the your listed options, starting from the top in your question's options configuration, surrounded by two hyphens on each side.

Similar to products, you are pre-selecting options only. You cannot insert options that you didn't include through the editor.

Pre-selecting Yes/No questions

For Yes/No questions, just pass “Yes” or “No” as the answer.

Note that this is case-sensitive, so "yes" is incorrect while "Yes" is correct.

Pre-filling date fields

Dates can be pre-filled using the format KEY=yyyy-mm-dd.

Pre-filling hidden fields

Sometimes you want to pass information through the URL but do not want to display it to the user. For that purpose, there is a hidden question type.

Hidden fields are never shown to the user, but the value they contain is still submitted with the form.

Note: Any value passed in through the URL is visible in the URL. Additionally, the URL can be modified to change the answer your hidden field gets. This may not pose any risk to you, but it is something to be aware of in case you wish to take steps to mitigate it.

Pre-filling from one form to another

Suppose you have two forms: Form 1 and Form 2.

You can pre-fill from Form 1 to Form 2, provided Form 1 has been submitted. The best way to ensure this flow is complete is to redirect from Form 1 to Form 2.

Set up the pre-fill links in form 2, and then redirect to form 2 on completion of the first form. Then when form 1 is submitted, the answers will be passed to form 2.

To pass the answers through to form 2, ensure the redirect link includes the pre-fill values of form 1. There is even a little dropdown to the right of the redirect link field that allows you to select pre-fill values that will be used in the second form. For example:

Question types that do not support pre-filling

File and image upload
Files and images cannot be pre-uploaded, if you will, on a form. However, you may use a file or image upload to pre-fill a hidden question or include it in a custom email or PDF as it generates a link to your upload that you may wish to use later.

Appointment
Appointments depend on real-time availability. As such, it is difficult to pre-fill them in a useful manner.

Did this answer your question?