Excellent Support. By using our themes, you also use our excellent support! Our expert staff is here for you.

Responsive SMF Contact hack

Mick in Tutorials
Aug 22, 2018

Let's replace the old SMF Contact Page form with a responsive style by ridding the old table and using CSS only. I've always been wanting to this but always had it in the back burner until someone requested it here not long ago and sparked the issue that I should try this.





Note** This has not been tested without the recaptcha mod and/or SMF over-abused captcha and security questions


I only use the new updated recaptcha mod only


This tutorial is not for default theme



Let's create a file called: contact.css inside your custom theme's CSS folder and add the following:

Replace hex colors to your style


Code: [Select]
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
::-webkit-input-placeholder {
  color: #777;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #777;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #777;
}
:-ms-input-placeholder {
  color: #777;
}

.contact-container {
  position: relative;
  width: 100%;
  padding: 1em;
  margin: auto;
}

.contact-container h2 {
  text-align: center;
  text-transform: uppercase;
  color: #0984e3;
}

#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
  display: block;
  padding: 10px;
  margin: 10px auto;
  width: 100%;
  font-size: 18px;
  color: #777;
  border: 1px solid #ccc;
}

#contact textarea {
  font-size: 16px;
}

#contact input:hover,
#contact textarea:hover {
  border: 1px solid #888;
}
#contact input:focus,
#contact textarea:focus {
  border: 1px solid #777;
}

#contact textarea {
  max-width: 100%;
  min-width: 100%;
  max-height: 180px;
  min-height: 180px;
  resize: none;
}

#contact .send-button {
  text-align: center;
}

#contact .send-button button[type="submit"] {
  color: #fff;
  background: #0984e3;
  border: none;
  width: 100%;
  padding: 10px 0;
  font-size: 20px;
  text-transform: uppercase;
  transition: 0.5s all ease;
  cursor: pointer;
}

#contact .send-button button[type="submit"]:hover {
  background: #0a6ebb;
}

#contact .send-button button[type="submit"]:focus {
  position: relative;
  top: 2px;
}

/*######################################\*
              Responsive
\*######################################*/

@media screen and (min-width: 640px) {
  .contact-container {
    width: 600px;
  }

  #contact textarea {
    max-width: 98%;
    min-width: 98%;
    min-height: 152px;
    margin-right: 0;
  }

  #contact .right,
  #contact .left {
    display: block;
  }

  #contact .right {
    float: right;
    width: 50%;
  }

  #contact .left {
    float: left;
    width: 50%;
  }
  .cl {
    clear: both;
  }
}

Let's create a file called: Contact2.template.php in your custom theme and add the following:
Code: [Select]
<?php
/*
Contact Page
Version 2.0
by:vbgamer45
[url]http://www.smfhacks.com
*/
function template_main()
{
global $scripturl, $txt, $context;

echo '
<div class="contact-container">

  <h2>',  $txt['smfcontact_contact'], '</h2>
  <br />



  <form id="contact" action="', $scripturl, '?action=contact;sa=save" accept-charset="', $context['character_set'], '" method="post">
    <div class="left">
      <input type="text" name="from" placeholder="',$txt['smfcontact_name'],'" required="required"/>
      <input type="email" name="email" placeholder="',$txt['smfcontact_emailaddress'],'" required="required"/>
      <input type="text" name="subject" placeholder="',$txt['smfcontact_subject'],'" required="required"/>
    </div>
    <div class="right">
      <textarea name="message" placeholder="',$txt['smfcontact_body'],'" required="required"></textarea>
    </div>
    <div class="send-button cl">
      <button type="submit">',$txt['smfcontact_sendemail'],'</button>
    </div>';

// Is visual verification enabled?
if ($context['require_verification'])
{

echo '

 <h2>', !empty($context['post_error']['need_qr_verification']) ? ' style="color: red;"' : '', '</h2>

 <div align="center">', template_control_verification($context['visual_verification_id'], 'all'), '</div>';

         }
   
        echo '
  </form>

</div>

<div align="center"><span class="smalltext">Powered by <a href="https://www.smfhacks.com" target="blank">Contact Page</a></span></div>';

}

function template_send()
{
global $scripturl, $txt;
echo '

 <h2>',$txt['smfcontact_messagesent_click'],'<a href="', $scripturl, '">',$txt['smfcontact_messagesent_return'] ,'</h2>';

// Copyright link requird unless removal purchase is made
echo '<br /><div align="center"><span class="smalltext">Powered by <a href="https://www.smfhacks.com" target="blank">Contact Page</a> by <a href="https://www.createaforum.com" title="Forum Hosting">CreateAForum.com</a></span> </div>';
}
?>

Please, per smfhacks.com agreement, leave copyright intact.


In your custom theme's index.template.php find:
Code: [Select]
	<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/', $cssfix, '.css" />

and before:
Code: [Select]
	<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/contact.css?fin20" />

The catch 22 is that if the mod author updates the mod and you update your forum with new mod version, there's a chance that all this is lost.


References and Credits:

Contact Page
Contact Form

See the Pen Contact form (responsive) by Mick ([member=1]Mick[/member]-) on CodePen.


The SMF contact mod will be updated and responsive for SMF 2.1 in the near future

Tagged with:

Share This Post

Mick

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.

    


0 Comments



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up