Embedding A Form

Kos
Kos
@kos
9 years ago
75 posts
Did some searches and didn't come across this but is it not possible to embed javascript forms such as those from jotform in JR? We have a few for submitting proposed petitions, feedback and surveys. When I insert their code, the editor wipes it out. Maybe this has to do with wanting to be responsive. Most of this sites traffic is older individuals, desktop users so idk if that matters.
updated by @kos: 03/09/15 07:36:10PM
brian
@brian
9 years ago
10,148 posts
Kos:
Did some searches and didn't come across this but is it not possible to embed javascript forms such as those from jotform in JR? We have a few for submitting proposed petitions, feedback and surveys. When I insert their code, the editor wipes it out. Maybe this has to do with wanting to be responsive. Most of this sites traffic is older individuals, desktop users so idk if that matters.

Where are you trying to embed the form?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
michael
@michael
9 years ago
7,714 posts
I know you've been playing with the Site Builder, so if your on one of those pages, put the code into the CODE tab of the widget, not the editor.

eg:
* add a widget
* click on the "Widget Settings" button to show the editor
* look in the top left corner of that popup and you will see EDITOR | CODE. Click on the CODE button to change the editor to the code view.

The EDITOR and the CODE views are completely separate its one or the other that is showing. If your wanting to put in some script, then use the CODE.

eg, to put the twitter widget code in there, use this code:
            <a class="twitter-timeline"  href="https://twitter.com/jamroomdev" data-widget-id="456325856210599936">Tweets by @jamroomdev</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
          

That example code will put the twitter widget for @jamroomdev on your page.

One important thing to note though that could screw things up, is if the code is compressed.

Smarty code is enclosed in brackets {$something} and javascript also uses {}. Smarty will ignore javascripts brackets as long as there is a space between the { and the first letter.

So if your code looks like this:
.....mentById(id)){js=d.createE.......
you need to add a space between the { and the next character.

Needs to become
.....mentById(id)){ js=d.createE.......

So a working version of that twitter code above would be:
<a class="twitter-timeline"  href="https://twitter.com/jamroomdev" data-widget-id="456325856210599936">Tweets by @jamroomdev</a>
<script>!function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){ js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
          
Kos
Kos
@kos
9 years ago
75 posts
Thanks guys
Here's a screenshot of the code http://screencast.com/t/OSUs4urG5 b/c it gets stripped out if I paste it here and yes, I placed it in the code area but it strips it out.

I was hoping to use form designer and Aparna to create my own to emulate this page https://www.ipetitions.com/start-petition/ as well as the pop up sample they show - which is awesome. Here's a screenshot http://screencast.com/t/BaQvOhOgz but I'm still fiddling and learning the systems capabilities.
Dreaming a/b JR at night instead of Ning. I really need a life! LOL
updated by @kos: 02/05/15 07:57:50AM

Tags