Contact us page for blogger

Author - Sachin Saini
Monday, June 24, 2019
2
contact us
contact us page in blogger
ब्लॉगर की वेबसाइट में contact us page बनाने के लिए निम्न steps फॉलो करे
(toc) #title=(Table of Content) 
Step 1: अपने ब्लॉगर अकाउंट में लोग इन करे।
Step 2: ब्लॉगर डैशबोर्ड में pages पर  क्लिक करे।
Step 3: new page पर क्लिक करे। 



Step 4: पेज  का नाम अपनी इच्छा के अनुसार रख दे। 
Step 5: html पर क्लिक करे। 
Step 6: अब ब्लॉगर के डिफाल्ट कोड को सेलेक्ट करके डिलीट कर दे।  
Step 7: अब निचे दिए गए अपनी पसंद के किसी  कोड को सेलेक्ट करके पेस्ट कर दे। 
Step 8: Right side में optons पर क्लिक करके comments Don't allow कर दे। 
Step 9: पेज को पब्लिश करें।
contact us page step

 आपका संपर्क पेज तैयार है।  


style 1
contact us page
contact us page demo

demo

<div dir="ltr" style="text-align: left;" trbidi="on">

<form name="contact-form">
<div style="text-align: justify;">
<span style="color: #999999; display: inline-block; font-family: &quot;roboto&quot; , sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"> Name </span></div>
<div style="text-align: justify;">
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  </div>
<div style="text-align: justify;">

</div>
<div style="text-align: justify;">
<span style="color: #999999; display: inline-block; font-family: &quot;roboto&quot; , sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"> Email Address <span style="background: #333333; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</span></span> </div>
<div style="text-align: justify;">
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  </div>
<div style="text-align: justify;">

</div>
<div style="text-align: justify;">
<span style="color: #999999; display: inline-block; font-family: &quot;roboto&quot; , sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;">Content <span style="background: #333333; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</span></span></div>
<div style="text-align: justify;">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> </div>
<div style="text-align: justify;">
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  </div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<div style="text-align: justify;">
<style scoped="" type="text/css">
/* CSS Contact */
#ContactForm1,#ContactForm1 br{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:96.5%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #e6e6e6;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:97%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Roboto', sans-serif;border:1px solid #e6e6e6;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:#666;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Roboto', sans-serif;float:left;background:#fff;color:#aaa;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:0.5px;background-image: linear-gradient(110deg, #1dbf73 0%, #1dbf73 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #e6e6e6;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#1dbf73;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:60px;}
.contact-form-error-message-with-border {background:#f36c60;color:#fff;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;padding:0px}
.post-body img{max-width:100%!important;padding:0px}
.contact-form-error-message-with-border
   {
    background:#f36c60;
    border: 1px solid #ddd;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #666;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    opacity: 1;
    position: static;
    text-align: center;
    margin: 20px 0 0
  }
  .contact-form-success-message-with-border{
    background:#fff;
    border: 1px solid #ddd;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #666;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    opacity: 1;
    position: static;
    text-align: center;
    margin: 20px 0 0
  }
  .contact-form-cross {
    height: 11px;
    margin: 0 5px;
    vertical-align: 0!important;
    width: 11px;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -goog-ms-box-shadow: none!important;
    box-shadow: none!important
  }
  
</style>
</div>
<div style="text-align: justify;">
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4756312408149898454';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2420919130580284316','//www.bloggerspice.com/','2420919130580284316');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '4756312408149898454', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>


</div>
</div>(code-box)


style 2
contact us page
contact us demo

demo

<style type='text/css' scoped=''>
  /*<![CDATA[*/
    img.contact-form-cross {padding:0px;
    height: 11px;
    margin: 0 5px;
    vertical-align: 0!important;
    width: 11px;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -goog-ms-box-shadow: none!important;
    box-shadow: none!important
  }
  .contact-form-box {
    width: 100%;
    margin: 20px auto;
    padding: 0
  }
  
  #contactForm .floating-label-form-group {
    font-size: 14px;
    position: relative;
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd
  }
  
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus {
    position: relative
  }
  
  #contactForm .floating-label-form-group:after,
  #contactForm .floating-label-form-group:before {
    position: absolute;
    bottom: -1px;
    width: 0;
    height: 2px;
    background-color: #e8554e;
    content: "";
    transition: width .4s ease-in-out;
    display: block
  }
  
  #contactForm .floating-label-form-group:before {
    right: 50%
  }
  
  #contactForm .floating-label-form-group:after {
    left: 50%
  }
  
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus:after,
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus:before {
    width: 50%
  }
  
  #contactForm .floating-label-form-group input,
  #contactForm .floating-label-form-group textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-family: Roboto, Arial, sans-serif;
    font-weight: 400;
    background: 0 0;
    box-shadow: none!important;
    resize: none
  }
  
  #contactForm .floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: 12px;
    font-family: Roboto, Arial, sans-serif;
    font-weight: 300;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease, opacity .3s ease;
    -moz-transition: top .3s ease, opacity .3s ease;
    -ms-transition: top .3s ease, opacity .3s ease;
    transition: top .3s ease, opacity .3s ease
  }
  
  #contactForm .floating-label-form-group::not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #eee
  }
  
  #contactForm .floating-label-form-group-with-value label {
    top: 0;
    opacity: 1
  }
  
  #contactForm .floating-label-form-group-with-focus label {
    color: #e8554e
  }
  
  #contactForm {
    border-top: 1px solid #ddd
  }
  
  #contactForm textarea.form-control {
    height: auto
  }
  
  #contactForm .form-control {
    display: block;
    width: 100%;
    color: #555
  }
  
  #contactForm input:active,
  #contactForm input:focus,
  #contactForm textarea:active,
  #contactForm textarea:focus {
    outline: 0
  }
  
  #contactForm .btn,
  #contactForm .contact-form-button-submit {
    font-family: Roboto, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    border-radius: 0;
    padding: 0 25px;
    height: 51px;width:100%;
    line-height: 51px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    margin: 20px 0 0;
    background-image: none
  }
  
  #contactForm .contact-form-button {
    height: 51px;
    line-height: 51px
  }
  
  #contactForm .btn-default:focus,
  #contactForm .btn-default:hover,
  #contactForm .contact-form-button-submit:focus,
  #contactForm .contact-form-button-submit:hover {
    background-color: #e8554e;
    border: 1px solid #be403a;
    color: #fff
  }
  
  .contact-form-error-message-with-border,
  .contact-form-success-message-with-border {
    background: #fff;
    border: 1px solid #ddd;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    opacity: 1;
    position: static;
    text-align: center;
    margin: 20px 0 0
  }
  

  
  .contact_layout {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 99999
  }
  
  .contact_message {
    width: 50%;
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid transparent;
    text-align: center;
    color: #333;
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -25%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .contact_message:before {
    content: "\f164";
    font-family: FontAwesome;
    font-weight: 500;
    font-size: 30px;
    display: block;
    margin-bottom: 10px;
  }
  
  @media screen and (max-width:768px) {
    .contact_message {
      width: 90%!important;
      margin-left: -45%!important;
    }
    .contact-form-box {
      width: 100%;
    }
  }
  /*]]>*/

</style> <div class="contact-form-box">
<div>
Please fill in the form below to contact </div>

<form name="contact-form" id="contactForm">
<div class="floating-label-form-group">
<label>Name</label>       <input type="text" class="form-control" placeholder="Name" id="ContactForm1_contact-form-name" name="name" value="" /> </div>
<div class="floating-label-form-group">
<label>Email Address</label>       <input type="text" class="form-control" placeholder="Email Address" id="ContactForm1_contact-form-email" name="email" value="" /> </div>
<div class="floating-label-form-group">
<label>Message</label>       <textarea rows="5" class="form-control" name="email-message" placeholder="Message" id="ContactForm1_contact-form-email-message"></textarea>     </div>
<input id="ContactForm1_contact-form-submit" type="button" class="btn btn-default" value="send" />     <div class="clear">
</div>
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script>
$(function() {
  $("body").on("input propertychange", ".floating-label-form-group", function(e) {
    $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
  }).on("focus", ".floating-label-form-group", function() {
    $(this).addClass("floating-label-form-group-with-focus");
  }).on("blur", ".floating-label-form-group", function() {
    $(this).removeClass("floating-label-form-group-with-focus");
  });
});
</script>

मुबारक हो आपने अपना संपर्क पेज बना लिया।

यदि आपको पोस्ट अच्छी लगी तो कृपया इसे अपने दोस्तों के साथ शेयर करे तथा हमें subscribe  करना ना भूले। 

धन्यवाद।  
Tags

You may like these posts

Show more

Post a Comment

2Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
Share to other apps
Copy Post Link