Responsive Contact Us Page For Blogger

Contact Us Page blogger mai Important Role play kerta hai or bohot c sites ko Without Contact Us Page k Adsense Approval nahi milta jaisa k recent Past Weeks mai mere sath hua. Adsense Approval k liye mujhe ek Working Contact Us Page ko Blogger mai add kerna parha jis k baad meri Site Adsense Approved hogai.

How to add Responsive Contact Us Page in blogger?

Premium Blogger Templates mai by default Contact Us Page Add hota hai. Baat aati hai Free Blogger Templates key to us mai humei Khud se Contact Us Page add kerna hota hai. Bohot say log simple Contact Page ko Blogger mai add ker dete hai yeh Check kiye bagair k yeh Work bhi ker raha hai ya nahi. Aaj mai aap k sath aisa Contact Us Page share karonga jo 100% Work karega.

Contact Us Page ko Blogger mai add Ker nay k liye below steps ko Carefully Follow karoo. Or agr koi bhi issue aai to comment ker k mere sath share ker sakte hoo mai koshish karonga us issue ko fix ker ney ki.

Step 1: Go to the blogger dashboard then go to the Theme and Click On Edit HTML.

---

Step 2: Paste this below Code Right Before the Closing Tag Of Head.

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css' rel='stylesheet'/>

---

Step 3: Press CTRL+F and Search For The Following Tag.

</b:skin>

---

Step 4: Copy the below CSS and paste it right above the Closing Tag Of b:skin.

/* Responsive Custom Contact Us Page */

.form-container{
	position: relative;
	width: auto;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 30px;	
}

.contact-box{
	max-width: 850px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #565656;
	box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
	border-radius: 10px;
}

.left{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #565656;
	width: 100%;
	height: 100%;
	border-radius: 10px;
}

.left img {
	margin-left: 20px;
	width: 350px;
	height: 180px;
}

.right{
	padding: 25px 40px;
	margin-right: 20px;
}

.heading{
	font-size: 20px;
	color: #fff;
	position: relative;
	padding: 0 0 10px;
	margin-bottom: 30px;
}

.heading:after{
	content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 4px;
    width: 80px;
    border-radius: 2px;
    background-color: #2ecc71;
}

.input-box .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
    height: 38px;
    color: #eee;
}

.field{
	position: relative;
    background: transparent;
    width: 100%;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    color: #eee;
    margin-bottom: 20px;
	font-size: 13px;
	font-weight: 700;
    padding: 4px 0px 4px 25px;
	height: 33px;
	outline: none;
	transition: 0.8s all;
	overflow: hidden;
}

.field::placeholder{
	color: #eee;
	font-weight: 500;
}

textarea{
	min-height: 150px;
}

.field:focus,
textarea:focus {
	outline: none;
	border-color: #eee;
}

.btn{
	width: 100%;
	padding: 0.5rem 1rem;
	background-color: #2ecc71;
	color: #fff;
	font-size: 1.1rem;
	border: none;
	outline: none;
	cursor: pointer;
	transition: .3s;
	margin: 0 15px;
}

.btn:hover{
    background-color: #27ae60;
}

@media screen and (max-width: 880px){
	.contact-box{
		grid-template-columns: 1fr;
	}
	.left{
		height: 200px;
	}
	.left img {
		margin: auto;
	}
}

---

Step 5: Return to the Blogger Dashboard and Click On The Page Tab and Create a Page with the name of Contact Us or Whatever you like.

---

Step 6: Switch to Code Mode and paste the below HTML Code in it.

<div class="container">
		<div class="contact-box">
			<div class="left">
				<img src="img/Beast.png" alt="Beast Blogging">
			</div>
			<div class="right">
				<form name="contact-form">
				<h2>Have A Question!</h2>

				<div class="input-box">
				<span class="icon"><i class="fa fa-user"></i></span>
				<input id="ContactForm1_contact-form-name" type="text" class="field" placeholder="Your Name">
				</div>

				<div class="input-box">
				<span class="icon"><i class="fa fa-envelope"></i></span>
				<input id="ContactForm1_contact-form-email" type="email" class="field" placeholder="Your Email">
				</div>

				<div class="input-box">
				<span class="icon"><i class="fa fa-phone"></i></span>
				<input id="ContactForm1_contact-form-subject" type="tel" class="field" placeholder="Phone">
				</div>

				<div class="input-box">
				<span class="icon"><i class="fa fa-edit"></i></span>
				<textarea id="ContactForm1_contact-form-email-message" placeholder="Message" class="field"></textarea>
				</div>

				<div class="submit">
				<button class="btn" id="ContactForm1_contact-form-submit" type="submit">Send</button>
				</div>

				<p></p>
                            <div style="text-align: center; max-width: 222px; width: 100%">
                                <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
                                <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
                            </div>
				</form>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/609130596-widgets.js"></script>
    <script type='text/javascript'>
        window['__wavt'] = 'AOuZoY4PUAjvdPMazQDQJXJCrDFxkBfenw:1546660985916';
        _WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dYourBlogID', '//www.yourwebsite.com/p/contact-us.html', 'YourBlogID');
        _WidgetManager._SetDataContext([{
            'name': 'widgets',
            'data': [{
                'title': 'Contact Form',
                'type': 'ContactForm',
                'sectionId': 'sidebar2',
                'id': 'ContactForm1'
            }]
        }]);
        _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar2', 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': 'YourBlogID',
            'contactFormNameMsg': 'Name',
            'contactFormEmailMsg': 'Email',
            'contactFormMessageMsg': 'Message',
            'contactFormSendMsg': 'Send',
            'submitUrl': 'https://www.blogger.com/contact-form.do'
        }, 'displayModeFull'));

    </script>

---

Final Step: To make this Contact Form Workable follow the image, you should have to change the Highlighted Details with yours.

---

If you face any issue in this contact form, leave a comment and described your issue. I will do my best to fix it as soon as possible.