Promote Your Business With Us -
Mail Now
×

How To Make Contact Us Form on Blogger in 2021 [Blogger Guide]

byAdmin
0
How to Create Contact Us on Blogger in 2021- Contacting us or commonly referred to as "contact us on the website" is one of the things that should be owned by the blog to make it easier for anyone to contact us when collaborating. Be offered.
How To Make Contact Us Form on Blogger- Blogger Guide

We can use Contact Us in 2 ways, using tools running on Google or we can build it with the help of CSS and Html code.

Of course, one contact us which is created using Google tool, using CSS code will look just plain different, and HTML will look interesting and varied as we can customize it with CSS code that you learn so that you To modify.

But for those of you unfamiliar with CSS or Html, I have provided 2 examples of cool contact forms that have been modified by the creator (the contact is not mine).

Above is an example of contact I will share in this meeting. Keep in mind that the message will automatically enter the email blog we use, so you don't need to fiddle with it anymore, just paste and save. Check the tutorial given below.

Design 1:- 

Steps To Create Contact Us Form 

How To Make Contact Us Form on Blogger- Blogger Guide

1. Go To Page And Click New Page.

2. Paste the following code into the HTML post editor after removing everything in it.

<form id="kontak-arlina" name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> 

<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>

<style scoped="" type="text/css">

#comments,.post_meta,#blog-pager{display:none}

form{color:#666}

form.payforpal{margin:auto;text-align:center}

#kontak-arlina{margin:auto;max-width:640px}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}

#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}

#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}

#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}

.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}

.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}

img.contact-form-cross{line-height:40px;margin-left:5px}

.post-body input{width:initial}

@media only screen and (max-width:640px){

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}

</style>

<script type="text/javascript">

//<![CDATA[

if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');

//]]>

</script>

<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'] = '5818992786706319577';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5818992786706319577','//YOUR URL/','5818992786706319577');

_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': '5818992786706319577', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>
3. Fill in the page title with the name Contact Us or Contact Me.

4. Replace all 5818992786706319577 id codes with your blog's id code. There are 4 ID codes, please change all of them one by one.

5. And also replace  YOUR URL with the name of your blog.

6. Now Finally Save It.

Design 2:- 
Step To Create Contact Us Form Page 
How To Make Contact Us Form on Blogger- Blogger Guide

1. The trick is also the same as the first way you open a blog and then create a new page and switch to HTML mode then paste this code on the page.

<style scoped="scoped">

.blanterinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}

input#ContactForm1_contact-form-email-message{height:150px}

input#ContactForm1_contact-form-submit{color:#fff!important;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}

input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}

</style>

<form name="contact-form">

<div class="blanterinput">

<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />

<span class="highlight"></span>

<span class="bar"></span>

<label>Name</label>

</div>

<div class="blanterinput">

<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />

<span class="highlight"></span>

<span class="bar"></span>

<label>Email</label>

</div>

<div class="blanterinput">

<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>

<span class="highlight"></span>

<span class="bar"></span>

<label>Message</label>

</div>

<input id="ContactForm1_contact-form-submit" type="button" value="Send" />

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</form>

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

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '5818992786706319577', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>
</script>
2. Look for the How to Contact Us on Blogger - Contacting us or commonly referred to as "contact us on the website" is one of the things that should be owned by the blog to make it easier for anyone to contact us when collaborating. Be offered.

How To Make Contact Us Form on Blogger- Blogger Guide

We can use Contact Us in 2 ways, using tools running on Google or we can build it with the help of CSS and Html code.

Of course, one contact us which is created using Google tool, using CSS code will look just plain different, and HTML will look interesting and varied as we can customize it with CSS code that you learn so that you To modify.

But for those of you unfamiliar with CSS or Html, I have provided 2 examples of cool contact forms that have been modified by the creator (the contact is not mine).

Above is an example of contact I will share in this meeting. Keep in mind that the message will automatically enter the email blog we use, so you don't need to fiddle with it anymore, just paste and save. Check the tutorial given below.

Design 1:- 

Steps To Create Contact Us Form 

How To Make Contact Us Form on Blogger- Blogger Guide

1. Go To Page And Click New Page.

2. Paste the following code into the HTML post editor after removing everything in it.

<form id="kontak-arlina" name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> 

<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>

<style scoped="" type="text/css">

#comments,.post_meta,#blog-pager{display:none}

form{color:#666}

form.payforpal{margin:auto;text-align:center}

#kontak-arlina{margin:auto;max-width:640px}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}

#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}

#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}

#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}

.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}

.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}

img.contact-form-cross{line-height:40px;margin-left:5px}

.post-body input{width:initial}

@media only screen and (max-width:640px){

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}

</style>

<script type="text/javascript">

//<![CDATA[

if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');

//]]>

</script>

<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'] = '5818992786706319577';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5818992786706319577','//YOUR URL/','5818992786706319577');

_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': '5818992786706319577', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>
3. Fill in the page title with the name Contact Us or Contact Me.

4. Replace all 5818992786706319577 id codes with your blog's id code. There are 4 ID codes, please change all of them one by one.

5. And also replace  YOUR URL with the name of your blog.

6. Now Finally Save It.

Design 2:- 

Step To Create Contact Us Form Page 

How To Make Contact Us Form on Blogger- Blogger Guide

1. The trick is also the same as the first way you open a blog and then create a new page and switch to HTML mode then paste this code on the page.

<style scoped="scoped">

.blanterinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}

input#ContactForm1_contact-form-email-message{height:150px}

input#ContactForm1_contact-form-submit{color:#fff!important;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}

input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}

</style>

<form name="contact-form">

<div class="blanterinput">

<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />

<span class="highlight"></span>

<span class="bar"></span>

<label>Name</label>

</div>

<div class="blanterinput">

<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />

<span class="highlight"></span>

<span class="bar"></span>

<label>Email</label>

</div>

<div class="blanterinput">

<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>

<span class="highlight"></span>

<span class="bar"></span>

<label>Message</label>

</div>

<input id="ContactForm1_contact-form-submit" type="button" value="Send" />

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</form>

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

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '5818992786706319577', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>
</script>
2. Look for the idblanter code then replace it with your blog address.

3. Then find the ID code 5818992786706319577 and replace it with your friend's ID code.

4. Finally, click Save and Finish.

Conclusion:-

So how easy is it? How to contact us in Blogger? The method is quite simple and simple, if you understand CSS then you can modify it to make it more interesting and cool. If you really don't understand or have an error, you can ask in the comment column below, so I can help improve it.

Thank You...! code then replace it with your blog address.

3. Then find the ID code 5818992786706319577 and replace it with your friend's ID code.

4. Finally, click Save and Finish.

Conclusion:-

So how easy is it? How to contact us in Blogger? The method is quite simple and simple, if you understand CSS then you can modify it to make it more interesting and cool. If you really don't understand or have an error, you can ask in the comment column below, so I can help improve it.

Thank You...!
Tags:

please do not enter any spam link.

Post a Comment (0)
Previous Post Next Post