This is an example of a Contact Form with Google maps. The google maps and forms are placed in the container. The divisions are equally done to display the map as large as the given form. Contact details contain name details, contact details like email and telephone number and message. The map is displayed in iFrame and the location is set to Colosseum. Once you click on the map it opens you the google map page. FormGroup tag is used to add the FormControls. Font awesome icons are used to represent the contact details. The divisions are well organized and labels are input tags are well styles. The form has validations and checks it before submitting the form. Icons of social sites like Facebook and linked in are placed. These types of forms can be used for e-commerce websites and organization offering services.
This is a responsive form and works well with most of the devices. Adding this form will give a stylish look to your website and portfolio. It is a simple yet stylish contact form which consists of "container". Contact form is placed inside the container which contains the input tags like “first name”, “lastName”, “email”, “comment” and submit button. FormGroup and FormControl are used to group the label and input area. The image is placed in a contact-info class with the margin set at the bottom. Head tag consists of bootstrap min and jquery references. CSS is defined to match the details added in the contact form. Styles like background color, padding, and height is defined. Class contact-info it needs to be set with margin. Focus on button shadow is none. This form goes well with a personal, portal and business websites.
This is an Bootstrap sticky contact form which will be fixed at the bottom position of the page. It will be located at footer area and when clicked will slide out to show the form. The form is floating and fixed at bottom of page, it will be displayed when the user clicks on “Send a message”. When click it provides animation and popup with all input fields to be filled out. HTML contains the “container” and fixed classes which act as a container. The entire form is placed in this container. The form contains the input, textarea and submit button. The container is using CSS style for all the classes and uses jquery 1.11 for animation. and popup of this form.
HTML5 Contact Form which has a unique design and it looks professional. It is clean and fresh modern design contact form with validation which makes your website outstanding. It’s SIMPLE and works well with HTML5 Validation. It’s styled with CSS3 and designed to fit your website. It’s easy to customize. The fields included in this form are full name, email, subject, phone, and message. All the form fields have an icon which makes sense of the input fields. You can customize it very easy as you want it to be and can add more fields into form by simply copy & paste the few lines of HTML code. Our HTML5 form comes with many impressive features. One of the features is form validation without using any JavaScript or jquery. The HTML5 form validation little restricted to browser support, and it didn’t support old browser version especially IE. But the good thing, it is a responsive contact form and looking good on all type of screen resolution.
This is an awesome example of Expanding Contact Form which can be used in web pages. The contact form is been shown only when clicked on the “Contact Me” button. The complete code is placed in the tag, which uses the class like FooterSocial. To contact using social media, we have placed icons respectively. A CSS style is been applied for all the classes and controls used in this snippet. The JavaScript code gives an additional feature to slide and toggle the panel when clicked on the “Contact Me” button. Once the simple form of contact me appears, you can add the details and click on submit button. Check the input fields in the form, they are marked with the required attribute. Note the input name “client” has required attribute marked with the input pattern. The form uses HTTP “post” method to submit the details.
This is a simple contact form, which is using class Jumbotron for the header. This class is a lightweight, flexible component that can optionally extend the entire viewport to showcase the header part of the snippet. In the second part, the form is placed in the container. The container helps to deal with responsive behavior of the form. FormGroup is used along with the FormContainers, to display the labels and types. An addon is used to display the email icon for email FormControl. This is all placed in the class InputGroup. The snippet used column setting for medium devices for each formGroup. The style is limited to jumbotron class and header.