Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Petro 3 posts 23 karma points
    May 23, 2011 @ 09:03
    Petro
    0

    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


  • Richard Soeteman 4049 posts 12922 karma points MVP 2x
    May 23, 2011 @ 09:13
    Richard Soeteman
    2

    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

  • Manasa 80 posts 201 karma points
    Nov 05, 2015 @ 14:45
    Manasa
    0

    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

  • Petro 3 posts 23 karma points
    May 26, 2011 @ 07:02
    Petro
    0

    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!


  • Petro 3 posts 23 karma points
    May 27, 2011 @ 07:50
    Petro
    0

    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 "&#x00A0;"> ]>
    <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.

     

     

Please Sign in or register to post replies

Write your reply to:

Draft