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

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

Add Contact Form to Blogger

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

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

<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>

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

অ্যাডব্লকার ডিটেক্ট হয়েছে!

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