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

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

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>
আরও পড়ুনঃ  ওয়েবসাইট দিয়ে অনলাইনে আয় করার উপায় ২০২২

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

মন্তব্য করুন

আপনার ই-মেইল এ্যাড্রেস প্রকাশিত হবে না।

এটিও দেখুন
Close
Back to top button

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

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