How to Add a Contact Page in Median Ui v1.6

Contact Page

   View Demo

Step 1: First of all Login to your Blogger Dashboard.

Step 2: In Blogger, create a post or page and insert the code shown below.

Step 3: Copy and paste the following code into Blogger's blog Post.

The first step is to obtain your blog Id code; this can be done by looking at the address bar on the blogger page, where you will find examples of links such as those below:

https://www.blogger.com/blog/themes/000000000000000000

Please copy the highlighted portion of your blog id code because it will be required when we create our contact page.

Tutorials

Make a new page, and don't forget to fill in the search description on it.

Change to HTML mode, then copy and paste the code below into the body of your page.

<!-- Median Ui v1.6 Contact Page Codes by Abdullahcoded --> 

<div class='ContactForm s-2' id='ContactForm1'>
  <form name='cForm'>
    <div class='cArea'>
      <label>
        <input class='cInpt cName' id='ContactForm1_contact-form-name' name='name' type='text'/>
        <span class='n'>Name</span>
      </label>
    </div>
    <div class='cArea'>
      <label>
        <input class='cInpt cMail' id='ContactForm1_contact-form-email' name='email' type='email'/>
        <span class='n req'>Email</span>
      </label>
      <span class='h'>Valid email required</span>
    </div>
    <div class='cArea'>
      <label>
        <textarea class='cInpt cMsg' id='ContactForm1_contact-form-email-message' name='message' rows='3'></textarea>
        <span class='n req'>Message</span>
      </label>
      <span class='h'>Empty messages not accepted</span>
    </div>
    <div class='cArea'>
      <input class='cBtn' id='ContactForm1_contact-form-submit' type='button' value='Submit' />
    </div>
    <div class='cArea nArea'>
      <p class='cNtf' id='ContactForm1_contact-form-error-message'></p>
      <p class='cNtf' id='ContactForm1_contact-form-success-message'></p>
    </div>
  </form>
</div>

<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>/*<![CDATA[*/ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '0000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\0000000000000000000','//www.your_blog.com/','0000000000000000000');
_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': '0000000000000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); var inputs = document.querySelectorAll('.widget input[type=text], .widget input[type=email], .widget textarea'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.addEventListener('input', function() {var bg = this.value ? 'fl' : 'nfl'; this.setAttribute('data-text',bg);}); } /*]]>*/</script>

Replace the area marked in the code above with your blog id; you'll need to modify at least four of the same codes to your blog id.

Information:

• [0000000000000000000]: Your blog id, which appears four times in the above code
• [www.your_blog.com]: Your blog's URL (without the http or https)
• [Your Name, Email and Message]: Input title in the contact form.
• [Submit]: This is the text that appears when you press the submit button.
• [Sending ...]: When sending messages, use text.
• [Your message has been sent.]: Message notification text sent.
• [Message could not be sent. Please try again later. ]:The message notification text was not sent.
• [A valid email address is required.]: Invalid email notification text.
• [A Message field cannot be empty.]: Text notification when message body is blank.

Publish your page and check to see if the contact widget is working properly.

Your contact page is now complete; if you complete all of the steps correctly, we can ensure that the contact page will function properly. Please write queries in the comments area if there are any questions or sections that you don't understand.

You May Like These Posts:

Conclusion

I hope you have successfully added your About Us Page. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright ©
ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ