Moving Success Message to the end of contact form (Karma)

If you have a large Contact Form and the Success Message is hidden on top of the Form, you may want to move it to the bottom of the Contact Form. The following is a simple solution. 1) Create and insert your contact form as per normal instruction from training video. 2) In your WordPress admin text editor, add the following javascript to the top of your contact form shortcode:

 [raw] <script type='text/javascript'> jQuery(window).load(function(){     if(jQuery(".message_green").length > 0){              jQuery('.message_green').hide();          jQuery('.success_message').html('<p class="message_green">Thank you for messaging us. We will get back to you as soon as possible. Cheers!</p>');     } }); </script> [/raw] 

3) In your WordPress admin text editor, add the following code after your contact form shortcode:

 <div class='success_message'></div> 

4) Using our demo contact form shortcode, your contact form codes in text editor should be something similar to the codes below:

 [raw] <script type='text/javascript'> jQuery(window).load(function(){     if(jQuery(".message_green").length > 0){              jQuery('.message_green').hide();          jQuery('.success_message').html('<p class="message_green">Thank you for messaging us. We will get back to you as soon as possible. Cheers!</p>');     } }); </script> [/raw]  [raw] [contact-form subject="Sterling Demo Site" to=""] [contact-field label="Name" type="name" required="true" /] [contact-field label="Email" type="email" required="true" /] [contact-field label="Website" type="url" /] [contact-field label="Comment" type="textarea" required="true" /] [/contact-form] [/raw]     <div class='success_message'></div> 

Notice the following jQuery code, from the above block of codes.

 Query('.success_message').html('<p class="message_green">Thank you for messaging us. We will get back to you as soon as possible. Cheers!</p>'); 

You can edit the new success message directly from here, and not in the theme’s site option. For example, adding style code to it, to increase font size.

 jQuery('.success_message').html('<p class="message_green" style="font-size:20px">Thank you for messaging us. We will get back to you as soon as possible. Cheers!</p>'); 

5) Now you can publish your contact form page, and try it out! That’s all!