Hello viewers, Welcome to Tech Aadi in todays blog we are going to talk about Creating Contact Us Page in Median Ui v1.6. Follow the steps carefully which is given below and do not miss any steps. It is a minimal process and very easy steps.
Creating a contact us page is very important for your blog. Because if any person is having any query then they will contact you through that and easily able to get help or contact you about important things.
Contact Us Page Preparation
The first thing you have to do is to get your blog id in which you want to add your contact page. To find it is very easy just look at the blogger url (address bar) when you are in posts section. You can find the example of the code given below :
Every blog has it own different blog id code.
https://www.blogger.com/blog/themes/000000000000000000
The Blue coloured marked part you see that is what your Blog ID look like this with random numbers. Please copy that because at later part we will need that Code for Creating Contact Page.
Creating Contact Us Page Tutorials Step By Step
- So first of all login to your Blogger dashboard and go to the Pages section of Blogger and then click on ➕ NEW PAGE, and then fill up the Search Description on the right side of the page.
- Now just switch to the Html mode from the upper left side and then copy the given below code and paste it in the page content. Make sure to copy all codes from below and paste there.
<!-- Median Ui v1.6 Contact Page Codes by Tech Aadi --!>
<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': 'Messag#039;, '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>You have to change the marked part of blog id in blue colour. There are four marked part in blue of blog id. You must change that with your blog id.
Information about marked part in code
[0000000000000000000]: Your blog id, there are 4 times writing in the code above. Change it appropriately.-
[www.your_blog.com]: Your blog address (without http / https). Change it as per yours. -
[Your Name, Email, Message]: Input title in 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.
Now publish the page and check whether the contact page is working or not.
After submit contact page please check your gmail inbox. If mail not received check your spam box.
After successful created of contact page it will look like this 👇🏻👇🏻👇🏻👇🏻
Now your contact us page is fully created, if you followed our steps correctly. The contact us page sholud look like this ☝🏼️☝🏼️ and in working condition.
If have any doubts regarding this article you can Contact us or comment below...
Copying Our Blog Post is totally unarguable. All our blog posts is protected by DMCA protection. So if we found out you copied our blog we can take strict actions.
Conclusion
Now I hope you have successfully created the Contact Page for Median Ui 1.6 on your blog. If you like this article please give starts and do comment below for any query related this article. Follow this blog for getting more posts like this on daily basis.