Embedding Adaptive Form or HTML5 form in web page
The embedded adaptive form is fully functional and users can fill and submit the form without leaving the page. It helps the user remain in the context of other elements on the web page and simultaneously interact with the form.
The following video explains the steps needed to embed an Adaptive or HTML5 form in web page.
Please refer to the documentation for best prerequisites, best practices etc.
Transcript
Hi, in this video we will take a look at embedding an Adaptive Form in a non-AEM web page. So what you see on the screen is a simple HTML page which is running on my Apache web server, and in that web page I have embedded an Adaptive Form, which is served by my AEM Forms server. So this is the Adaptive Forms, which has these three fields here. To do this kind of capabilities all you need to do is to make a get request call to a AEM server, and in that get request you need to specify the URL of the Adaptive Form that you want to embed, and on successful completion of the get call, whatever data is returned by that get call, you simply have to append that to any form container within your HTML page. So for example let’s open up this HTML page, which is called “newsletter.html” here in notepad. Here and if you see at the very beginning, when this HTML page is loaded, I make a get call and in the get call I specify the path to my Adaptive Form, and on successful completion of the get call, I simply take the data and append it to a form container, which is identified by class name called “right”. And if I scroll down to the bottom of my page, there is a form container or a div, which has a class name of “right” and in that div we append the Adaptive Form in the HTML page. So if you were to go back here, that is what’s happening. The “Subscribe to newsletter” is my static HTML text in my HTML page and this is the Adaptive Form. So once you have your form embedded in your HTML page, it’s quite easy to interact with the form. So you simply fill out this form, the way you would normally fill out and then submit the form. So when you submit, whatever submit action your Adaptive Form is configured, that submit action will be honored here. So when I submit here, I get a “thank you for submitting the form”, because the form is configured to submit asynchronously, so that’s why I am still in the same page and I get the thank you message here.
The next thing that you need to remember to embed before you embed an Adaptive Form in an external webpage is to set up the proxy settings in your web servers “httpd.conf” file. So if I were to open up my “httpd.conf” file here, the first thing that you need to specify or enable is to enable the proxy modules here. The reason we need to enable proxy modules is, the external web page that embeds the Adaptive Form typically will send request to the AEM server, which is behind the firewall in a private network. Now to ensure that the request are securely directed to the AEM server, it is recommended to set up the reverse proxy server. So to set up the reverse proxy server at the minimum, you need to enable the proxy modules here, and then we need to set up some settings here in the “httpd.conf” file here. So this is the virtual host. You need to specify the ProxyPass, ProxyPassReverse and so forth. So all these files will be given to you as part of this tutorial. You simply have to make the same changes in your web servers “conf” file. Okay? And then the other thing I wanted to show you was, if you were to refresh this page, you see this form. And if I want to make a change to the Adaptive Form, for example if I want to change let’s say the label of this particular field, I can simply go to my form editor here and, let’s say I want to mark this “interested in buying” field as a required field or put a star mark here and then save it. And if I were to go back and refresh my HTML page, I will see the change immediately. So this is how it is easy to embed an Adaptive Form in your external HTML page, which may need not be an AEM powered webpage. In a similar manner, you can not only embed an Adaptive Form but you can also embed what we call as HTML5 forms, which are nothing but the HTML rendition of your XDP templates. So, as an example I have this webpage here, which is nothing but a simple page with a drop down list for the user to select which form they want to render. So if I select form one here and click on render form, I get the HTML rendition of the XDP embedded in my HTML page. Again, the methodology or the modus operandi to embed an Adaptive Form or an HTML5 form is going to be the same. You simply have to have to make a call, get call and that get call, you specify the URL of the form that you want to embed, and the data that is returned by the call, you simply have to append it to a form container. In this case, the form container is identified by a class name called “mobileform”, and that’s where I’m appending the result of the “get call”. So this video was made with the purpose of demonstrating the use case of embedding an Adaptive Form or an HTML5 form in a non AEM webpage. We have extensive documentation here, which explains the best practices and guidelines for setting up ReverseProxies, and embedding an Adaptive Form from a cross domain, in a cross domain website. So this encourage you to take a look at this documentation. The link to this documentation is provided in this tutorial and as also the sample configuration file and the two HTML pages that we looked in this video. So if you have any questions in this, please ask a question on the Experience League Forum. Experts will be monitoring that forum and you will get an answer in a timely manner. -
You can download the sample files used in the video from here
The following is the code used to fetch the adaptive form and embed the form in the container identified by the class name right
$(document).ready(function(){
var formName = $( "#xfaform" ).val();
$.get("http://localhost/content/dam/formsanddocuments/newslettersubscription/jcr:content?wcmmode=disabled", function(data, status){
console.log(formName);
$(".right").append(data);
});
});
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e