টিপস এন্ড ট্রিকস

ব্লগারে স্টাইলিশ যোগাযোগ ফর্ম যুক্ত করার উপায়

স্টাইলিশ যোগাযোগ ফর্মটি আপনার ব্লগার সাইটে সঠিকভাবে যুক্ত করতে উপরের ভিডিওটি ফলো করুন।

যোগাযোগ ফর্ম কোড

<i class="fa fa-user"></i><span style="font-size: medium;"> Name </span><br />
<form name="contact-form">
  <input id="ContactForm1_contact-form-name" name="name" size="40" type="text" value="" />
  <br />
  <i class="fa fa-envelope"></i><span style="font-size: medium;"> Mail</span>
  <span style="color: red; font-size: x-small; font-weight: bold;">important</span>
  <br />
  <input id="ContactForm1_contact-form-email" name="email" size="40" type="text" value="" />
  <br />
  <i class="fa fa-comments"></i><span style="font-size: medium;"> Message </span><span style="color: red; font-size: x-small; font-weight: bold;">important</span><br />
  <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
</form>
<form name="contact-form">
  <input id="ContactForm1_contact-form-submit" type="button" value="submit" />
</form>
<form name="contact-form" style="text-align: left;">
  <div style="max-width: 222px; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message"></div>
    <div id="ContactForm1_contact-form-success-message"></div>
  </div>
  <style scoped="" type="text/css">
    #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ width:100%;height:40px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:2px solid #ccc;border-radius:5px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Hind Siliguri',sans-serif;border:2px solid #ccc;border-radius:5px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Hind Siliguri';float:left;background:#3399ff;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:5px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#0073e6;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
  </style>
</form>

সম্পর্কিত আর্টিকেল

মন্তব্য করুন

আপনার ই-মেইল এ্যাড্রেস প্রকাশিত হবে না। * চিহ্নিত বিষয়গুলো আবশ্যক।

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top button

অ্যাডব্লকার ডিটেক্টেড

আপনি সম্ভবত অ্যাডব্লকার ব্যবহার করছেন। আমাদের সাইট ভিজিট করতে চাইলে অবশ্যই অ্যাডব্লকার ডিজেবল করতে হবে।