How to Create Contact Us Page in Median Ui All Version Blogger Template

3 minute read

Hello Guys, welcome to Danish Editz Blog. In this article, I'm going to guide you step by step on making the contact us page in Median Ui All Version. So, follow the straightforward steps and learn additional concerning the way to add a contact page.

Preparation

The first thing you have to do is get your Blog Id code, the way is very easy on the blogger page look at the address bar then you will find examples of links like below

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

The marked half is your web log id code, please copy it as a result of this code are going to be necessary once making our contact page.

Tutorials

Make a new page, don't forget to fill in the search description on your new page.
The marked half is your web log id code, please copy it as a result of this code are going to be necessary once making our contact page.

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

<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'] = 'xxxxxxxxxxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\xxxxxxxxxxxxxxxxxx','//www.your_blog.com/','xxxxxxxxxxxxxxxxxx');
_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': 'xxxxxxxxxxxxxxxxxx', '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>

Change the part marked in the code above with your blog id, there are at least four of the same codes that you must change to your blog id.

Information:

[xxxxxxxxxxxxxxxxxx]: Your blog id, there are four times writing in the code above.
[www.your_blog.com]: Your blog address (without http / https)
[Your Name, Email, Message]: Input title into the contact form.
[Submit]: Text on submit button.
[Sending ...]: Text when sending messages
[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 please take a look at whether or not the contacts appliance is productive or not.

At this point, your contact page has been completely created, if you follow all the steps correctly we can guarantee that the contact us page is working correctly. If there are questions or sections that are not understood, please write down questions via the comments column provided.