This is an example of a web form with a map of Texas region, designed using CSS, and HTML. The map has been created in XML and imported to the form with its URL. The map container is assigned the styles of max-width as 800px, max-height as 800px, and margin as 0 auto. The color set for the map is predefined as variables to avoid defining them over and over again. The color set is given as $charcoal: #656d78, $darkcharcoal: darken($charcoal, 30%), $purple: #987197, $darkpurple: darken($purple, 30%), $orange: #e9573f, $darkorange: darken($orange, 30%), $green: #37bc9b, $darkgreen: darken($green, 30%), $blue: #1a2240, $darkblue: darken($blue, 30%),$red:#7d0506,$darkred:darken($red,30%), $yellow:#f6bb42;$darkyellow: darken($yellow, 30%), and $white: #f2f2f2. In a hover event, the path takes a transition effect of fill .2s ease-in-out and fills the region with the color $blue.
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.