How to insert html form syntax in an umbraco page?
Hi everyone!
Just a quick one out there for you guys, how can i insert normal html form syntax without it being automatically removed from my umbraco page when i click 'update' in the html editor view?
I want to insert the following if you copy that into a .txt file and save it as a .html it will make a simple searchbox that will send the form to display search results on the serialssolutions site.
Does anyone know how i can simply 'paste' this into an umbraco page without having to modify xslts or templates?
Hi You can add those elements to the validElements node in the file /config/tinyMceConfig.config. Personally I would create a Macro for this instead of adding it via the editor.
Originally I was focused on changing the TinyMCEConfig.config file under Umbraco\config, but that only works well for people who want to stop html tags from being stripped out of the HTML editor..- Which although i was able to do successfully, didn't solve my problem.
After a few hours of playing around I realised that i had to create an XSLT and macro like Richard had suggested - but this in it's self wasn't the answer to my problem!
After a deeper look into our Umbraco environment I had realised that the masterpage contain a html <form> </form> element that contained many scripts and elements.. so the key issue for me was that without me realising it, i was creating a nested form.. which is not legal HTML and is not understandable by current browsers!
At first I thought i would have to remove the original <form> that was in the masterpage, however this could have been disaterous for other site functions, so instead i decided to invoke a javascript function!
My problems solution -
I added the following to the tinyMCEConfig.config file
NOTE: Once you save this file you will need to go Umbraco\ and open the webdefault.config file and then enter a blank space, and then delete it & save - This will force umbraco to reload these settings without having to restart the application pool.
--------
<!-- note that you will need one for the form tag, and input tag -->
<!-- note that the above line should end with ]]> after it -->
-------
I then created a XSLT file like below -
First travel to the Developer tab and create a XSLT file with the following code
Explanation: I'm not very good with js, however i made a simple script to get the search box contents and then add it to a static URL string which would then be opened in a new window. For me this was the solution i needed without putting in any other extra time, as time is precious!
When you create the above XSLT file it will also create a matching MACRO by default.
Note: The macro settings just need to be default in this scenario, however you will need to select 'Use in editor' for the macro to appear under the WYSIWYG toolbar item called 'Insert/edit macro'
How to insert html form syntax in an umbraco page?
Hi everyone!
Just a quick one out there for you guys, how can i insert normal html form syntax without it being automatically removed from my umbraco page when i click 'update' in the html editor view?
I want to insert the following
<form method="GET" action="http://summon.serialssolutions.com/search">
<input type="text" name="s.q"/>
<input type="hidden" value="true" name="spellcheck"/>
<input type="submit" value="Search"/>
</form>
I want to insert the following if you copy that into a .txt file and save it as a .html it will make a simple searchbox that will send the form to display search results on the serialssolutions site.
Does anyone know how i can simply 'paste' this into an umbraco page without having to modify xslts or templates?
Your assistance is greatly appreciated!
/p
Hi You can add those elements to the validElements node in the file /config/tinyMceConfig.config. Personally I would create a Macro for this instead of adding it via the editor.
Cheers,
Richard
Hi Richard,
Could you please provide me solution for this:
https://our.umbraco.org/forum/developers/razor/72710-how-to-enter-form-tag-along-with-action-in-razorscript
Thanks, Manasa
Thanks for that Richard,
I have added the element into tinyMCEConfig.config, however it only lets me use the form tags <form></form> and removed the contents of the form!
So
<form method="GET" action="http://summon.serialssolutions.com/search">
<input type="text" name="s.q"/>
<input type="hidden" value="true" name="spellcheck"/>
<input type="submit" value="Search"/>
</form>
Will become <form></form>
Is there a how to guide for creating a a form macro? or xslt?
Thanks mate!
It's okay, I've found the solution!
Originally I was focused on changing the TinyMCEConfig.config file under Umbraco\config, but that only works well for people who want to stop html tags from being stripped out of the HTML editor..- Which although i was able to do successfully, didn't solve my problem.
After a few hours of playing around I realised that i had to create an XSLT and macro like Richard had suggested - but this in it's self wasn't the answer to my problem!
After a deeper look into our Umbraco environment I had realised that the masterpage contain a html <form> </form> element that contained many scripts and elements.. so the key issue for me was that without me realising it, i was creating a nested form.. which is not legal HTML and is not understandable by current browsers!
At first I thought i would have to remove the original <form> that was in the masterpage, however this could have been disaterous for other site functions, so instead i decided to invoke a javascript function!
My problems solution -
I added the following to the tinyMCEConfig.config file
NOTE: Once you save this file you will need to go Umbraco\ and open the webdefault.config file and then enter a blank space, and then delete it & save - This will force umbraco to reload these settings without having to restart the application pool.
--------
<!-- note that you will need one for the form tag, and input tag -->
<command>
<umbracoAlias>form</umbracoAlias>
<icon>images/editor/table.gif</icon>
<tinyMceCommand value="" userInterface="true" frontEndCommand="form">form</tinyMCECommand>
<priority>75</priority>
</command>
<command>
<umbracoAlias>input</umbracoAlias>
<icon>images/editor/table.gif</icon>
<tinyMceCommand value="" userInterface="true" frontEndCommand="input">input</tinyMCECommand>
<priority>76</priority>
</command>
<!-- put this under plugins -->
<plugin loadonFrontend="true">xhtmlxtras</plugin>
<!-- put this under validElements -->
,+form[action|id|method|name|target],+input[name|value|type|style]
<!-- note that the above line should end with ]]> after it -->
-------
I then created a XSLT file like below -
First travel to the Developer tab and create a XSLT file with the following code
Explanation: I'm not very good with js, however i made a simple script to get the search box contents and then add it to a static URL string which would then be opened in a new window. For me this was the solution i needed without putting in any other extra time, as time is precious!
-------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:tagsLib="urn:tagsLib" xmlns:autofolders.library="urn:autofolders.library" xmlns:iservLib="urn:iservLib" xmlns:umbraco.contour="urn:umbraco.contour"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib autofolders.library iservLib umbraco.contour ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:template match="/">
<html>
<head>
<script language="javascript">
function anneSearch (form) {
var var1 = form.inputbox.value;
var var2 = "http://myDomain.summon.serialssolutions.com/search?s.q="+var1
window.open (var2)
}
</script>
</head>
<body>
<form name="anneSearch" method="get" action="http://surgeons.summon.serialssolutions.com/search" target="_blank" >
<input style="background-color:#CCC" type="text" name="inputbox" value="Type Here" />
<input type="hidden" value="true" name="spellcheck"/>
<input type="button" name="button" value=" Search" onClick="anneSearch(this.form)"/>
</form>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
--------------------------
When you create the above XSLT file it will also create a matching MACRO by default.
Note: The macro settings just need to be default in this scenario, however you will need to select 'Use in editor' for the macro to appear under the WYSIWYG toolbar item called 'Insert/edit macro'
Hope that helps at least someone out there!
Petro.
is working on a reply...