The Visual Composer for Salesforce is a special element that enables you to embed a PDF document inside your form.
Not only is this PDF displayed in the form, but you can also populate the values inside it based on data you get from Salesforce.
Following is an example of an online form that is integrated with SF, and has a pdf document embedded in it.
In this form example the user needs to enter his email address and press on a "Go" button. Next his full name will automatically be populated based on this. In addition the user will need to agree to "Terms of use" (by turning on a checkbox) and entering his signature. Now he will need to press on the "Press to create PDF" button - and the populated document will appear on the right side.
How do I create this kind of form?
Here are step by step instructions:
1- Creating the form
2- Integrating with SF
3- Adding the visual composer
1- Drag an email element. (From "Elements" panel > "Basic" category > "Input"> Email)
Change its label to "Enter your email".
2- Drag a "Full name" element. (From "Elements" panel > "Advanced" category > "Input"> Email)
Leave its label as it is.
3- Drag a "Privacy" element. (From "Elements" panel > "Widgets" category > "Privacy"> Privacy Element)
4- Drag a signature element. (From "Elements" panel > "Widgets" category > "Privacy"> Signature Element)
1- Go to the Salesforce "Get" integration.
"Properties" panel > "Form" tab > "Settings" option > "Salesforce integration" category > Get from Salesforce
Press on "Map fields" button.
2- Click on the button to Authenticate with Salesforce
and Click on "Add object"
3- Open the "Salesforce object settings" category and choose the "Contact" from the "Select an object" dropdown.
4- Press on the "Set conditions" button and set the following:
"Email" Equals "Enter your email"
5- Map the form fields and press on "Apply".
an integration line will be created. Press on "Apply" again and save the form.
6- Now you can publish your form as URL and test it.
Enter an email and watch how the first and last name are populated below.
** For this to work you need to make sure you have suitable data in your Salesforce Contact object (create a contact with an email address and then use this email in your form).
1- Drag the "Visual Composer" element onto the canvas. From "Elements" panel > "Salesforce" category
Place it on the right, (or where ever you want).
2- Make the element larger using the border handles.
3- Once "Composer" is selected on canvas its "Mapping" properties will open in the on the right.
(in "Properties" panel > "Element" tab > "Settings" option > "Basic" category)
Press on the "Set" button.
4- a window will now open, where you will need to configure the PDF and mapping.
First, you will need to upload your PDF (or image) - Press on the "+ Page" option in the top menu. Once it is uploaded, it will act as a canvas and you will need to place the online fields on it.
5- Press on the "+ Element" option in the top menu and a list of the form fields will open (including system fields which are not visible on the form).
6- Choose a field and place it on top of your PDF.
Move the field on your canvas, and place it exactly where the user input is supposed to be entered.
Do the same with all the other elements.
7- Change the font size if needed
8- Drag a SF button from from "Elements" panel > "Salesforce" category > "Button"
Change the text on the button to: Press to create PDF and Button type to: "Visual composer".
Once the form filler presses on this button - the PDF will be created inside the form, prefilled with the form data.
8- Save the form.
9 - Publish your form as URL to see the result.
Enter your email address and see how the full name is populated from SF. Then agree to the terms by turning on the checkbox and enter your signature.
Press on "Press to create PDF" button and look how all the data from your form is now embedded in the pdf.