While designing a website contact page, creative designers put an effort in eye catchy form design to encourage more user responses. One of the successful styles is to place a contact form over an eye catchy image. There are different methods to place the form over the image. The simplest method is to set the image as a background image. However, in this scenario it cannot work as this form should be placed over a sliding banner. Anyway, I will explain both methods (set banner as background and moving banner) in this tutorial.
- Display Form Over an Image set as background
This is very simple. All we have to do is to set the image as the background image of the div. Then place the form in the div.
Have a look at a simple form which displays over a background image.
Now let us check the HTML code.
HTML Part<div class="bannerform">
<form>
<input type="text" placeholder="BUSINESS NAME" class="form1"/>
<input type="text" placeholder=" WEBSITE" class="form1" />
<input type="email" placeholder="EMAIL" class="form1" />
<input type="submit" value="Submit" class="submitbutton" />
</form>
</div>
Now we need to check the CSS part to analyze the classes bannerform, form1, submitbutton, etc. However, only the bannerform class comes under the scope of this tutorial..bannerform {
width: 100%;
height: 380px;
backgorund-image
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Xryl0vu6esv1gKqalMm9YWot-rZZo2zCSlDOJWbyafdYN9JPM2u0wzjYwPpm9E92K6QOcKfxNJ1Kt81WA8_Y-eAMB1-ZqptoECcaYNCFh77VD765axURZXDhGcIKMJjeLE0HqWHsT0Y9/s1600/ponmudi-trip.jpg)
}
It is the simplest method to place HTML form over an image. However, it doesn't work when you want to display HTML form over a moving banner. For that, you should follow the second method.
