Slide Out "Contact Us" (no plugin, no additional PHP)

[bitsbb01]

Post HTML Suite Plugin's DEMO

*** If you are looking for an affordable hosting with great support quality, click here! ***

Slide Out "Contact Us" (no plugin, no additional PHP)
So here is the contact form specifically for those users who use hosted services and don't have FTP access or access to core files. No plugin, no additional PHP. It will send a mail with the content to the admin of the site (UID 1).

I'm using the 'send mail to member' feature of MyBB. Its a very basic tutorial just to demonstrate the functionality. You can further modify and reprogram it as per your requirement.

Open your header template and add at the very beginning:

Code:

Code:[Highlight]

<script type="text/javascript">
jQuery.noConflict();
            jQuery(document).ready(function(){

                jQuery("#contactLink").click(function(){
                    if (jQuery("#contactForm").is(":hidden")){
                        jQuery("#contactForm").slideDown("slow");
                    }
                    else{
                        jQuery("#contactForm").slideUp("slow");
                    }
                });
                
            });
</script>

Now in the same template locate the code:
Code:

Code:[Highlight]

<a name="top" id="top"></a>

and add after that:

Code:

Code:[Highlight]

<div id="contactFormContainer">
  <div id="contactForm">
    <form action="member.php" method="post" name="input">
      <input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
      <table border="0" cellspacing="1" cellpadding="1">
        <tr>
          <p><strong>Drop some lines and we will get back to you ...</strong></p>
        </tr>
        <tr>
          <td >Subject:</td >
        </tr>
        <tr>
          <td >
            <input type="text" class="textbox" size="52" name="subject" value="{$subject}" />
          </td>
        </tr>
        <tr>
          <td >Message:</td >
        </tr>
        <tr>
          <td >
            <textarea cols="46" rows="7" name="message">{$message}</textarea>
          </td>
        </tr>
      </table>
      <input type="hidden" name="action" value="do_emailuser" />
      <input type="hidden" name="uid" value="1" />
      <div align="center">
        <input type="submit" class="button" value="Send your Feedback" />
      </div>
    </form>
  </div>
  <div id="contactLink">Contact Us</div>
</div>

Now the CSS Part. Put this at the bottom of your global.css:

Code:

Code:[Highlight]

#contactFormContainer {
    position: absolute;
    left: 600px;
    float: right;
}

#contactForm {
    padding: 10px;
    height: 275px;
    width: 350px;
    background: #ADCBE7;
    border: 1px solid #0F5C8E;
    display: none;
}

#contactLink {
    padding: 3px;
    text-align: center;
    color: #fff;
    height: 20px;
    width: 120px;
    background-image: url(images/thead_bg.gif);
    display: block;
    cursor: pointer;
}

You are done. Now you have a jQuery slide-out contact form in your board.

Known issue: After successful submission of the form the page will be redirected to the profile of the administrator (UID 1).