Dotnetnuke–Feedback form with jQuery Popup
We have recently released an update for our dotnetnuke feedback module called feedback designer.
This form now support the jQuery popup effect on page to allow you to support the module from the skin or HTML module on your site.
This is an extract from our instruction manual:
Form Popup Options
The module is able to be run in an interesting Popup mode. This enables the form to run using jQuery and open in an elegant popup in screen popup.
When the “Enable Popup” is checked, then the form will be hidden form the page that it exists on, but be sitting waiting to be enabled with a token that you can put any place on a page. Lets look closely at an example to explain.
1. Put the module on a new page.
2. Configure the module form to work correctly as you would like. With all the form item, sending to an email address and test it. i.e. make it a normal functional form.
3. Configure the Modify Form “Look and Fee” section with the following Popup Options exactly.
Note that the form content will disappear when you return to the page. We have used a token of #cmd_form (complete feedback designer _form) as we are certain that this text will not randomly appear on a page already.
4. Now return to the page and go into the settings for menu for the Feedback Designer module on the page.
5. Under the page settings, disable the “Display Container” option. This will stop the feedback designer title and container being viewed by anyone other than the administrator of the site. Users that are not logged in as an admin will see nothing..
6. Return to the page.
7. From the normal DNN Module menu, add a Text HTML (HTML in dnn 5x) to the page.
8. Edit the HTML to make the following demo. With just straight text not hyperlinked yet.
9. Highlight the words “Click Here” and insert a hyperlink to a destination of #
10. Gives a result like this:
11. Switch the editor to HTML mode (source code)
you will notice the URL is something like this:
12. Edit the URL to replace everything between the < > with this:
<a id="cfd_form" href="#">
Where cfd_from is the token we created in the feedback designer form.
So in our case we edit:
This is a demo of the Feedback form. To enable <a href="http://www.interactivewebs.com/ContactUs/tabid/55/ctl/Edit/mid/3757/Default.aspx#">click here</a>.
To:
This is a demo of the Feedback form. To enable <a id="cfd_form" href="#">click here</a>.
Note: As complex as this appears to non HTML friendly people, all we are doing is replacing the hyperlink with a token that we named our self in the Feedback Designer Module.
13. Save an you are done. Clicking the link you created will display the feedback module on your page in Popup Mode.
Note that the form token can only be used one time on any page, but you can have multiple forms with different tokens used on a single page.
See our contact us page here for an example form.
http://www.interactivewebs.com/ContactUs.aspx