Add a form to Flash

Last Update: May 24, 2016

There is a few ways to get a JotForm integrated into a Flash based website. This guide explains how to create a lightbox effect in which your Form is shown when a user clicks a button in your Flash website. It is for Actionscript 3 versions of Abode Flash.


1. In my Flash movie, I need to create a new button which when clicked will display my JotForm form. 

From the Insert menu, select New Symbol 

In the Create New Symbol Dialog, give your button a name and ensure the symbol is of Type: 'Button'.


Create your button in the Flash editor.

2.  Once your button is created, add it to the your flash movie and give it an instance name, I have called mine: 'alert_btn'


3.  We need to attach an action to this button.

Create a new layer on your Flash movies' timeline. I am calling my new layer 'as3'. When the layer has been created, right click on the first frame of this layer and select 'Actions' to open the Actionscript code editor for this layer. 


The code we need to add is as follows:

function callJS(event:MouseEvent):void {
ExternalInterface.call("JotForm_Show");
}
alert_btn.addEventListener(MouseEvent.CLICK, callJS);



NOTE: Change alert_btn to whatever name your used for the instance of your button in step 2.

This bit of Actionscript will try to call and execute a javascript function 'JotForm_Show' from the webpage in which the Flash object is embeded when a user clicks the button, 'alert_btn' .

----

Thats us done configuring our button in our flash movie. 

After you have published your Flash movie, we need to make a few changes to the default HTML provided by Adobe Flash to get our button working. 

---

4. Open this HTML file in your text editor. 

5. Firstly, I want to add two CSS classes that I will use to create my lightbox effect and another to hold my form content. This the code I have used:


.overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.form_content {
display: none;
position: absolute;
/* CENTER FORM ON SCREEN */
top: 50%;
left: 50%;
width: 650px;               /* width of form */
margin-left:-325px;     /* half width of form */
height: 450px;              /* height of form */
margin-top:-225px;     /* half height of form */
/* padding: 16px; */
border: 8px inset orange;
background-color: white;
z-index:1002;
overflow: auto;
}



NOTE: In the CSS class .form_content  , you will need to use the dimensions of your own form to generate the values for the width, margin-left, height & margin-top attributes. 

6.  We need to make two changes to default object embed code generated by Flash for our .swf file.
Change the two references to 'wmode' from 'window' to 'opaque'.



 7.  We need add our lightbox & form content, so after flashContent div, just before the closing tag, 
add the following code:


 



NOTE: You change the highlighted script embed code to whatever the embed code of your form is. Your embed code is retrievable in JotForm by clicking on the Setup & Embed toolbar, selecting Embed Form and clicking the Embed icon. 

I have included an image in this code that when clicked closes the lightbox when it is clicked. 

8. All we need to do now is add the Javacript function that gets called when a user clicks our JotForm button.

I have added the following code under the new content, again just before the closing tag:





9. Thats it! Save your HTML document, upload it and your .swf file to your webserver. 


You can inspect my example here.
 


5 Comments...


   
guest_23614514403040 (December 27, 2012 at 10:39 AM)

Hi. I can't seem to find the html file that is recommended to be downloaded in step 4 - where would I find this?

Thanks!

View Answer


   
jackfaithful93 (May 06, 2013 at 10:49 AM)

What if I want to add an existing form to the flash?

View Answer


   
Ricardo (September 06, 2013 at 05:10 PM)

helpe-me :'_(

View Answer


   
kennyschlagel (November 23, 2013 at 05:38 PM)

Would this process and code work the same if I wanted to embed a jotform into a mobile app I'm making with Adobe Flash?

View Answer


   
hh (July 03, 2015 at 02:59 AM)

the swr no works, can you show it again please? this works for any flash document? thanks

View Answer


Send Comment