Smart Form on ONTRApage [closed]

Is it possible to add a smart form to an ONTRApage with the new editor?

edit retag flag offensive reopen merge delete

Closed for the following reason duplicate question by Frank
close date 2016-11-22 09:35:49.935800

1 answer

Sort by ยป oldest newest most voted

EDIT: Now that ONTRAforms has been released, I would recommend using that over this solution. More info here: http://support.ontraport.com/entries/...

This is possible using the footer scripts. However, I would only recommend doing this if you have some web development knowledge.

You can target an element using $('.class-name'), and then use jquery's append command to add to the form.

Here is an example of how to do so:

First, you need to get the unique row id of the block container that you would like to insert it before or after. To do so, navigate to the hosted ONTRApage with google chrome, and open the developer tools (https://developer.chrome.com/devtools). Click the element selector (icon in top left, that is an arrow in a box), and click on the block that you would like to target. You should see something like this: image description

The unique row id can be found on the container with the class "row", it is the value of the opt-id attribute. In the case of this image, the value would be "ffecbde7-09aa-d74b-06e2-fc5739460580".

Now that we have this value, we can use it as the target for our javascript. Before we do, we need to separate the form markup from the script and link tags. This is very easy. After to get the HTML form code from ONTRAPORT, you simply separate it into two sections.

The code will start with <link> tags, followed by a <script> tag. Pull those out and put them in a safe place. You should be left with code that starts with something like <div class="moonray-form-p2c27409f11 ussr">. This code will replace HTML FORM MARKUP CODE GOES HERE portion below. Now we are ready to add our code to our page.

The full target will be .opt-id-(id value), where (id value) is replaced with the id we found above. Depending on whether we want the form before or after the target row, we will use jQuery's before or after command. For my example, I will be adding the form before the target row. (It is important to note also that this code must be wrapped in script tags). We will be putting the HTML Form Markup (that starts with <div) inside the before call, wrapped in single quotes. The first half of the code that we separated earlier (the link and script tags) will come before jQuery call. I have give an example below.


<link rel="stylesheet" href="//app.ontraport.com/js/formeditor/moonrayform/paymentplandisplay/production.css" type="text/css" />
<link rel="stylesheet" href="//forms.ontraport.com/formeditor/formeditor/css/form.default.css" type="text/css" />
<link rel="stylesheet" href="//forms.ontraport.com/formeditor/formeditor/css/form.publish.css" type="text/css" />
<link rel="stylesheet" href="//forms.ontraport.com/v2.4/include/minify/?g=moonrayCSS" type="text/css" /><link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="//forms.ontraport ...
edit flag offensive delete publish link more


This does not make sense to me. If I have sa smart form from ontraport, why can't I just copy the html when I publish it into me landing page?

jeancannon gravatar imagejeancannon ( 2015-10-27 21:18:59 -0700 )edit

Currently, you cannot simply paste an HTML smart form into a block with the new ONTRApages editor. My solution was to make use of the footer scripts in the settings tab, and append the form beneath a block using jQuery. This does require some technical know how, but I will expand my answer to make it a bit easier to understand. However, since this initial post, ONTRAforms have been released, and I would recommend using those instead!

david gravatar imagedavid ( 2016-01-13 09:35:55 -0700 )edit

Question Tools

1 follower


Asked: 2015-10-20 16:29:08 -0700

Seen: 131 times

Last updated: Jan 13 '16