How Can I Hide the Contact Form and Show When User Click "Send Message"

[bournelegend]

I have a contact form on item-sidebar but its occupying too much space. I need only to show a button that when clicked by user then the contact form shows. How can i do it with this codes?
<div class="widget">
       <h3><i class="fa fa-envelope"></i> <?php _e('Send message', 'glider'); ?></h3>
        <div class="widget-content seller-message">
           <form action="<?php echo osc_base_url(true); ?>" method="post" name="contact_form" id="contact_form" <?php if (osc_item_attachment()) {
        echo 'enctype="multipart/form-data"';
    }; ?> >
          <?php osc_prepare_user_info(); ?>
            <input type="hidden" name="action" value="contact_post" />
            <input type="hidden" name="page" value="item" />
            <input type="hidden" name="id" value="<?php echo osc_esc_html(osc_item_id()); ?>" />
            <div class="form-group">
               <input type="text" name="yourName" id="yourName" placeholder="<?php echo osc_esc_html(__('Your name', 'glider')); ?>">
            </div>
            <div class="form-group">
                 <input type="text" name="yourEmail" id="yourEmail" placeholder="<?php echo osc_esc_html(__('Your e-mail address', 'glider')); ?>">
            </div>
            <div class="form-group">
               <input type="text" name="phoneNumber" id="phoneNumber" placeholder="<?php echo osc_esc_html(__('Phone number', 'glider')); ?> (<?php echo osc_esc_html(__('optional', 'glider')); ?>)">
            </div>
            <div class="form-group">
               <textarea rows="4" name="message" id="message" placeholder="<?php echo osc_esc_html(__('Message', 'glider')); ?>"></textarea>
            </div>

            <?php if(osc_item_attachment()) { ?>
            <div class="form-group">
                <label for="attachment"><?php _e('Attachment', 'glider'); ?>:</label>
                <?php ContactForm::your_attachment(); ?>
            </div>
            <?php } ?>
       
            <div class="form-group">
            <?php if (function_exists('anr_captcha_form_field')) { ?>
            <?php anr_captcha_form_field(); ?>
         <?php } else { ?>
             <?php echo responsive_recaptcha(); ?>
             <?php osc_show_recaptcha(); ?>
             <?php } ?>
            </div>
            <button type="submit" class="btn btn-block btn-default"><?php _e("Send", 'glider'); ?></button>
            </form>
            <?php SellerValidation(); ?>
        </div>
    </div>

Any help would be much appreciated. Thanks.

[Liath]

you can do it with jquery

at first, create the button, you can style it with css

Code: [Select]

<div id="message-toggle">Send Message</div>
then hide the form and give an id for jquery

Code: [Select]

<div id="message-container" style="display: none;" class="widget-content seller-message">
then you need jquery to open the formular

Code: [Select]

<script>
$(document).ready(function(){
    $(document).on("click", "#message-toggle", function(){
        $("#message-toggle").slideToggle("slow", function(){
            $("#message-container").slideToggle("slow");
        });     
    });
});
</script>
and the whole code should look like this

Code: [Select]

<div class="widget">
    <h3><i class="fa fa-envelope"></i> <?php _e('Send message', 'glider'); ?></h3>
    <div id="message-toggle">Send Message</div>
    <div id="message-container" style="display: none;" class="widget-content seller-message">
        <form action="<?php echo osc_base_url(true); ?>" method="post" name="contact_form" id="contact_form" <?php if (osc_item_attachment()) { echo 'enctype="multipart/form-data"'; }; ?> >
            <?php osc_prepare_user_info(); ?>
            <input type="hidden" name="action" value="contact_post" />
            <input type="hidden" name="page" value="item" />
            <input type="hidden" name="id" value="<?php echo osc_esc_html(osc_item_id()); ?>" />
            <div class="form-group">
                <input type="text" name="yourName" id="yourName" placeholder="<?php echo osc_esc_html(__('Your name', 'glider')); ?>">
            </div>
            <div class="form-group">
                <input type="text" name="yourEmail" id="yourEmail" placeholder="<?php echo osc_esc_html(__('Your e-mail address', 'glider')); ?>">
            </div>
            <div class="form-group">
                <input type="text" name="phoneNumber" id="phoneNumber" placeholder="<?php echo osc_esc_html(__('Phone number', 'glider')); ?> (<?php echo osc_esc_html(__('optional', 'glider')); ?>)">
            </div>
            <div class="form-group">
                <textarea rows="4" name="message" id="message" placeholder="<?php echo osc_esc_html(__('Message', 'glider')); ?>"></textarea>
            </div>

            <?php if(osc_item_attachment()) { ?>
            <div class="form-group">
                <label for="attachment"><?php _e('Attachment', 'glider'); ?>:</label>
                <?php ContactForm::your_attachment(); ?>
            </div>
            <?php } ?>

            <div class="form-group">
                <?php if (function_exists('anr_captcha_form_field')) { ?>
                <?php anr_captcha_form_field(); ?>
                <?php } else { ?>
                <?php echo responsive_recaptcha(); ?>
                <?php osc_show_recaptcha(); ?>
                <?php } ?>
            </div>
            <button type="submit" class="btn btn-block btn-default"><?php _e("Send", 'glider'); ?></button>
        </form>
        <?php SellerValidation(); ?>
    </div>
</div>
<script>
$(document).ready(function(){
    $(document).on("click", "#message-toggle", function(){
        $("#message-toggle").slideToggle("slow", function(){
            $("#message-container").slideToggle("slow");
        });     
    });
});
</script>

[bournelegend]

Whoa! Works great sir. Thank you sir, you just solved another headache. Thank you.

[Liath]

I'm happy if i could help