Embed (Publish Options)

Step 20: Click on View Records, then click the Preview button to see the submitted form data.In this blog, we will walk through how to embed a form into your website or application using the Embed options.

To begin, create a form with the required fields and publish it. Once the form is published, a Publish tab becomes available. Under the Publish tab, you'll find the Embed section, which provides three options: Embed JS, Iframe, and Source Code.

Embed JS allows for dynamic integration with better customization options, making it ideal for developers who want more control over form behavior and appearance.

Iframe provides a quick and simple way to display the form, perfect for those looking for a straightforward implementation without extensive coding.

Source Code gives you full control to customize the form's HTML before embedding, offering maximum flexibility for advanced users who want to modify every aspect of the form.

Steps to Create the Form in Forms Made Easy :

Step 1: Go to the My Forms tab and click on the "Create New Form" button.

Step 2: Enter the form name and select the form type (Salesforce Objects or General Fields).

- Currently I have chosen the Salesforce Object option.

Step 3: Select "Account" as the Primary Object and click the "Create Form" button.

Step 4: Go to the Object Fields section and click on "Account."

Step 5: Drag and drop your required fields onto the form.

(Note: The Account Name field is a mandatory field on the Account Object in Salesforce).

Step 6: After all of that, you can publish the form by clicking the "Publish" button.

Step 7: Click the "Publish Form" button.

Step 8: Click on "Done" to close the modal.

Step 9: Once the form is published, an additional Publish Options tab becomes available.

Under this tab, there is a sub-option called Embed. Click on "Embed."

( Note: If the form is already created, click "Edit," go to Publish Options, and click "Embed.")

Step 10: Inside the Embed section, you will see three options : Embed JS, Iframe and Source Code.

- Currently I have chosen the Embed JS.

Step 11: For Embed JS, simply click the "Copy" button to copy the embed code.

Step 12: Now, open your preferred HTML editor to begin the embedding process. You can choose any online HTML editor that suits your needs, but in my case, I’ll be using VS Code. To get started, open VS Code and click on File in the top menu.

Step 13: Next, click on New File give it name, and save it with the .html extension. (E.g., index.html)

Step 14: Inside the newly created .html file, type “!” and press Tab (or Enter) to generate a basic HTML boilerplate template automatically.

Step 15: Paste the copied Embed JS code inside the <body> tag of your HTML file. Then, save the file to keep your changes. Then, Right-click the file in VS Code and choose Open with Live Server to run it in your browser.

( Note: Make sure the Live Server extension is installed in VS Code.)

Step 16: Now, The form will open in your browser. Fill in all the details and click the Submit button.

Step 17: Go to the "My Forms" tab and refresh the page.

Step 18: Click on “Submission” buttons to see the submissions.

Step 19: Here, all submissions for that form will be displayed.

Step 20: Click on View Records, then click the Preview button to see the submitted form data.

Step 21: The submitted records will now appear under the Account object in Salesforce.

Step 22: Now, for the second (Iframe) option, click the “Copy” button to copy the Iframe code.

Step 23: For accessing Iframe code, Enable Digital Experiences : First, click on Setup gear icon in the top right corner.

Step 24: In the, Quick Find box, type “Digital Experiences” and select Settings.

Step 25: Now, Click on the Enable Experience Workspaces.

Step 26: After Enabling Experience Workspaces, search for "All Sites" in the Quick Find box. Select it to open the All sites page where you can manage your sites.

Step 27: On the All Sites page, you’ll see a list of your existing sites. Click on any site to open its builder and manage settings.

Step 28: To create a new site, simply click the “New” button.

Step 29: Select a template to get started.

( Note: In this scenario, we’ll use the Build Your Own (LWR) template.)

Step 30: Click on Get Started button.

Step 31: Enter the site Name and URL, then click the Create button.

Step 32: Now, click on Builder to start customizing your site.

Step 33: Next, click on Component icon to access the available elements you can add to your site.

Step 34: Click on the HTML Editor component, then drag and drop it onto your page where you want to add custom code.

Step 35: Click on Use this HTML Editor to add your own markup, then click Edit Markup to open the editor.

Step 36: Paste the copied Iframe code inside the HTML Editor, then click on Save button.

Step 37: Click the Publish button to make your form live.

Step 38: Again, click on the Publish button.

Step 39: After publishing, you will receive an email with the subject ‘Site Published Successfully’. The email will also include the URL to access your live form.

Step 40: Click on the live URL in the email to open and view your published form.

Step 41: The form will now open in your browser, ready for use.

Step 42: Now, for the third (Source Code) option, click the “Copy” button to copy the Source Code.

Step 43: Now, open VS Code and navigate to your HTML file. Paste the copied Source Code into the file, save it, and then open HTML file using Live Server to preview it in your browser.

Step 44: The form will now be displayed in your browser.