How TO — Contact Section
Learn how to create a responsive contact section for web pages.
Contact Section
Create a Contact Section
Step 1) Add HTML:
Example
Step 2) Add CSS:
Example
/* Style inputs */
input[type=text], select, textarea <
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
>
input[type=submit] <
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
>
input[type=submit]:hover <
background-color: #45a049;
>
/* Style the container/contact section */
.container <
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
>
/* Create two columns that float next to eachother */
.column <
float: left;
width: 50%;
margin-top: 6px;
padding: 20px;
>
/* Clear floats after the columns */
.row:after <
content: "";
display: table;
clear: both;
>
/* Responsive layout — when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) <
.column, input[type=submit] <
width: 100%;
margin-top: 0;
>
>
Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.
Оформление блока контактов для сайта
Также пропишем время работы офиса и склада, где закрепим к этому электронную почту, для того чтоб можно было как можно быстро связаться. Вообще все те гаджеты, где как можно быстрее можно связаться, ведь есть еще и обратная связь, но там все работает через электронную почту, где для этого как раз создается этот небольшой блок с официальной информацией.
Но и безусловно остается телефон, и здесь он может идти не один, что для всего места хватит. Но теперь нужно решить, где все это установить. Ведь если все по умолчанию оставить, то такой стиль дизайна на низ сайта просто не поместится, что просто делаем меньше знаки, а кому-то вообще нужно только телефон оставить.
Так изначально будет после установки выглядеть:
Можно самостоятельно все перестроить, как пример здесь идет так:
Приступаем к установке:
Здесь присутствуют шрифтовые иконки, если кто не подключил, то в CSS в самый вверх прописываем стиль под них, это для того, чтоб все знаки выводило.
<div >
<h3 style=»text-align:center;»>Контакты</h3>
<div > <i ></i>
</div>
<div >
<h4 >Юридический адрес:</h4>
<div >
3486452, г. Тюмень, ул. Ленина,
<br>дом 14, литер D, Кабинет # 31</div>
</div>
<div > <i ></i>
</div>
<div >
<h4 >График работы складов и офисов компании:</h4>
<div >
пн.-сб. с 10:00 до 21:00, с перерывом на обед
<br>Без выходных</div>
</div>
.nesolestag-enadenud <
width: 615px;
margin: 0 auto;
>
.kesednsoled:after,
.kesednsoled:before <
content: «.»;
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
clear: both;
>
.ico-wrap <
color: #a612d4;
width: 48px;
height: 48px;
margin: 30px 18px 5px 5px;
display: block;
text-align: center;
font-size: 25px;
border: 2px solid #9d1cb7;
float: left;
border-radius: 30px;
>
.ico-contact <
line-height: 1.9 !important;
>
.meanous-andscoev <
float: left;
margin-bottom: 20px;
>
.aio-icon-title <
font-size: 16px;
color: #950c96;
line-height: 1;
margin-bottom: 8px;
>
@media (max-width: 767px) <
.meanous-andscoev,
.ico-wrap <
float: none;
text-align: center;
>
.ico-wrap <
margin: 0 auto 15px auto;
>
>
Но как видно изначально все выстраивается под определенную страницу, где безусловно по своему размеру отлично подойдет. Где также можно что-то от себя добавить, это как можно быстрей проехать, вообще-то, что посчитаете нужным, что должно рядом быть с контактами.
Но и не забываем про само оформление, ведь здесь представлено все по стандарту, возможно кто-то захочет добавить элементов, чтоб все выглядело намного оригинальнее, как изначально представлено. На счет адаптивности, то здесь прописаны media, где все заданно под мобильные аппараты.
Contact Us Page in HTML & CSS with Cool Animations
Hello readers, Today in this blog you’ll learn how to create a contact us page using HTML & CSS. Earlier, you learned to Create a responsive navigation bar using HTML & CSS. I have also created a blog on other cool stuff about web designing.
The contact us page is a web page containing all the contact information regarding the organization or company to whom the particular website belongs to. It is one of the very essential pages for every website.
What Contact Us page includes?
- Social media links and contact number/email.
- Contact Form.
- Company Address (either on google Maps or in text format).
3 Tips to make Contact Us page better
- Make user-friendly neat and simple designs.
- Add some animations.
- Do not make the google map’s width 100%.
Today I will show you how you can create your own contact us page using HTML & CSS with awesome animation. On this page, I haven’t used any plugin or library to animate it. It is animated with pure CSS. I have created a ‘main’ div at first and then a ‘container’ div inside the ‘main’ div. All the information/contents are inside the ‘container’ div. Inside the container, I have used other two divs, one for images and another for contact forms and social media links.
As you can see in the above image, the ‘container’ div has a box shadow which makes its design look much better. The whole page is completely responsive i.e. it can be used on each and every device with different screen widths. I have also added the entrance animation on the page load with pure CSS. When you reload the page the container will slide down from the top to its exact position and the contact form will slide left from right to its exact position.
I have given the official color of each social media icon. The round-shaped blue background at the top left of the screen is created with the “before” pseudo-element and the arrow typed shape at the background of the image is created with a CSS clip-path. If you are going to use the pseudo-element without writing any content be sure that you have included the “position” property in both parent and child div.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Contact Us page in HTML & CSS).
You Might Also Like
- Custom Neon Light Preloader using HTML, CSS & Javascript
- User Registration Form in PHP & MYSQL
- Responsive Nav-Bar using HTML & CSS
- Awesome Card with HTML & CSS
Video Tutorial of Contact Us page in HTML & CSS
All this page design and animation are based on CSS. If you’re a beginner you can also create this type of contact us page. If you like this program ( Contact Us page in HTML & CSS ) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.
Contact Us page in HTML & CSS [Source Codes]
To create this program ( Contact Us page in HTML & CSS ). First, you need to create two files one HTML File and another one is CSS File. After creating these files just paste the following code into your file. Remember, you have to download the image yourself. I have used the SVG image but you can use images of other formats too. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Note it, you’ve to create a file with a .html extension.
Note: In the <textarea></textarea> tag, i have added some unnecessary text. So, remove that after pasting the code.
Second, create a CSS file with the name style.css and paste the given code into your CSS file. Note it, you’ve to create a file with a .css extension.
That’s all, now you’ve successfully created a contact us page using HTML & CSS. If your code does not work or you’ve faced any errors/problems then please comment down. If you feel this article had helped you, please share it with your friends.
How To Create Responsive Contact Us Page In HTML
Learn How To Create Contact Us Page Using HTML And CSS. Learn How To Make Contact Form Using HTML, CSS. Easy Way To Learn HTML For Beginner.
I Will Create Contact Us Page Just Using HTML And CSS. We Create Contact US Page With One Social Bar, Second A Contact Us Form Where People Fill There Information And Send Us Message And Third Is The Google Map Section where the Location and Route Of The Website Company Showing, Here People Easy Find The Website Company Location. You Will Create This Awesome Contact Us Page By Following This Steps Which I Given Below.
How To Make Contact Us Page In HTML and CSS
- 0.0 — 1.0 min : Intro
- 1.0 — 18.0 min: How To Create Contact Us Page
In This Tutorial, I Will Show How To Create Contact Us Page Form Just Using HTML And CSS. In This Video tutorial, First 60s, I Will Show You What Type Of Contact Form Design I Will Create In This Tutorial. After I Will Make HTML And CSS Files And Put This Files In Our Project Folder. I Make Separate CSS Folder For CSS File And Than I Will Link CSS File With HTML File Using Link Tag. After Linking Files, I Make Contact Us Page Structure Using HTML And This Contact Us Form Using CSS Style Sheet. After Designing I Make This Contact Form Page Responsive For All Devices (Tab, Mobile, Laptop, And PC) By Using Media Query. If You Face Any Problem Contact Me. Hope You Like This Tutorial.
Follow These Steps:-
1) Open Any Text Editor Like Notpade++.
2) Create HTML And CSS File, Put In Your Project Folder. I recommended You, You Will Create Separate CSS Folder For CSS File.
3) Link The CSS File With Contact Page HTML File Using «Link» Tag.
4) Copy Contact Us Page HTML Code Which I Given Below.
5) Copy Contact Us Page CSS Code Which I Given Below.
CSS
6) After Doing All Steps Open HTML File And Enjoy This Contact Us Page Design. If You Have Any Problem Check My Youtube Tutorial Which I Given Below.