Hi,

We currently have a huge main page with a contact form. Once the contact form is completed and the user clicks "Submit" the page redirects to the home main page.

I've created a partial view for the "Thank you for submitting form" page and I cant seem to work out the best way to display the partial view once the submit button is clicked.

Contact Form code in the main page template:

                        <div class="clearfix">
                            <label for="email">Your email:</label>
                            <input id="email" class="input" name="email" type="text" value="" size="80" />      
                        </div>
                        <div class="clearfix">
                            <label for="phone">Your phone:</label>
                            <input id="phone" class="input" name="phone" type="text" value="" size="80" />                            
                        </div>
                        <div class="clearfix">

                            <label for="txtcompany">Your company:</label>
                            <input id="txtcompany" class="input" name="txtcompany" type="text" value="" size="30" />
                        </div>

                        <div class="clearfix">
                            <label for="message">Your message:</label>
                            <textarea id="message" class="input" name="00N2400000IJo32" rows="5" cols="30"></textarea>
                        </div>
                    <input id="submit_button" type="submit" value="Send email" />
                    </form>
                    <a class="hide-contactform" href="javascript:void(0);" title="Hide Menu">
                        <img src="media/2648/close.svg" alt="" title="">
                    </a>
                </div><!--form-->

The Partial View that needs to dynamically display once the submit button is clicked:

<div class="container narrow">
    <div class="wrapper">
        <div class="row clearfix">
            <div class="form pull-left">
                <div class="box thanks">
                    <div class="content">
                        <h2>Thank you for your Message, we shall respond as soon as possible and where appropriate</h2>
                    </div><!--content-->
                </div><!--box-->
                <a class="hide-contactform" href="javascript:void(0);" title="Hide contact form">
                    <img src="content/images/close.svg" alt="Close button to hide contact form" title="Hide contact form">
                </a>
            </div><!--form-->

            <div class="call-us">
                <h2>Or contact us on</h2>
                <p class="highlight">0123 456 7891<br><a href="mailto:[email protected]" title="Email Us">[email protected]</a></p>
            </div><!--call-us-->
        </div><!--row-->
    </div><!--wrapper-->
</div><!--container-->

So in summary once the "Submit" is clicked, we need the partial view to be displayed without the page re-loading again, almost like ajax, however I would like to know how to do it in the Umbraco way.

Extra info: the code is not being edited on Visual Studio, were just doing it on the www.example.com/umbraco# front end code editing platform.