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>
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.
@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.
@Adam Humphrey
Yes, I am using DNN 5.1
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.
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!
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)
@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:
@ Fermin
Got it : added +form.keyword.value to the end of the url.
So