How to create a contact us page for blogger blogspot

Many users are turning their attention to creating a website or blog to publish content created by themselves. To do this, they are using multiple platforms that allow you to do this in a very simple way. It is for this reason that we want to provide you with tools to help you create and add a contact form for a Blogger website, quickly and easily.

Contact forms are a very fundamental part of your Blogger website since through them you can receive information from your followers, collaborations, and other suggestions that will allow your site to grow. That is why learning to perform this procedure will help you a lot and through this tutorial, you will learn how to do it.

When you create and configure a contact form, you will not only receive notifications in your email when they want to contact you. If not, also when someone registers on your page, this registration will reach your email with the person's data. So you will understand the importance of creating this contact form on your blogger website.

How to create and add a web page contact form in Blogger

When you work on your own and create a web page, to show the world your skills or knowledge. It becomes even more relevant when step by step you give body and personality to your site.  We have previously taught you how to embed a YouTube video on your Blogger website or blog.

But now we want you to learn how to insert a or create and add a contact form for a web page in Blogger, step by step.  Believe it or not, it is very simple to do and then we will show you what you should do.  As a first step, we will go to the Google browser and we will make a clip in the menu.

We are going to find this in the upper right, where the icon of nine squares is located.  A small window will be displayed with options such as My account, Search, Maps, YouTube, Play, Gmail, etc. but below we will see the More option and we will make a clip to select it and then on More from Google.

This action will take us to a window with many options and here we are going to look for the Form option.  We choose it by making a clip, now we must enter with our Gmail account, after this operation we will enter the Google Form section.  Now with the cursor, we are going to go to the lower left where the plus sign is located.

Fast Step 

Go to blogger dashboard, Find Layout, click add a gadget, find contact form click plus bouton and save  

How to create a contact us page for blogger blogspot
Contact us Page for Blogger

 Second Step 

How to create a contact us page for blogger blogspot

Create a new page,

Copy the HTML code from our blog and 

Pest the code on your new page wight HTML mode.

Contact form creation HTML Code

Use this code to create a contact page


.page-contact-form input, .page-contact-form textarea {width: 100%; max-width: 100%; margin-bottom: 10px;

.page-contact-form {padding: 10px; background: # ea6337; color: #fff; border: none;

.page-contact-form hover {background: # d85b32; color: #fff; </style>

 <div class = "contact-form-widget page-contact-form"> <div class = "form"> <form name = "contact-form"> Name: <br /> <input class = "contact-form- name "id =" ContactForm1_contact-form-name "name =" name "size =" 30 "type =" text "value =" "/> E-mail: <span id =" required "> * </span> < br /> <input class = "contact-form-email" id = "ContactForm1_contact-form-email" name = "email" size = "30" type = "text" value = "" /> Message: <span id = "required"> * </span> <br /> <textarea class = "contact-form-email-message" cols = "25" id = "ContactForm1_contact-form-email-message"name = "email-message" rows = "5"> </textarea> <input class = "contact-form-button contact-form-button-submit" id = "ContactForm1_contact-form-submit" type = "button" value = "Submit" /> <br/> <div class = "contact-form-error-message" id = "ContactForm1_contact-form-error-message"> </div> <div class = "contact-form-success- message "id =" ContactForm1_contact-form-success-message "> </div> </form> </div> </div> contact-form-success-message" id = "ContactForm1_contact-form-success-message"> </div> </form> </div> </div> contact-form-success-message "id =" ContactForm1_contact-form-success-message "> </div> </form> </ div> </div>


After inserting the HTML code into your new page, dese not work properly then 

Go to HTML editor

Find the code:             ]]> </ b: skin>

Use the code before it: div # ContactForm1 display: none! Important;

Follow the Image instruction

We are going to make a clip there and it will lead us to create a new form, then a box will appear with the name Untitled Form. Here in this part, we are going to change the name to Contact Form and now we select the Untitled Question option. And we are going to put a Name in it, and then we will go to the right part to choose the type of response.

We must note that in this right part there are several answer options that you must choose, such as multiple options, paragraph, check box, etc. These will give users the response options expected of them. Also in the lower right, we will select if the answer is mandatory or not.

When they are data such as names, surnames, etc. The Mandatory option must be placed for the user to fill in this field. We can add as much data as we need, this is up to each one and the nature of the Blog. For example, we can ask for the Surname, Telephone, etc. Now when we finish creating the questions, we go to the top and select the Answers option.

 And here we are going to activate the Receive notifications option by email, for this we make a clip, and finally, we will go to the upper right and select the Send option. And we are going to incorporate HTML and copy the code. We go to our blog and in the pages option and select Contact, then Edit, delete the code that shows us and paste the new code, and finally, we make a clip-on Update.

Post a Comment