Search Your Qestions



Blogger के लिए Contact Page कैसे बनाए ? || Create Contact Form (Contact Us Page) For Blogger ?

क्या आप भी एक Blogger हो और क्या आप भी Google Blogger में आपने अपना कोई भी Site या Blog बनाया है | और आप भी अपने Blog में Custom Contact Form Add या Page Create करना चाहतें | तो ये Post आपको जरुर पढ़ना चाहिए | क्यों की इस पोस्ट में आप जानेगे | की आप Blogger के लिए Contact Form या Page कैसे बनाते हैं|

Blogger के लिए Contact Page कैसे बनाए ?

Contact Page किसी भी Website और Blog  का एक मुख्य भाग होता हैं  | जिसमे उस Website  का महत्वपूर्ण  जानकारी होती हैं | जैसे Email Mobile Number या  Phone Number जिससे किसी Bussiness को Contact किया  जा सकता हैं | और अपनी सुझाव भी दे सकते हैं | यदि आपका कोई Blog या Website हैं | और यदि आपके Website को देखने वाले आपसे कुछ बातें या कुछ जानकारी लेना या देना चाहते हैं | तो  यही पर आपका Contact Page काम आता हैं | जिससे Website Owner और Viwer को आपस में जोड़ने का काम करता हैं | 

Blogger में  Contact Page कैसे बनाएं |  

Blogger Contact Page बनाने के लिए आप सबसे पहले अपने Blogger में Login कर ले फिर  Pages  Option पर Click कर ले फिर  New Page  पर Click कर एक New पेज Create कर ले |




जैस ही आप  Page Create करेगे | तो आपको कुछ इस प्रकार के Option मिलेगा | जैसा की आप Post लिखने के Time देखते हैं | इस पर आपको पेज का Titile Contact-Us  लिख देना हैं | फिर आपको left में दिख रहे PenTool पर Click कर देना हैं | फिर आपको  HTML View  पर Click कर देना हैं | इसे अच्छे से समझने के लिये आप निचे चित्रों को देख कर समझ सकते हैं |


Blogger के लिए Contact Page कैसे बनाए ? ||  Create Contact Form (Contact Us Page) For Blogger ?


जैसे ही आप इस Option पर क्लिक करोगे तो आपके सामने  दो Option लिखा  हुआ मिलेगा | HTML View  And Compose View  तो आप जब भी Blogger पर First Time आते हैं | तो आपको Default रूप में यही  Compose View  देखने को मिलता हैं | जहा पर आप अपना Pages और Post लिख सकते हैं | यदि आपको Web का ज्ञान हैं \ तो आप अपना Post HTML से भी लिख सकते हैं | इसके लिये आपको Left में दिख रहे PenTool पर Click कर देना हैं | और  फिर  HTML View पर Click कर देना हैं |  फिर आपको हमने इस पोस्ट में जो  Contact Us Page  का  HTML और Css से बने Page का Demo और Source Code दिया हैं | जिसमे से जो आपको ठीक लगे उसका Source Code को Copy कर  HTML View  पर जा कर नीचे   Paste कर के Publish पर Click कर दे | फिर आपका Contact Us Page बन जायेगा  अब आप इसे View कर इसका Link कही भी अपने Blog पर बना सकते हैं | या  Use कर सकते हैं | जैसे Menu या Footer पर |  नोट:: यहां  पर आपको Preview वाला Link को नहीं Use करना हैं | अपने Blogger के Pages में जा कर View करना हैं |  


Blogger Contact Form Design Source Code 1

<span align="center" style="color:red; font-family:arial;">
	<h3>Contact-Us</h3>
</span>
<hr />
<div dir="ltr" style="text-align: left;" trbidi="on">
	<form name="contact-form">
		<span style="font-family: inherit; font-size: x-large;"><i class="fa fa-pencil-square-o"></i> Name </span><br />
		<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Enter Your Full Name Here..." /> <br />
		<br />
		<i class="fa fa-envelope-o"></i><span style="font-family: inherit; font-size: x-large;"> Email Address</span> <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span> <br />
		<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="Enter Your Email Here..." /> <br />
		<span style="font-size: x-large;"><br /></span><span style="font-size: x-large;">Messages</span>&nbsp;<span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span><br />
		<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="Enter Your Messages Here..." ></textarea> <br />
		<input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br />
		<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>
	</form>
	<br />
	<style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;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:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;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:'Open Sans';float:left;background:#cf4d35;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:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;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>
 </div>
 <hr />
 <p align="center">
	<b><span style="font-size: x-small;">© 2019-2021 All Rights Reserved By<a href="https://www.seeon-tech.com/"> www.seeon-tech.com </a></span></b> <p></p>
 </p>
 <hr />
 <br />   


Blogger Contact Form Design Demo OutPut 1

Contact-Us


Name


Email Address important


Messages important




© 2019-2021 All Rights Reserved By www.seeon-tech.com







Blogger Contact Form ( Page ) Design Source Code 2


<!--Copy This Code -->
<span align="center" style="color:red; font-family:arial;">
  <h3>Contact-Us</h3>
</span>
<div dir="ltr" style="text-align: left;" trbidi="on">
  <div style="background: lightgray; padding: 20px;">
    <form name="contact-form">
      <span style="font-family: &quot;all&quot;; font-size: 33; font-weight: bold;">Name</span> <sub style="color: red;">impotent</sub>
      <br />
      <input class="input-name" name="name" placeholder="Enter Your Name Please" size="30" type="text" value="" />
      <br />
      <span style="font-family: &quot;all&quot;; font-size: 33; font-weight: bold;">E-Mail</span> <sub style="color: red;">impotent</sub>
      <br />
      <input class="input-email" name="email" placeholder="Enter Your E-Mail Please" size="30" type="email" value="" />
      <br />
      <br />
      <span style="font-family: &quot;all&quot;; font-size: 33; font-weight: bold;">Messages</span> <sub style="color: red;">impotent</sub>
      <br />
      <textarea class="message" cols="25" name="email-message" placeholder="Enter Your Messages Please-----" rows="5"></textarea>
      <br />
      <input class="button" type="button" value="Send" />
    </form>
    <style type="text/css">
    
    .input-name,.input-email
    /* name and email input css code with class */
    {
    height:auto;
    margin:5px auto;
    padding:10px;
    background:#fafafa;
    color:#444;
    border:1px solid #ccc;
    border-radius:3px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    transition:all 0.5s ease-out;
    }
    .message
    /* textarea tag use all css code messages*/
    {
    width:80%;
    height:175px;
    margin:5px 0;
    padding:10px;
    background:#fafafa;
    color:#444;
    font-family:'Open Sans',
    sans-serif;
    border:1px solid #ccc;
    border-radius:3px;
    transition:all 0.5s ease-out;
    }
    .button
    /* summit button  use all css code in this page*/
    {
    font-family:all;
    float:left;
    background:#cf4d35;
    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:4px;
    border:0;
    transition:all .8s ease;
    }
    </style>
    <br />
  <br /></div>
  <hr />
  <p align="center">
    <b><span style="font-size: x-small;">© 2019-2021 All Rights Reserved By<a href="https://www.seeon-tech.com/"> www.seeon-tech.com </a></span></b> <p></p>
  </p>
  <hr />
  <div>
  </div>
 </div>
 


Blogger Contact Form Design Demo OutPut 2

Contact-Us

Name impotent

E-Mail impotent


Messages impotent




© 2019-2021 All Rights Reserved By www.seeon-tech.com



तो हम उम्मीद करतें हैं | की आपको इस पोस्ट से Hepl जरुर मिला होगा यदि आपको ये जानकारी अच्छी लगी हो तो आप इस पोस्ट Blogger के लिए Contact Page कैसे बनाए ? ||  Create Contact Form (Contact Us Page) For Blogger ? || वाला पोस्ट को अपने Blogger दोस्तों को जरुर Send करे | और यदि आप इसी तरह की जानकारी पाने के लिये यदि आप हमसे जुड़ना चाहते हैं |तो आप हमारे Telegram Channel को जरुर ज्वाइन करे | 
Blogger के लिए Contact Page कैसे बनाए ? ||  Create Contact Form (Contact Us Page) For Blogger ?


Post a Comment

Thanks! For Reading Our Blog...

Previous Post Next Post
© 2019-2021 All Rights Reserved By www.seeon-tech.com