+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: Slide Out "Contact Us" (no plugin, no additional PHP) (/thread-132213.html)
Slide Out "Contact Us" (no plugin, no additional PHP) - effone - 2013-01-05
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:
<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:
<a name="top" id="top"></a>
and add after that:
<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:
#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).
RE: Slide Out "Contact Us" (no plugin, no additional PHP) - Yaldaram - 2013-01-05
Its very good, but I personally like to add a Captcha so it shouldn't attract bots to contact us.
And for Captcha you've to use PHP then.
RE: Slide Out "Contact Us" (no plugin, no additional PHP) - effone - 2013-01-05
Yes Sultan. As I said its specifically for hosted board users.
I'll try to make another tut using same jQ with mailsend php including custom validation and CAPTCHA for general.
RE: Slide Out "Contact Us" (no plugin, no additional PHP) - terzier - 2013-01-05
agree with yaldi
btw, bookmark first
