Top 14 'Contact Us' Page Designs For Websites - Html, CSS, And JavaScript

Sept 27, 2022

Contact pages are an essential part of every website. It is the primary or more often than not, the only point of contact between the visitors and the business. Therefore, it is crucial to meticulously plan out every part of the contact page for the website. 

A well-designed contact page provides an intuitive and convenient way of acquiring leads. The contact page should contain all the relevant details like address, location, phone number, and an easy-to-fill contact form. The contact form should have all the necessary input boxes required to connect with the prospect. The form should be simple and easy to fill with a distinct and clear call-to-action button.

Latest Contact Form Page Designs With Code 

A contact page should be minimalistic barring all the distractive elements that might lead the visitors away. Keeping that in mind, we have curated a list of the best Workik contact us forms that are bound to make your page stand out. Some of these designs include additional features such as maps and color gradients. 

Check out the contact form designs and integrate the widget that works best for your website with our HTML, CSS, and JavaScript code. You can also use these widgets with hundreds of other ready-to-use sections to publish a website with Workik right away.

1. Simple Contact Form

Contact designs for websites: Simple Contact Form Desktop
Contact designs for websites: Simple Contact Form Tablet
Contact designs for websites: Simple Contact Form Mobile

This simple widget consists of a solid form with an absolute blue background. Its minimalist design enables it to be incorporated into any website with ease. This form is completely responsive and also contains links to social media pages. The submit button has a background hover effect.

2. Trendy Contact Form

Contact designs for websites: Trendy Contact Form Desktop
Contact designs for websites: Trendy Contact Form Tablet
Contact designs for websites: Trendy Contact Form Mobile

The above contact form is a clean and visually appealing form based entirely on the HTML5 and CSS3 framework. All input fields have a flex display and wrap around each other as the screen size is reduced. The design also includes span elements for a dual-tone title and background hover effects.

3. Responsive Contact Form

Contact designs for websites: Responsive Contact Form Desktop
Contact designs for websites: Responsive Contact Form Tablet
Contact designs for websites: Responsive Contact Form Mobile

This widget has two parts: the contact form and additional company information. The layout is completely responsive and provides the best experience across different devices and screen sizes. This widget also allows you to showcase your exact location on a map and contains social media links.

4. Contact Form With Image

Contact designs for websites: Contact Form With Image Desktop
Contact designs for websites: Contact Form With Image Tablet
Contact designs for websites: Contact Form With Image Mobile

This contact form catches everyone’s attention with the image section that it sports on the right edge. The image can be changed based on preference and is a great detail that appeals to users. The form features just a field to type for email address keeping it very easy and short for users.

5. Contact Page With World Map

Contact designs for websites: Contact Page With World Map Desktop
Contact designs for websites: Contact Page With World Map Tablet
Contact designs for websites: Contact Page With World Map Mobile

If you have multiple branches at various locations, a contact page with a map will help users get details of the one they are interested in. Contact details are provided in a thin strip at the bottom of the page. Social media links are also included, giving the user more insights.

6. Classic Contact Form

Contact designs for websites: Classic Contact Form Desktop
Contact designs for websites: Classic Contact Form Tablet
Contact designs for websites: Classic Contact Form Mobile

This design includes a simple-looking, modern contact form. Individual form fields are not marked by a definite boundary; instead, bottom borders alone are employed. The layout is based entirely on the HTML5 and CSS3 framework and is flexible and easy to customize.

7. Elegant Contact Form

Contact designs for websites: Elegant Contact Form Desktop
Contact designs for websites: Elegant Contact Form Tablet
Contact designs for websites: Elegant Contact Form Mobile

The above contact form is simple and practically applicable on any webpage. Fonts are of normal, readable size by default and can be changed based on design requirements. This design has been created using the latest HTML5 and CSS3 script and supports all modern fonts and styles.

8. Clean Contact Page

Contact designs for websites: Clean Contact Page Desktop
Contact designs for websites: Clean Contact Page Tablet
Contact designs for websites: Clean Contact Page Mobile

This design incorporates a split-screen layout, providing ample space for the contact form. The form includes conventional input fields and a submit button along with social media links. The other section of the split-screen can be utilized to provide a short bio of the company.

9. Split-Screen Contact Form

Contact designs for websites: Split-Screen Contact Form Desktop
Contact designs for websites: Split-Screen Contact Form Tablet
Contact designs for websites: Split-Screen Contact Form Mobile

If you are on the lookout for split-screen contact forms, this design is sure to impress you. Each form field is given enough space, enabling the user to interact easily with the form. The remaining space is set aside to add brand or service-related images and can be easily modified as per user requirements.

10. Responsive HTML5 Contact Form

Contact designs for websites: Responsive HTML5 Contact Form Desktop
Contact designs for websites: Responsive HTML5 Contact Form Tablet
Contact designs for websites: Responsive HTML5 Contact Form Mobile

The above contact form is simple and visually appealing. The design provides ample space to showcase company contact information in addition to the input form. The rounded web elements, combined with the neat layout, make this design unique and minimalistic

11. Responsive CSS3 Contact Form

Contact designs for websites: Responsive CSS3 Contact Form Desktop
Contact designs for websites: Responsive CSS3 Contact Form Tablet
Contact designs for websites: Responsive CSS3 Contact Form Mobile

The design is completely responsive, stacking the sections one above the other on smaller screens. It would work well to maintain the theme of the website. The call-to-action is highlighted with proper styles.

12. Contact Page With Background Image

Contact designs for websites: Contact Page With Background Image Desktop
Contact designs for websites: Contact Page With Background Image Tablet
Contact designs for websites: Contact Page With Background Image Mobile

This sophisticated and colorful design is based completely on HTML5 and CSS3. The rectangular form provides an ample amount of space for adding the form fields. The background image fits the entire page and can be changed according to user requirements.

13. Contact Form With Partial Overlay Design

Contact designs for websites: Contact Form With Partial Overlay Design Desktop
Contact designs for websites: Contact Form With Partial Overlay Design Tablet
Contact designs for websites: Contact Form With Partial Overlay Design Mobile

This design is ideal for a mix of simple yet creative style. Company information is displayed in a separate section with a translucent blue background that overlaps with the contact form. The form element contains rounded fields and a checkbox to agree to the company’s terms and conditions.

14. Contact Form Partial Overlay With Maps

Contact designs for websites: Contact Form Partial Overlay With Maps Desktop
Contact designs for websites: Contact Form Partial Overlay With Maps Tablet
Contact designs for websites: Contact Form Partial Overlay With Maps Mobile

The above design is the best choice to distinguish yourself with a slightly modified look. The better part of the layout is dedicated to showcasing the exact location of the company and the other is a simple contact form. This functional contact page provides a smooth experience to users who wish to get in touch with you.

Stay updated with web trends.?

Subscribe to our latest blogs

Send

We would love to hear from you!

Send Message