Tagged: simple contact form

October 6, 2019

How to Design a Simple Contact Form by HTML/CSS

In this tutorial you will learn how to design a very simple contact form by HTML/CSS. This is really very simple design. If you are expert please ignore it. In the next tutorial I...

img.wp-smiley,img.emoji{display:inline !important;border:none !important;box-shadow:none !important;height:1em !important;width:1em !important;margin:0 .07em !important;vertical-align:-.1em !important;background:none !important;padding:0 !important;}body{font-family:Arial,sans-serif;font-size:1rem;}@media only screen and (min-width: 720px){.nav > li{font-size:1rem;}}::selection{background-color:#1a73e8;}::-moz-selection{background-color:#1a73e8;}a,a>span.hu-external::after,.themeform label .required,#flexslider-featured .flex-direction-nav .flex-next:hover,#flexslider-featured .flex-direction-nav .flex-prev:hover,.post-hover:hover .post-title a,.post-title a:hover,.sidebar.s1 .post-nav li a:hover i,.content .post-nav li a:hover i,.post-related a:hover,.sidebar.s1 .widget_rss ul li a,#footer .widget_rss ul li a,.sidebar.s1 .widget_calendar a,#footer .widget_calendar a,.sidebar.s1 .alx-tab .tab-item-category a,.sidebar.s1 .alx-posts .post-item-category a,.sidebar.s1 .alx-tab li:hover .tab-item-title a,.sidebar.s1 .alx-tab li:hover .tab-item-comment a,.sidebar.s1 .alx-posts li:hover .post-item-title a,#footer .alx-tab .tab-item-category a,#footer .alx-posts .post-item-category a,#footer .alx-tab li:hover .tab-item-title a,#footer .alx-tab li:hover .tab-item-comment a,#footer .alx-posts li:hover .post-item-title a,.comment-tabs li.active a,.comment-awaiting-moderation,.child-menu a:hover,.child-menu .current_page_item > a,.wp-pagenavi a{color:#1a73e8;}input[type="submit"],.themeform button[type="submit"],.sidebar.s1 .sidebar-top,.sidebar.s1 .sidebar-toggle,#flexslider-featured .flex-control-nav li a.flex-active,.post-tags a:hover,.sidebar.s1 .widget_calendar caption,#footer .widget_calendar caption,.author-bio .bio-avatar:after,.commentlist li.bypostauthor > .comment-body:after,.commentlist li.comment-author-admin > .comment-body:after{background-color:#1a73e8;}.post-format .format-container{border-color:#1a73e8;}.sidebar.s1 .alx-tabs-nav li.active a,#footer .alx-tabs-nav li.active a,.comment-tabs li.active a,.wp-pagenavi a:hover,.wp-pagenavi a:active,.wp-pagenavi span.current{border-bottom-color:#1a73e8 !important;}.sidebar.s2 .post-nav li a:hover i,.sidebar.s2 .widget_rss ul li a,.sidebar.s2 .widget_calendar a,.sidebar.s2 .alx-tab .tab-item-category a,.sidebar.s2 .alx-posts .post-item-category a,.sidebar.s2 .alx-tab li:hover .tab-item-title a,.sidebar.s2 .alx-tab li:hover .tab-item-comment a,.sidebar.s2 .alx-posts li:hover .post-item-title a{color:#dd5044;}.sidebar.s2 .sidebar-top,.sidebar.s2 .sidebar-toggle,.post-comments,.jp-play-bar,.jp-volume-bar-value,.sidebar.s2 .widget_calendar caption{background-color:#dd5044;}.sidebar.s2 .alx-tabs-nav li.active a{border-bottom-color:#dd5044;}.post-comments::before{border-right-color:#dd5044;}.search-expand,#nav-topbar.nav-container{background-color:#1a73e8;}@media only screen and (min-width: 720px){#nav-topbar .nav ul{background-color:#1a73e8;}}.is-scrolled #header .nav-container.desktop-sticky,.is-scrolled #header .search-expand{background-color:#1a73e8;background-color:rgba(26,115,232,.9);}.is-scrolled .topbar-transparent #nav-topbar.desktop-sticky .nav ul{background-color:#1a73e8;background-color:rgba(26,115,232,.95);}#header{background-color:#fff;}@media only screen and (min-width: 720px){#nav-header .nav ul{background-color:#fff;}}#header #nav-mobile{background-color:#1a73e8;}.is-scrolled #header #nav-mobile{background-color:#1a73e8;background-color:rgba(26,115,232,.9);}#footer-bottom{background-color:#222;}body{background-color:#f3f6fb;}::-webkit-scrollbar{width:10px;}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px grey;border-radius:20px;}::-webkit-scrollbar-thumb{background:lightgray;border-radius:20px;box-shadow:0px 2px 5px 1px #000 inset;}.main-inner{background-image:none !important;background-color:#f3f6fb !important;}.main-inner.nitro-lazy{background-image:none !important;}.content{background-color:#fff;}.site-title a{color:inherit;}.site-description{color:inherit;}.sidebar .sidebar-content,.sidebar .sidebar-toggle{background-color:transparent;}.page-title{background-color:#f3f6fb;border:1px solid #eee;}#nav-topbar .nav li a{font-weight:500;letter-spacing:1px;color:#fff;}#nav-topbar .nav li.current-menu-item>a{font-weight:700;background-color:#fff;color:#1a73e8;}#header .pad,#footer-bottom .pad{padding-left:0;padding-right:0;}.widget>h3{font-size:18px;}.widget,.widget a{font-size:16px;}.entry dd,.entry p{line-height:35px;text-align:justify;}.single-blog-step-title{color:#1a73e8;font-weight:bold !important;}.single-blog-btn a{background-color:#1a73e8;color:#fff;font-weight:bold;letter-spacing:1px;border-radius:3px !important;transition:1s;}.single-blog-btn a:hover{background-color:#0b3b7b;}.wpcf7-form-control-wrap input,.wpcf7-form-control-wrap textarea{border:1px solid lightgray !important;padding:12px !important;width:100%;box-sizing:border-box;font-size:18px;}.wpcf7-form-control-wrap input:focus,.wpcf7-form-control-wrap textarea:focus{box-shadow:0 5px 20px rgba(0,0,0,.15) !important;background-color:#fff !important;border:1px solid lightgray !important;outline:none !important;}.wpcf7-validation-errors{color:red;}.wpcf7-mail-sent-ok{color:green;}@media (max-width: 575px){.entry dd,.entry p{line-height:30px;font-size:16px;text-align:left;}}

Tagged: simple contact form

How to Design a Simple Contact Form by HTML/CSS

Recent Posts

Categories