There are sometimes scenarios where you’d like to collect further information within a proposal (or even a deposit!) but don’t want your customer to have to re-enter information that was previously given. Well, this is your help article if you’d like to do that!

  1. First, you need to build out a form to embed into your proposal. You can do this an infinite number of ways, but in the video example I am using “Jotform”.
  2. Then you need to be sure your form supports query strings filling it out. You can test this by putting field names as parameters into the URL and refreshing the page (the video shows how to do this).
  3. If you’d like to hide the prefilled fields of the form, you are welcome to do that, but be sure to test at the end just to make sure everything worked.
  4. Once you know that your form supports that, you simply find the area in the proposal that you want to paste the iframe in as HTML holding the form.
  5. Be sure to give your iframe an ID that you will be matching up with code injection in the next step (we used “prefill” as the ID in our example):
    <iframe id="prefill" src="https://your_form_url.com" style= "width: 100%; height:1000px;"/>

     

  6. Inject the following code (as an example) at “Settings > Form Builder > Custom Code Injection > Proposal” and be sure to put it in the “” area:
    <script>
        //Initialize Bid Data
        let bid = BID_DATA ||  parent.BID_DATA ;
        let sourceDocument =  document || parent.responsibidIframe.document;
    
        sourceDocument.addEventListener("DOMContentLoaded", () => {
            setTimeout(function() {
                //INSERT INTEGRATION HERE
                var ifr = sourceDocument.getElementById("prefill");
                ifr.src = ifr.src + 
                '?first_name=' + bid.firstName+ 
                '&last_name='+ bid.lastName + 
                '&street_address='+ bid.streetAddress1 + 
                '&status='+ bid.status + 
                '&email='+ bid.email;
            }, 500);
        });
    
      
    </script>

     

    Important notes about copy and pasting from the example code:

    1. The “ID” that is set to “prefill” needs to be used in your iframe ID as well.
    2. You can map more fields using all of the referenced fields below.
    3. You must ALWAYS end with the final mapping in a semicolon (;)… never in a plus symbol (+)

All fields that you can map to are:

Contact Information

  • bid.firstName
  • bid.lastName
  • bid.fullName
  • bid.streetAddress1
  • bid.streetAddress2
  • bid.city
  • bid.state
  • bid.phoneNumber1
  • bid.phoneNumber2

Bid Information:

  • bid.bookingDate
  • bid.bookingArrivalStartTime
  • bid.bookingArrivalEndTime
  • bid.jobDurationHours
  • bid.jobDurationMinutes
  • bid.notes
  • bid.specialInstrucion
  • bid.servicesRequested
  • bid.status