Form, Forms and Jotform - How to implement with your app! :)

Get Started | Login

Discussion Forums > WebViews and HTML for Mobile

Replies: 0 Views: 220

CodeMeNot I hate code! Posts: 92 Reg: Aug 02, 2012 Sydney 1,720	confirm \| cancel 09/11/12 12:35 AM (13 years ago) Form, Forms and Jotform - How to implement with your app! :) Hi All, Been fiddling with some forms all day. Thought this might prove useful. Basically to implement a form within an app I have used jotform.com. Drag and drop interface which provides the HTML afterwards. So two ways to implement with your app(probably more but these two are the easiest) Either through a Custom HTML page or through web-address URL page. The second I prefer because it seems to load a LOT quicker. Basically just create that page and link your form (i.e. http://www.jotform.co/form/"YOUR FORM ID"?. Also just make the background transparent within jotform and it appears as if its within the app :) If doing it through a Custom HTML I used the following HTML: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8" content="text/html;" http-equiv="Content-Type" /> <meta content="width=320,user-scalable=false" name="viewport" /> <title></title> <style type="text/css"> p.sansserif{"font-family:Arial,Helvetica,sans-serif; color:#000000;"} h1{"font-family:Arial,Helvetica,sans-serif; color:#000000;text-align: center; font-size:20px;"} } </style> </head> <body> <div style="margin-top: 0px; margin-bottom: 0px; height: 0px; width: 0px; font-family: Arial,Helvetica,sans-serif; font-size: 9px; color: rgb(83, 83, 83); background-color: rgb(255, 255, 255); border: 0px solid rgb(42, 136, 172); font-style: normal; text-align: right; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px ! important;"> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.jotform.co/form/YOUR FORM ID HERE" style="width:100%; height: "TAILOR HEIGHT TO FIT YOUR APP"px; border:none;"></iframe></div> </body> </html> Two things here. Firstly you must use your form ID and secondly to make the form display correctly I had to use iFrame, however the height within the iFrame code provided by jotform was never accurate and I had to change this. Another note when using jotform. There is a bug whereby the form you view will not be updated. The fix: Instead of using: http://form.jotform.co/form/yourID? Use (note changed form to www): http://www.jotform.co/form/yourID? Hope this helps! :) Enjoy. Title Comments Hi All, Been fiddling with some forms all day. Thought this might prove useful. Basically to implement a form within an app I have used jotform.com. Drag and drop interface which provides the HTML afterwards. So two ways to implement with your app(probably more but these two are the easiest) Either through a Custom HTML page or through web-address URL page. The second I prefer because it seems to load a LOT quicker. Basically just create that page and link your form (i.e. http://www.jotform.co/form/"YOUR FORM ID"?. Also just make the background transparent within jotform and it appears as if its within the app :) If doing it through a Custom HTML I used the following HTML: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8" content="text/html;" http-equiv="Content-Type" /> <meta content="width=320,user-scalable=false" name="viewport" /> <title></title> <style type="text/css"> p.sansserif{"font-family:Arial,Helvetica,sans-serif; color:#000000;"} h1{"font-family:Arial,Helvetica,sans-serif; color:#000000;text-align: center; font-size:20px;"} } </style> </head> <body> <div style="margin-top: 0px; margin-bottom: 0px; height: 0px; width: 0px; font-family: Arial,Helvetica,sans-serif; font-size: 9px; color: rgb(83, 83, 83); background-color: rgb(255, 255, 255); border: 0px solid rgb(42, 136, 172); font-style: normal; text-align: right; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px ! important;"> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.jotform.co/form/YOUR FORM ID HERE" style="width:100%; height: "TAILOR HEIGHT TO FIT YOUR APP"px; border:none;"></iframe></div> </body> </html> Two things here. Firstly you must use your form ID and secondly to make the form display correctly I had to use iFrame, however the height within the iFrame code provided by jotform was never accurate and I had to change this. Another note when using jotform. There is a bug whereby the form you view will not be updated. The fix: Instead of using: http://form.jotform.co/form/yourID? Use (note changed form to www): http://www.jotform.co/form/yourID? Hope this helps! :) Enjoy.

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.