Create a contact us page ready Contact us HTML code
for Blogger blogs
How to
create a ready-made contact us page in blogger blogs
The Contact us or Cull us form is an
essential component of the blog or website if you want to profit from adding
Google Adsense ads. And if you are using a paid blogger template, it will most
likely have an effective contact form built into it. But if you are using a
free Blogger template, you will most likely encounter the problem of not having
a contact form or a contact us page that does not work. So we will explain how
to add the HTML contact us code for blogger blogs easily and it works with all
templates without problems.
ü
Go to the dashboard of your Blogger blog
from the Blogger site.
ü
From the side menu in Blogger, enter the
pages.
ü
Click on a new page to add a contact us page
to the blog.
ü
Enter a title for the page, preferably in
English, such as Contact us.
ü
From the top right of the page, click on
the pen icon and choose View HTML.
ü
Delete any content on the page and add the
Contact Us HTML code for Blogger blogs.
ü
On the left side, in the page settings
section, click on Options, then Readers' Comments, and choose Do not allow
adding comments.
ü
From the settings page on the left as
well, click on the tabs dedicated to robots, then click on noindex, noarchive
and noodp.
ü
Then click on Publish to save the changes
Code
Contact Us HTML For Blogger Blogger Ready
After
explaining the steps of creating a Contact Us form, and among the many contact
form codes available on the Internet, we chose an HTML Contact Us code that works
on all Blogger blogs without problems.
Copy the following code :
<div
dir="rtl" style="text-align: right;"
trbidi="on">
<div
id="contact-form">
<form
name="contact-form">
<input
class="contact-form-name"
id="ContactForm1_contact-form-name" name="name"
placeholder="الاسم"
size="30" type="text" value="" />
<input
class="contact-form-email"
id="ContactForm1_contact-form-email" name="email"
placeholder="بريد إلكتروني"
size="30" type="text" value="" />
<textarea
class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message"
name="email-message" placeholder="الرسالة"
rows="5"></textarea>
<input
id="ContactForm1_contact-form-submit" type="button"
value="إرسال"
/>
<br />
<div
style="text-align: center;">
<div
id="ContactForm1_contact-form-error-message">
</div>
<div
id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style
type="text/css">#contact-form{background:#ececec;padding:10px;box-shadow:0
0 0 1px
#d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{margin:5px
auto;border:1px solid #e3e3e3;transition:all .5s
ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px;font-family:'bein',Roboto,sans-serif}#ContactForm1_contact-form-submit{border:1px
solid #e3e3e3;font:unset;text-shadow:1px 1px 5px
#111;font-weight:700;font-size:14px;padding:5px
15px;background-color:#06de15;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;letter-spacing:1px;cursor:pointer}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;border-color:rgba(81,203,238,1);box-shadow:0
0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</style>
<script
src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js"
type="text/javascript"></script>
<script
type="text/javascript">
_WidgetManager._Init('');
_WidgetManager._RegisterWidget('_ContactFormView',
new _WidgetInfo('ContactForm1', 'contact-sec', null,
document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جارٍ
الإرسال...',
'contactFormMessageSentMsg': 'تم
إرسال رسالتك.',
'contactFormMessageNotSentMsg': 'تعذر
إرسال الرسالة، يرجى المحاولة مرة أخرى في وقت لاحق.',
'contactFormInvalidEmailMsg': 'يلزم
إدخال عنوان بريد إلكتروني صالح.',
'contactFormEmptyMessageMsg': 'لا يمكن
أن يكون حقل الرسالة فارغًا.',
'title': 'نموذج الاتصال',
'blogId': ' Put your blogger id here',
'contactFormNameMsg': 'الاسم إجباري',
'contactFormEmailMsg': 'بريد إلكتروني إجباري',
'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'},
'displayModeFull'));
</script></div>
And do
not forget to put the id of your Blogger blog and it is a number at the last
link of your Blogger home page for your blog, as the following image shows.
After placing
the blogger's ID number in the code, place the color red, put the code on the
page you created, and then click publish (see the explanation of the steps of
making a form, contact us easily in Blogger.
Explanation
of adding a contact us page to the home page of the Blogger blog
After
explaining how to create a ready-made Contact us page and adding the HTML code
for Blogger blogs, we are left with how to show the Contact us page to the
blog's home page in order for your site to be ready for submission in Google
AdSens.
ü Go to
formatting from the side menu of your Blogger blog dashboard.
ü Search
for the pages in your blogger template management tools and if you do not find
them you can click on add a tool and choose the pages from the list of blogger
plugins.
ü Click
on the pages, you will find all the pages that you created on your blog, choose
from them a contact page or a contact form or according to your name for this
page previously.
ü Click
Save to save these changes and you will see that your contact form page has
appeared on your blog's homepage.
So here
we have come to the end of our topic How to create a contact us page ready for
a Blogger blog. And if you encounter any problems in adding the contact form,
you can leave it in the comments and we will help you solve its problems, God
willing.
You can
also see this topic if you want how to add other static pages. Create a Privacy
Policy Page - Contact Us - About Us For Blogger
Do not forget to visit
our YouTube channel
حل مشكلة عدم ظهور صور ومقاطع فيديو الواتساب على الهاتف
N'oublier pas de Visiter notre Chaîne YouTube
Aucun commentaire:
Enregistrer un commentaire
لا تنسى الإشتراك في قناتنا ليصلك كل جديد
https://www.youtube.com/c/mjidabdoufm