Blog

Adding HTML Form Submission to the Text/HTML module in DNN

Question: How can I add an HTML <form> element to the Text/HTML module in DNN?

Problem: When editors add a <form></form> tag to the Source of the Text/HTML module, the <form> tags are removed after they click the Update link on the “Edit Text/HTML” form.

Cause: ASP.NET only allows one form per page and by default creates its own form just inside the <body></body> tags.

Solution: Here’s an example form we will add to our Text/HTML module.

<form action="http://someURL.com" method="post">
<label for="firstName">Your First Name</label>
<input id="firstName" title="Your First Name" alt="Your First Name" type="text" />
<label for="lasttName">Your Last Name</label>
<input id="lasttName" title="Your Last Name" alt="Your Last Name" type="text" />
<input title="Submit Form" type="submit" value="Submit Form" />
</form>

Take note of the Form method and action values.

Locate your submit button input. In our example it is

<input title="Submit Form" type="submit" value="Submit Form" />

Add the onclick method using the method and action values like this:

<input title="Send Form" onclick="this.form.method='post'; this.form.action='http://SomeURL.com/';this.form.submit(); />

Next we remove the opening and closing <form></form>tags so we are left with the following code:

<label for="firstName">Your First Name</label>
<input id="firstName" title="Your First Name" alt="Your First Name" type="text" />
<label for="lasttName">Your Last Name</label>
<input id="lasttName" title="Your Last Name" alt="Your Last Name" type="text" />
<input title="Send Form" onclick="this.form.method='post'; this.form.action='http://SomeURL.com/';this.form.submit();" type="submit" />

We cut and paste this code into the Text/HTML Editor making sure to be in “Source” mode. (Make sure the “Source” button in the upper left-hand corner of the Editor is highlighted.)

If you need your action to be get not post you can change this.form.method='get'. This will add the form values as URL parameters.

If you want your form to open a new window on submit you can add this.form.target='blank' as well.

Special thanks to Mitchel Sellers for his blog about this subject.

Update:
A word about this.form.method='get'
Some browsers (we’re not naming names but you know who you are), can’t handle the length of the __VIEWSTATE URL parameter which is sent when using the get method. In cases where we have to use the get method for forms, we add the following JavaScript code at the top of our form to clear the __VIEWSTATE value. This is not “best practices” but allows the solution above to work when using some “popular” browsers.

<script type="text/javascript">
//<![CDATA[
document.getElementById("__VIEWSTATE").value='';
//]]>
</script>
  1. Ebenezer Aniapam
    August 28th, 2009 at 07:54 | #1

    This is what I have been looking for. My only issue is I want the action to be mailto. Any idea where to put it or example.

    • August 28th, 2009 at 10:42 | #2

      @Ebenezer,
      I’m assuming you’re running DNN. If this is not the case, let me know. It may be possible to accomplish this in a Text/HTML module but it is very doubtful it would be an easy, straight forwards fix.
      I recommend you use one of the many DNN modules that allow you to create custom forms. Most of these modules enable you to save the form data to the database, a file, and/or send to an email address. I’ve used Form Master 2008 in the past with very good results.

  2. Ebenezer
    August 29th, 2009 at 20:44 | #3

    @Adam Humphrey
    Yes, I am using DNN 5.1

  3. September 7th, 2011 at 01:47 | #4

    I have to show some thanks to you for rescuing me from this challenge. After looking out throughout the world wide web and obtaining notions which were not powerful, I figured my life was over. Existing devoid of the answers to the issues you’ve solved as a result of your good report is a critical case, and ones which may have badly affected my entire career if I had not encountered your blog post. Your primary natural talent and kindness in playing with all things was very useful. I don’t know what I would’ve done if I had not come upon such a step like this. I am able to now look forward to my future. Thanks a lot very much for the skilled and effective help. I will not think twice to endorse the blog to anybody who should receive counselling about this topic.

  4. Robert
    February 16th, 2012 at 16:55 | #5

    I know this is an old tip, but it just saved me lots of hair pulling on a DNN migration. Just wanted to say thanks!

  5. Fermin
    April 16th, 2012 at 08:18 | #6

    How would you pass the input value in the url? Example I want to do a job search based on a keyword (keyword=input value) and the action is http://domain/altentry.asp?action=jobs&keyword=doctor (doctor is the keyword used from the input value)

    • April 16th, 2012 at 08:38 | #7

      @Fermin,

      When your form method is get (e.g. method=”get”) the values of the form are placed in the URL.

      As an example your form tag could look like this:

      <form action="altentry.asp" method="get">
      	<label for="keyword">Keyword</label>
      	<input type="text" id="keyword" />
      	<input type="submit" /> 
      </form>
  6. Fermin
    April 16th, 2012 at 08:40 | #8

    @ Fermin
    Got it : added +form.keyword.value to the end of the url.
    So

  7. June 18th, 2012 at 04:14 | #9

    Great Article, although i’m still struggling.
    I get this working, although the POST Event is posting not only the Attributes i want (FirstName & LastName in this example)…It’s posting all Form Items of the DNN Page (including _viewstate and such).
    What am i doing wrong here?
    Any Help highly appreciated!

  8. June 18th, 2012 at 09:08 | #10

    Hi @Frank,

    I’d recommend clearing the DNN field values you don’t need. At the end of the post under “Update” I recommend how to clear the __VIEWSTATE parameter. This will work for POST as well as GET methods.

    Unfortunately, there isn’t a way to remove these form parameters from the POST altogether. The best you can do is clear their values.

  9. Ava
    September 25th, 2012 at 10:21 | #11

    I suppose I’m sharing the pain of trying to submit a form from DNN. Whether I use get or post, the _VIEWSTATE is making my URL too long. But when I tried wiping it out like the sample code
    I get catastrophic failures (page corrupted, fails to load, invalid viewstate, etc.)
    Any other way around this?
    thanks!

    • September 26th, 2012 at 14:52 | #12

      Hi @Ava,

      This post isn’t really intended to help people trying to post back to their DNN site. It is usually helpful for people trying to post to an external API URL that is expecting either GET or POST parameter/value pairs.

      You are correct that you will see major issues if you try to post back to the same or another page on your DNN site after using JavaScript to remove the DNN __VIEWSTATE parameter.

      I’d highly recommend looking into writing a DNN Module that will accomplish your need functionality while keeping all the Viewstate parameters in order.

      Take a quick look at the “Developer Tools” section on this page. Writing a DNN module might be easier than you think.

  10. March 11th, 2013 at 11:26 | #13

    Does this still work in DNN 6.2.6? The form I’m trying to post works when I post from a regular HTML page to my DNN site.
    If I copy that html, remove the form tags and setup the onclick event for the button as described in this tutorial, I get a DNN error page when trying to post from one DNN site to another DNN site – I’m using Firefox 19.

    The error in the Event Viewer is this one, which I’ve seen in the past for some pretty random reasons that have nothing to do with viewstate MAC validation:
    “Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that configuration specifies”

    Thanks

  11. March 11th, 2013 at 12:57 | #14

    @ FredButters

    In case anyone is wondering, I ended up ditching the OnClick JavaScript and just used the PostBackURL property of an ASP.NET button and pointed it at the form to which I’m trying to post. It worked for me from within a DNN module.

  12. Jonathan
    July 1st, 2013 at 12:28 | #15

    If it helps anyone else… I solved this problem by adding the form inside of an iframe.

  13. November 12th, 2013 at 07:21 | #16

    nice site

  14. jaya
    December 25th, 2013 at 21:02 | #17

    I have added a html page on my local DNN and then called that page through iframe in html module. now when I am clicking on submit button after filling the form then its showing me server error. please help me how to resolve this issue.

  15. January 2nd, 2014 at 05:15 | #18

    thanks for the useful information, i bookmarked your page.

  16. June 30th, 2014 at 23:58 | #19

    i create contact us form in joomla 3.3 in blank module i created html amd css but i want know how to add php in contact form field and how to store in databse

  1. No trackbacks yet.
Subscribe to comments feed
Secured