Skip to content

Instantly share code, notes, and snippets.

@MGCodeSnips
Last active May 9, 2018 07:43
Show Gist options
  • Save MGCodeSnips/31807599c0b108ac447d003933e240a3 to your computer and use it in GitHub Desktop.
Save MGCodeSnips/31807599c0b108ac447d003933e240a3 to your computer and use it in GitHub Desktop.
better contact form
<style type="text/css">/*CONTACT FORM*/
.contact-form {font-size: 12px;}
.contact-form h1 {font-size: 14px; margin: 10px 0px;}
.contact-form p.required {color: red; font-weight: bold; font-size: 11px; margin: 0 0 0 20%}
.contact-form .hr {border-bottom:1px dotted #CCC; height: 1px; margin: 10px 0px; }
.contact-form-row {clear: both; overflow: hidden; margin: 5px;}
.contact-form-row label {font-weight: bold; width: 50%; float: left; line-height: 38px;font-size: 16px;}
.contact-form-row input, .contact-form-row textarea {padding:10px; border: 1px solid #CCC; box-shadow: 0px 0px 5px rgba(0,0,0,.1) inset; float:left; width: 90%; background: #EFEFEF}
.contact-form-row textarea {height: 120px;}
.contact-form-row .star {color: red;}
#contact-form-submit {background: none; border: none;}
#contact-form-submit input {width: 80px!important; cursor: pointer; border: none; padding:10px; background: #000; color: #FFF; border: none; box-shadow: none; font-weight: 700; text-transform: uppercase; border-radius: 3px; }
#contact-form-submit input:hover {opacity: 0.7}
#recaptcha_area {}
.lol {display: table;}
</style>
<div class="contact-form">
<h1><span style="font-size: 18px;">Contact Us</span></h1>
<div class="hr"><br />
&nbsp;</div>
<p><span class="star"><span style="font-size: 16px;">Thanks for getting in touch with us.&nbsp; We'll get back to you as soon as we can.&nbsp;</span><br />
<br />
<br />
<span style="font-size: 14px;"><span style="color: rgb(255, 0, 0);">*</span></span></span><span style="font-size: 14px;"><span style="color: rgb(255, 0, 0);">Required Field</span></span></p>
<form action="index.asp?function=FORMMAIL" class="contact-form" method="POST">
<div class="contact-form-row"><label for="name">Name: <span class="star">*</span></label><input name="Name" type="text" value="" /></div>
<div class="contact-form-row"><label for="email">Email Address: <span class="star">*</span></label><input name="EmailAddress" type="text" value="" /></div>
<div class="contact-form-row"><label for="message">Message:</label><textarea name="Message" type="text" value=""></textarea></div>
<div class="contact-form-row lol">[ekm:captcha][/ekm:captcha]</div>
<div class="contact-form-row" id="contact-form-submit"><input type="submit" value="Send" /></div>
<!-- HIDDEN --><input name="fieldorder" type="hidden" value="[Name],[EmailAddress],[Message]" /> <input name="requiredfields" type="hidden" value="[Name],[EmailAddress]" /> <input name="subject" type="hidden" value="Email enquiry from your website" /></form>
</div>
<!-- another contact form -->
<style type="text/css">/*CONTACT FORM*/
.contact-form {font-size: 12px;}
.contact-form h1 {font-size: 14px; margin: 10px 0px;}
.contact-form p.required {color: red; font-weight: bold; font-size: 11px; margin: 0 0 0 20%}
.contact-form .hr {border-bottom:1px dotted #CCC; height: 1px; margin: 10px 0px; }
.contact-form-row {clear: both; overflow: hidden; margin: 5px; padding-top: 15px;}
.contact-form-row label {color: #fff; font-weight: bold; float: left; line-height: 38px;font-size: 16px;}
.contact-form-row input, .contact-form-row textarea {padding:10px; border: 1px solid #CCC; box-shadow: 0px 0px 5px rgba(0,0,0,.1) inset; float:left; width: 100%; background: #EFEFEF}
.contact-form-row textarea {height: 40px;}
.contact-form-row .star {color: red;}
#contact-form-submit {background: none; border: none;}
#contact-form-submit input {width: 100%; cursor: pointer; border: none; padding:10px; background: #000; color: #FFF; border: none; box-shadow: none; font-weight: 700; text-transform: uppercase; border: solid 4px; }
#contact-form-submit input:hover {opacity: 0.7}
#recaptcha_area {}
.lol {display: table; margin:auto;}
</style>
<br />
<span style="color: rgb(255, 255, 255);"><span style="font-size: 26px;"><strong>Enquiries</strong></span></span>
<hr />
<div class="contact-form">
<form action="index.asp?function=FORMMAIL" class="contact-form" method="POST">
<div class="contact-form-row"><input name="Name" placeholder="Name" type="text" value="" /></div>
<div class="contact-form-row"><input name="Organisation" placeholder="Organisation" type="text" value="" /></div>
<div class="contact-form-row"><input name="EmailAddress" placeholder="Email Address" type="text" value="" /></div>
<div class="contact-form-row"><input name="Phone Number" placeholder="Phone" type="text" value="" /></div>
<div class="contact-form-row"><textarea name="Message" placeholder="Details of your enquiry" type="text" value="">Details of your enquiry</textarea></div>
<div class="contact-form-row lol">[ekm:captcha][/ekm:captcha]</div>
<div class="contact-form-row" id="contact-form-submit"><input type="submit" value="Send" /></div>
<!-- HIDDEN --><input name="fieldorder" type="hidden" value="[Name],[Organisation],[EmailAddress],[Phone],[Message]" /> <input name="requiredfields" type="hidden" value="[Name],[EmailAddress],[Phone]" /> <input name="subject" type="hidden" value="Email enquiry from your website" /></form>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment