Though Formstack offers great tools like Auto-Generated Pre-filled forms, sometimes we need to prepopulate a form that doesn't have two objects that relate to each other within a Parent-Child hierarchy or we simply need to fill out two forms at the same time and prepopulate the second form.
With Javascript, we can workaround this limitation by connecting two forms and passing values from the first form to the second form. Even if you don't know Javascript, this article will guide you on a few steps to get your forms connected and prepopulated.
Creating Your Forms
Our first form will create an Account and Contact record in Salesforce. Then, we want to redirect our end users to a second form that creates an Opportunity. We will populate the Account field from our first form to our second form.
After the second form is created, publish the form and then navigate to the Hosted URL.
From here, right click on the field you wish to populate and choose Inspect Element. In this example, we want to right click Account Name. This is easiest using a browser like Chrome or Firefox. With this, we want to get the Field Name from Salesforce to build our URL.
In our example, we want to get the Account Name from the Opportunity object, so we have to make sure we use the same field name as seen on the Opportunity.
Javascript Code
Below is our sample code that we will modify.
function FF_OnAfterSave(){var accountName = document.getElementById("Account.Name").value;window.location = "YOUR_HOSTED_FORM_URL?Account.Name=" + accountName; }
Modifying Javascript Code
We want to replace where it says "YOUR_HOSTED_FORM_URL" with the actual URL of our hosted form. We want to replace "Account.name" with Opportunity.AccountId.Name as this is the ID we found with Inspect Element.
function FF_OnAfterSave(){var accountName = document.getElementById("Account.Name").value;window.location= "https://formstack.io/876D3?Opportunity.AccountId.Name=" + accountName; }
Changing Your Form Settings
Since we are going to redirect users to a different form using JavaScript, we can leave the Form Settings to show a Confirmation Popup. Choosing the "Redirect Users to a New Page" will cancel out the JavaScript we are using.
You can place whatever you would like in the Confirmation Popup text box because that will not be shown to any users on this form due to our custom JavaScript.
Adding Code to Your First Form
You'll want to place this code on the first form in the Form Settings > Javascript section. As you can see, this example uses Account as a way to link the two forms—but you can use any object that is on your first form.
Final Result
Once you've added the Javascript, publish the first form. Now, we will fill out Account and Contact information to the first form.
Immediately after submitting the first form, we are now directed to the second form. As you can see, our Account Name is populated!