8/22/2021

Html Sample Code Free Download

53

Contact pages are an essential part of almost any website. The relationship with your clients/customers, receiving feedback, customer support and other forms of online communication can be facilitated by a well-coded contact form.

Of course, it is possible to simply mention your email address on your contact page, but this may be an inconvenient sometimes, as scrapers can easily gather your email address and you will soon be flooded with spam emails. An HTML & CSS contact form protects you from this, thus preventing a significant number of spam emails from reaching your inbox.

There are many tools you can use in order to add a sleek custom form on your contact page. For WordPress, there are WordPress plugins you can use, and other CMS systems may offer similar tools, however, if you have some coding knowledge, you can easily use one of these free HTML & CSS contact form templates.

Collection of free HTML and CSS form code examples: interactive, step by step, simple, validation, etc. Update of April 2019 collection. Responsive Wedding is a free, feature-rich HTML5 responsive template that uses jQuery Waypoints and ScrollTo for a fluent single-page layout. Uisual – Minimal Landing Page Templates for Startups (Free) A fantastic collection of six minimally designed and free HTML & CSS landing page templates for startups. HTML Templates Free Download. CSS, HTML5, Basic, Simple. Get Them All Now!

These uniquely designed custom form templates will make your contact page stand out! Some of them even have additional features, such as maps! Check out the free HTML & CSS contact form templates below and choose your favorite!

Contact Form 1

Contact Form 1 is a modern and interactive contact form template with mail icons that move along with your cursor and other cool visual effects. This type of contact form is perfect for interactive websites. It also has field validation and it’s completely responsive.

Contact Form 2

Contact Form 2 has some lovely colorful accents. This is a full-width form template with subtle animation effects. The button is in a colorful gradient that changes once you hover it and can be easily modified by you to fit your website’s color palette.

Contact Form 3

Contact Form 3 is another cool contact form template that’s extremely versatile. It has an interesting new feature added, a dual option for your message, so the user can either use it as a contact form or as an inquiry form. It also comes with a photo background and a bright green color. These can be easily customized.

Contact Form 4

This contact form is similar to the one presented above, but unlike that one, it has a neon-colored gradient in the background and a simple, white color for the main elements of the form. This well-coded contact form supports field validation and is easy to integrate into any platform you use.

Colorlib Contact Form

Colorlib Contact form is a simple, yet effective contact form template with indicators for the field labels, field validation and a minimalist design.

Contact Form 5

Contact form 5 has a nice structure for a contact form and it’s a good fit for blogs or magazine websites. It’s black and white, simple and clean. The fonts used are bold and the overall design is responsive and easy to use even on small screens.

Contact Form 6

Contact Form 6 is a unique contact form design with a creative layout. The background isn’t static, but instead, it is an interactive map powered by Google Maps. The shadow effects are also interesting. Check it out in action!

Contact Form 7

Contact form 7 has a more corporate style, with a minimalist design and a straight-forward layout. It offers the option of sending the user a copy of the message, by ticking the box at the bottom of the form. This form can even be integrated with an email marketing tool or a CRM system for immediate response.

Contact Form 8

Contact Form 8 is similar to the map form above, but has a cleaner, lighter design. The map in the background is also interactive and powered by Google Maps and the form remains open. There is also the option to send the message as a copy, like in the form above.

Download website html code

Contact Form 9

Contact Form 9 another colorful form, a combination between two of the contact forms mentioned above. The background is an interactive Google Map, but it’s covered by a beautiful neon gradient. The message form is simple, with just three fields, and with subtle shadow effects.

Contact Form 10

Contact Form 10 is a simple and modern contact form template that you can install on your website for free. This flexible HTML & CSS contact form is easy to customize, so you can add new fields if you need to.

Contact Form 11

Contact Form 11 has a bold design with bright colors and beautiful vector illustrations. The background is purple, but the colors can be easily changed with some CSS tweaking. The texts can be seen clearly even from mobile devices.

Responsive Contact Form with Map

Lentie Ward is the designer behind this unique contact form template. This form was made with Haml and SCSS technologies and also some JavaScript. The result is a sophisticated form template with a cool map in the background. If you want to offer your visitors a spectacular experience on the contact page, make sure you use this form.

Contact Form Bootstrap 3

This contact form was created with the help of Bootstrap by designer Shuvo Habib. It’s clean, simple, and full-width. It has all the basic info you would need from the users.

Responsive Contact Form

Mac 1432 chainsaw owners manual. This responsive contact form template was designed by Lisa Wagner. It is mobile-optimized, has a dark layout and perfect for support sections on your website. The colors can be easily modified with some CSS tweaks.

CSS3 Contact Form

This CSS3 contact form was created by Hong Liu and it is entirely responsive. It also has a great colorful border, which gives it a retro vibe. It’s perfect for any website with a light color palette.

HTML5 Contact Form

Here’s another HTML5 full-width contact form . The design has an interesting approach for each field’s labels. The colors may be too bright, but this can be easily changed with some CSS modifications.

Minimalistic Form

As the name states, this is a minimalist form, with a clean, ultra-simple design. This form design was created by Matheus Marsiglio and contains only three basic fields – for email, name and message.

Pen a Day Contact Form

Pen a Day contact form is a lightweight design perfect for feedback forms on websites. The layout is clean and basic and has every field needed for a suggestion box.

Appointment Contact Form

Do you need an appointment contact form? This template is for you! Created by Andrew Wright, this modern CSS3 and HTML5 contact form gives you the possibility to easily manage appointments and book clients for your business! There’s even a feature that lets users specify the best time for reaching out.

Quick Minimal Contact Form

This quick and easy to use minimal contact form was created by Erin Masson. It has an interactive design for filling in the contact details. It can be easily adapted to any website’s color palette.

Pleasing Contact Form

Just as its name states, this contact form template has a pleasing design. Developed by Grandvincent Marion, this well-crafted contact form lets you collect a lot of info about your potential customers/clients through detailed fields arranged in a boxed layout.

Contact Form by Colorlib

This pretty free contact form template is paired with a large image on the left side of the page. It has the basic fields for a contact form and a simple design. Plus, at the bottom of the form are some neatly-arranged social media icons.

Elegant Contact Form

This elegant contact form created by Mark Murray, uses the Compass framework. This modern design can be easily adapted to any CMS your website is using. Give it a try!

Clean Contact Form

This clean contact form template was designed by Nick Haskell and also uses the Compass framework. Unlike other free contact forms from this list, this template uses a background image at the top of the form. Its design is visually appealing and professional.

You may also like:

HTML provides the structure of websites. Here are some examples of how to use HTML syntax to build websites, including some examples of newer HTML5 features.

The A Href Attribute Example

The <a href> attribute refers to a destination provided by a link. The a (anchor) tag is dead without the <href> attribute. Sometimes in your workflow, you don’t want a live link or you won’t know the link destination yet. In this case, it’s useful to set the href attribute to '#' to create a dead link. The hrefattribute can be used to link to local files or files on the internet.

For instance:

The <a href> attribute is supported by all browsers.

More attributes:

hreflang : Specifies the language of the linked resource. target : Specifies the context in which the linked resource will open. title : Defines the title of a link, which appears to the user as a tooltip.

Examples

In-page anchors

It’s also possible to set an anchor to certain place of the page. To do this you should first place a tab at location on the page with tag and necessary attribute “name” with any keyword description in it, like this:

Html Sample Code Free Download Pdf

Image Links

The <a href='#'> may also be applied to images and other HTML elements.

Example

Example

Some more examples of href

The A Target Example

The <a target> attribute specifies where to open the linked document in an a (anchor) tag.

Examples:

A target attribute with the value of “_blank” opens the linked document in a new window or tab.

A target attribute with the value of “_self” opens the linked document in the same frame as it was clicked (this is the default and usually does not need to be specified).

A target attribute with the value of “_parent” opens the linked document in the parent frame.

A target attribute with the value of “_top” opens the linked document in the full body of the window.

A target attribute with the value of “framename” Opens the linked document in a specified named frame.

The Body Background Attribute Example

If you want to add a background image instead of a color, one solution is the <body background> attribute. It specifies a background image for an HTML document.

Syntax:

<body background='URL'>

Attribute:

background - URL for background image

Example:

body-background attribute is depreciated

the body-background attribute been deprecated in HTML5. The correct way to style the <body> tag is with CSS.

There are several CSS properties used for setting the background of an element. These can be used on to set the background of an entire page.

The Body Bgcolor Attribute Example

The <body bgcolor> attribute assigns a background color for an HTML document.

Syntax:

<body bgcolor='color'> The color value can be either a color name (like, purple) or a hex value (like, #af0000).

To add a background color to a webpage you can use the <body bgcolor='######'> attribute. It specifies a color for the HTML document to display.

For example:

You can change the color by replacing ###### with a hexadecimal value. For simple colors you can also use the word, such as “red” or “black”.

All major browsers support the <body bgcolor> attribute.

Note:

  • HTML 5 does not support the <body bgcolor> attribute. Use CSS for this purpose. How? By using the following code: <body> Of course, you can also do it in a separate document instead of an inline method.
  • Do not use RGB value in <body bgcolor> attribute because rgb() is for CSS only, that is, it will not work in HTML.

The Div Align Attribute Example

The <div align='> attribute is used for aligning the text in a div tag to The Left, Right, center or justify.

For instance:

Important!

This attribute is no longer supported in html5. css is the way to go.

The Div Align attribute can be used to horizontally align the contents within a div. In the below example, the text will be centered within the div.

**This attribute is not supported in HTML5 and CSS Text Align should be used instead

The Font Color Attribute Example

This attribute is used to set a color to the text enclosed in a <font> tag.

Important:

This attribute is not supported in HTML5. Instead, this freeCodeCamp article specifies a CSS method, which can be used.

Note:

A color can also be specified using a 'hex code' or an 'rgb code', instead of using a name.

Example:

  1. Color name attribute

Hex code attribute

RGB attribute

The Font Size Attribute Example

This attribute specifies the font size as either a numeric or relative value. Numeric values range from 1 to 7with 1 being the smallest and 3 the default. It can also be defined using a relative value, like +2 or -3, which set it relative to the value of the size attribute of the <basefont> element, or relative to 3, the default value, if none does exist.

Syntax:

<font size='number'>

Example:

Note : The size attribute of <font> is not supported in HTML5. Use CSS instead.

The Img Align Attribute Example

The align attribute of an image specifies where the image should be aligned according to the surrounding element.

Attribute Values:
right - Align image to the right left - Align image to the left
top - Align image to the top
bottom - Align image to the bottom
middle - Align image to the middle

For example:

We can also align in right if we want:

Please note the align attribute is not supported in HTML5, and you should use CSS instead. However, it is still supported by all the major browsers.

The Img Width Attribute

The HTML ‘width’ attribute refers to the width of an image. The value in the quotations is the amount of pixels.

For example, if you already have a link to an image set up via the src attribute you can add the width attribute like so:

In the code snippet above there is an image tag and the image is set to a width of 100 pixels. width='100'

The Img Src Attribute Example

The <img src> attribute refers to the source of the image you want to display. The img tag will not display an image without the src attribute. However, if you set the source to the location of the image, you can display any image.

There is an image of the freeCodeCamp Logo located at https://avatars0.githubusercontent.com/u/9892522?v=4&s=400

You can set that as the image using the src attribute.

The above code displays like this:

The src attribute is supported by all browsers.

You can also have a locally hosted file as your image.

For example, <img src='images/freeCodeCamp.jpeg> would work if you had a folder called imageswhich had the freeCodeCamp.jpeg inside, as long as the ‘images’ folder was in the same location as the index.html file.

./files/index.html

.files/images/freeCodeCamp.jpeg

Overview

What are HTML Entities?

HTML entities are characters that are used to replace reserved characters in HTML or for characters that do not appear on your keyboard. Some characters are reserved in HTML. If you use the less than(<) or greater than(>) signs in your text, the browser might mix them up with tags.

What are they used for?

As mentioned about HTML entities are used in order to replace reserved characters that are reserved by HTML.

How do you use them?

A character entity looks similar to this:

Or

Reference Guide

This is by no means an exhaustive list but the links below will be able to give you more entities if the ones below do not work for your needs. Happy Coding :bowtie:

HTML Form Example

Basically, forms are used to collect data entered by a user, which are then sent to the server for further processing. They can be used for different kinds of user inputs, such as name, email etc.

Form contains control elements which are wrapped around <form></form> tags, like input, which can have types like:

  • text
  • email
  • password
  • checkbox
  • radio
  • submit
  • range
  • search
  • date
  • time
  • week
  • color
  • datalist

Code example:

Other elements that form can contain:

  • textarea - is a multiline box which is most often used for adding some text eg. comment. Size of textarea is defined by number of rows and columns.
  • select - together with <option></option> tag creates drop-down select menu.
  • button - The button element can be used to define a clickable button.

MORE INFORMATION ON HTML FORMS.

HTML Forms are required when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax −

If the form method is not defined then it will default to “GET”.

The form tag can also have an attribute named “target” which specifies where the link will open. It can open in the browser tab, a frame, or in the current window.

The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page at the Script URL when the user clicks on the submit button. If the action attribute is omitted, the action is set to the current page.

HTML5 Audio Example

Before HTML5, audio files had to be played in a browser using a plug-in like Adobe Flash. The HTML

The following code snippet adds an audio file with the filename tutorial.ogg or tutorial.mp3. Theelement indicates alternative audio files which the browser may choose from. The browser will utilize the first recognized format.

Example 1

Example 2

The controls attribute includes audio controls like play, pause, and volume. If you don’t use this attribute, then no controls will be shown.

The <source> element enables you to indicate alternative audio files which the browser may choose from. The browser will utilize the first recognize format. The text between the <audio> and </audio> tags may be shown in browser that does not support the HTML5 <audio> element.

The autoplay attribute will automatically play your audio file in the background. It is considered better practice to let visitors choose to play audio.

The preload attribute indicates what the browser should do if the player is not set to autoplay.

The loop attribute will play your audio file in a continous loop if mentioned

Since this is html5, some browser do not support it. You can check it at https://caniuse.com/#search=audio

HTML5 Semantic Elements Example

Semantic HTML elements clearly describe it’s meaning in a human and machine readable way. Elements such as <header>, <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

A Quick History

HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, it’s needs changed. Where the internet was originally inteded for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer. Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the <table></table> to describe information using a table, programmers would use them to position other elements on a page. As the use of visually designed layouts progressed, programmers started to use a generic “non-semantic” tag like <div>. They would often give these elements a class or id attribute to describe their purpose. For example, instead of <header> this was often written as <div>. As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.

List of new semantic elements

The semantic elements added in HTML5 are:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> act more or less like <div> elements. They group other elements together into page sections. However where a <div> tag could contain any type of information, it is easy to identify what sort of information would go in a semantic <header> region.

An example of semantic element layout by w3schools

Benefits of semantic elements

To look at the benefits of semantic elements, here are two pieces of HTML code. This first block of code uses semantic elements:

Whilst this second block of code uses non-semantic elements:

First, it is much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements. This is a small example, but as a programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.

It has greater accessibility. You are not the only one that finds semantic elements easier to understand. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.

Overall, semantic elements also lead to more consistent code. When creating a header using non-semantic elements, different programmers might write this as <div>, <div>, <div>, or simply <div>. There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer. By creating a standard semantic element, it makes it easier for everyone.

Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic” elements. To this day, some of us might still be confused as to why so many different elements that doesn’t seem to show any major changes.

<section> and <article>

“What’s the difference?”, you may ask. Both these elements are used for sectioning a content, and yes, they can definitely be used interchangeably. It’s a matter of in which situation. HTML4 offered only one type of container element, which is <div>. While this is still used in HTML5, HTML5 provided us with <section>and <article> in a way to replace <div>.

The <section> and <article> elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:

  1. An article is intended to be independently distributable or reusable.
  2. A section is a thematic grouping of content.

<header> and <hgroup>

The <header> element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.

The <hgroup> element should be used where you want a main heading with one or more subheadings.

REMEMBER, that the <header> element can contain any content, but the <hgroup> element can only contain other headers, that is <h1> to <h6> and including <hgroup>.

<aside>

The <aside> element is intended for content that is not part of the flow of the text in which it appears, however still related in some way. This of <aside> as a sidebar to your main content.

Before HTML5, our menus were created with <ul>’s and <li>’s. Now, together with these, we can separate our menu items with a <nav>, for navigation between your pages. You can have any number of <nav> elements on a page, for example, its common to have global navigation across the top (in the <header>) and local navigation in a sidebar (in an <aside> element).

If there is a <header> there must be a <footer>. A <footer> is generally found at the bottom of a document, a section, or an article. Just like the <header> the content is generally metainformation, such as author details, legal information, and/or links to related information. It is also valid to include <section>elements within a footer.

<small>

The <small> element often appears within a <footer> or <aside> element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.

<time>

The <time> element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.

Why bother with <time>? While humans can read time that can disambiguate through context in the normal way, the computers can read the ISO 8601 date and see the date, time, and the time zone.

<figure> and <figcaption>

<figure> is for wrapping your image content around it, and <figcaption> is to caption your image.

HTML5 Video Example

Before HTML5, in order to have a video play in a webpage you would need to use a plugin, like Adobe Flash Player. With the introduction of HTML5, you can now place it directly into the page itself. The HTML

To embed video file into web page, just add this code snippet and change the src of audio file.

The controls attribute includes video controls, similar to play, pause, and volume.

This feature is supported by all modern/updated browsers. However, not all support the same video file format. My recommendation for a wide range of compatibilty is MP4, as it is the most widely accepted format. There are also two other formats (WebM and Ogg) that are supported in Chrome, Firefox, and Opera.

The element enables you to indicate alternative video files which the browser may choose from. The browser will utilize the first recognize format. In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.

The text between the tags will only be displayed in browsers that do not support the

There are several different elements of the video tag, many of these explanations are based on Mozilla’s web docs (linked below). There are even more if you click the link at the bottom.

autoplay

“autoplay” can be set to either true or false. You set it to true by adding it into the tag, if it is not present in the tag it is set to false. If set to true, the video will begin playing as soon as enough of the video has buffered for it to be able to play. Many people find autoplaying videos as disruptive or annoying so use this feature sparingly. Also note, that some mobile browsers, such as Safari for iOS, ignore this attribute.

poster

The “poster” attribute is the image that shows on the video until the user clicks to play it.

controls

The “controls” attribute can be set to true or false and will handle whether controls such as the play/pause button or volume slider appear. You set it to true by adding it into the tag, if it is not present in the tag it is set to false.

There are many more attributes that can be added that are optional to customize the videoplayer in the page. To learn more, click on the links below.

HTML5 Web Storage Example

Web storage allows web applications to store up to 5MB of information in browser storage per origin (per domain and protocol).

Types of Web Storage

There are two objects for storing data on the client:

window.localStorage: stores data with no expiration date and lives until removed.

window.sessionStorage: stores data for one session, where data is lost when the browser / browser tab is closed.

Since the current implementation only supports string-to-string mappings, you need to serialize and de-serialize other data structures.

You can do so using JSON.stringify() and JSON.parse().

For e.g. for the given JSON

Html Sample Code Free Download Windows 10

We first convert the JSON object to string and save in the local storage:

To get the JSON object from the string stored in local storage:

Mailto Links Example

A mailto link is a kind of hyperlink (<a href='></a>) with special parameters that lets you specify additional recipients, a subject line, and/or a body text.

The basic syntax with a recipient is:

More customization!

Adding a subject to that mail:

If you want to add a specific subject to that mail, be careful to add %20 or + everywhere there’s a space in the subject line. An easy way to ensure that it is properly formatted is to use a URL Decoder / Encoder.

Adding body text:

Similarly, you can add a specific message in the body portion of the email: Again, spaces have to be replaced by %20 or +. After the subject paramater, any additional parameter must be preceded by &

Example: Say you want users to send an email to their friends about their progress at Free Code Camp:

Address: empty

Subject: Great news

Body: I am becoming a developer

Your html link now:

Here, we’ve left mailto empty (mailto:?). This will open the user’s email client and the user will add the recipient address themselves.

Adding more recipients:

Download Html Code

In the same manner, you can add CC and bcc parameters. Seperate each address by a comma!

Sample Html File Download

Additional parameters must be preceded by &.

Html Sample Code Free Download

Thank you for using this HTML reference. Happy coding!