Embed your Formstack forms into Dot Net Nuke

November 2, 2011

Simple to Follow Steps to Embed Formstack Forms into Dot Net Nuke

As a business to business company we tend to work with numerous content management systems such as Efusion or Dot Net Nuke.  We also tend to work with different types of form software making each project potentially much different than the project before it.  There is a lot of variety in the web world and making everything play nice together can be quite difficult.

We’ve been using Formstack to build a few forms but lately we’ve taken to using it as often as we can with as many different systems that we can.  Formstack is easy to use, has a lot of features and several methods for embedding the forms into websites.

However, when it came time to embed one of our cool Formstack forms into Dot Net Nuke we started running into problems.  No matter which embed method I used from Formstack it would never fire correctly or at all for that matter.

The bad news from Formstack Support was that DNN places form tags in their pages, causing issues with the form tags inserted by Formstack.  I even tried adding the straight HTML Formstack code and removing the form tags, but nothing would work.

That is, until now. Thanks to Ben Wiese (our lead web developer) we were able to embedFormstack forms that would work inside of Dot Net Nuke with only a small work around.  Basically we are using an onclick function to process the form.

Instructions for embedding a Formstack Form into Dot Net Nuke

Example DNN/Formstack form:  http://b2binternetmarketing.com/contact

1. Login to Formstack and build your Formstack form.
2. Embed your form in DNN:
   1. Click Publish in the form you would like to embed
   2. Click the Advanced link on the left side of the page
   3. Check the “Remove Javascript” Box
   4. Highlight and copy the code
   5. Paste the code into your new Dot Net Nuke html module (Hint: I use Dreamweaver to edit the HTML code to only have the form, removing the Head and Body tags.  I then copy and paste the code into DNN – I find it easier to edit code in DW rather than DNN.)
   6. Within the code there will be a snippet of code that looks something like: [code] <div id=”fsSubmit1117144″><input id=”fsSubmitButton1117144″ type=”submit” value=”Submit Form” /></div> [/code]
   7. Replace the code with the following: [code] <input type=”submit” onclick=”this.form.action=’http://www.formstack.com/forms/index.php’;this.form.submit();return false;” value=”SUBMIT FORM” id=”fsSubmit1117144″ /> [/code] Make sure you replace the “1117144” with the id number located in your original Formstack Snippet.
   8. Save the DNN Module and you are done!

If you need further assistance producing custom forms for your website, drop us a line or give us a call (866) 732-2271, we’d love to talk to you