Posted in show your work
11413
3:15 am, August 28, 2021

Contact Form with Wide Hero Image using Responsive Block CSS and HTML

About this Content Block

This is a piece i did a little while ago, but i will re-create it for this post

Basically what we are creating here today is a wide and padded section of a home page with a contact form and a nice hero background image making it inviting for users of the site to complete this form

On responsive or smaller screens the background is hidden behind the form and just the form and the top of the background will be shown as then it moves into a more functional state

The Layout Basics

i usually do a quick sketch or drawing in gimp just with the elements to give me a basic idea of how things will be layed out. 

Ok now we have the basic elements lets do some structure, just keep it simple to begin with, and we can add some nice details later.

Layout Basic

Yep its just very basic, but now we know where the elements should go. 

Structure and Elements First

Ok lets work on the html elements for this design, its just the block, so not a whole home page or landing page, so it can be done seperately and will need some unique classes that are related to the element, so it will play nicely with other elements on the page. 

HTML and CSS

Add the basic layout in elements first, you have to picture in your mind where these elements will go and what we will need to add padding and margins to, to make the layout work later on. For this one i will be using the foundation.css grid to make things easily responsive later on.

The HTML

Layout elements done, looking pretty boring at the moment but its ok. Thats how awesome things start,.. i think. 

Add the foundation for the grid. 

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/6.2.2/css/foundation.min.css" integrity="sha512-sLQq3tGVkDfa4o5139obF22+JI52RmowZ7bSeNmDYzaMox6PfuIyEK+TYiqA1mg+v7aT+JzFns4pPrIjtfiLZA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

CSS

Copy each of the element classes into your css.

Now we have the elements ready to add properties to. I usually prepend the element names with the main name, so you can see where each element belongs and makes the code more re-usable or movable later on, if you need to combine the elements with other sections which you will most likely have to do. 

The only one that is not prepended here is form-row, which is a faily global class usually used to pad the rows. 

CSS

.contact-block {} /* this is the main wrap element */
.contact-block-form {}
.contact-block-title {}
.contact-block-text {}
.contact-block-form-content {}
.form-row {}

CSS Pad it and Wrap it

Looking a bit nicer now, but still missing a nice font and background. The foundation fonts are a bit ugly...

add a bit more of a shadow to the contact form

Images

Head over to pexels and grab an appropriate image for the background, something nice and inviting, or someone looking happy to be contacting us on our new form! :P Or if you have some casholas you can go to shutterstock... but i cant afford that so ill stick with pexels and just give some credit for the image used here. 

I was thinking the one with coffee and the phone as i like both of those things. But then the lady holding the ipad and phone also looks happy to see me so, ill try that one and see how it looks. 

This is the one ill go with and see if i can get it working nicely with this layout, make sure we add this thanks to the photo source.

Photo by Andrea Piacquadio from Pexels, thanks Andrea.

Just scale this down a bit and see how it fits. Might need to do some editing here to make it fit properly. But add it first and check. 

Scale it to 1800px and then save it as 80% jpg and it will then be web ready. 

Add it to the background of the main wrap / block element and check to see if the form is covering the face too much and then can adjust either the image or the position of it. 

Thats actually not too bad, but there is a few issues.

  1. she is looking away from the form, we probably want her looking at the form.
  2. the wrap is cutting off the image, we want that image to go full width of the screen. but still not hide her face.
  3. needs a bit more padding 
  4. fonts are still not done.
  5. missing submit button. 

Perspective: she is looking away from the form, we probably want her looking at the form.

Idea: if someone is looking at a form, the user may be more inclined to fill it in. 

Easy lets flip the image. You can do this with css or with an image editor. Image editor is easy enough, using gimp just do this. 

with the image open in gimp just go into image / transform / flip horizontally

and now we have the flipped version

HTML

https://i.imgur.com/AzVGMC6.jpg

See how that looks, i think she is now going to be too close to the form. 

Yep a bit too close there. Lets do the wide screen bit first and then we can have a look at the positioning of the background. 

Issue 2 : the wrap is cutting off the image, we want that image to go full width of the screen. but still not hide her face.

i had added the wrap margin on the block element, which is why its only showing the background on that 1200 max width. 

CSS

.contact-block {
  margin:0 auto;
  width:100%;
  max-width:1200px;
  /* background:url("https://i.imgur.com/WF6hjXu.jpg") center no-repeat; */
  background:url("https://i.imgur.com/AzVGMC6.jpg") center no-repeat; /* flipped image */
  background-size:cover;
}

so we have to add another wrapping element for this block that is still full width.

adding the wrap element, contact-block-wrap this one will still be full width, so we can attach the background image to this now and remove it from the contact block. 

ok lets test now and see what it looks like, i think she will be fully covered by the contact form now, but lets check. 

we have the correct width now, but need to play around with the position and margins here. I think the demo has some padding on it by default in the main content area that i will need to reset as well. 

Image resizing and positioning, i have a video on this i will add later. 

Here is the result. 

add and test again

https://i.imgur.com/HKSpTck.jpg 

Actually that is looking pretty good now!, with a small amount of padding and positioning, and background editing. 

Look how happy she is for you to get in contact with her! i mean us... 

Now for the finishing touches, new font, and submit button. 

New Font(s)

Lets pick some new fonts for the title and text over at google fonts. 

I think for the title Poppins is nice and rounded.

CSS

/* Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

and then Work Sans for the text and form elements.

CSS

@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');

Before Font Change

After Font Change

Placeholder Text

i forgot to add the placeholders to these elements, so add them now. Otherwise who knows what to put where. Alternatively we could add some small labels to these as well, but to make it neater, placeholders should do for now. 

Actually turns out that i just spelled placeholder wrong. Whoops...

Should look better now. 

Not too shabby.

Submit Button

Finally i can add the button and its done (well not in functionality), but the design of this form element block is done!

Something nice and subtle should do here. 

And we are done!

Final Result on Mobile

Final Result on Desktop

I hope you enjoyed this post, it actually took me a lot longer to write this up than i thought! Much longer than the actual process. Hopefully i can add some more shorter posts than this in the future.

Enjoy! 

Contact Form with Wide Hero Image using Responsive Block CSS and HTML Demo

View Demo Full Screen View Demo New Tab

Contact Form with Wide Hero Image using Responsive Block CSS and HTML Code

HTML

<div class="contact-block-wrap">
  <div class="contact-block">
    <div class="grid-container">
      <div class="grid-x">
        <div class="large-1 cell">
          &nbsp;
          <!-- a padding cell -->
        </div>
        <div class="large-4 cell">
          <div class="contact-block-form">
            <div class="contact-block-title">
              Get in Contact Now!
            </div>
            <div class="contact-block-text">
              Please fill in the following form to get in contact.
            </div>
            <div class="contact-block-form-content">
              <form>
                <div class='form-row'>
                  <input type='text' placeholder='Full Name' />
                </div>
                <div class='form-row'>
                  <input type='email' placeholder='Email Address' />
                </div>
                <div class='form-row'>
                  <textarea name="name" rows="8" cols="80" placeholder="Add Your Message">
                  </textarea>
                </div>
                <div class='form-row last-row'>
                  <input type="submit" value="Submit" class="submit-button" />
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="large-7 cell">&nbsp;</div>
      </div>
    </div>
  </div>
</div>

CSS

/* this is the main wrap element */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');

.contact-block {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    padding: 50px 0;
    font-family:"Work Sans", sans-serif;
}
.contact-block-wrap {
  width:100%;
  background:url("https://i.imgur.com/HKSpTck.jpg ") center no-repeat; /* flipped image */
  background-size:cover;
}
.contact-block-form {
  background:#EEE;
  padding:30px;
  border-radius: 20px;
  box-shadow:0px 5px 20px #444;
}
.contact-block-title {
    font-size: 26px;
    color: #444;
    margin-bottom: 10px;
    font-family: "Poppins", sans-serif;
    font-weight: bold;
}
.contact-block-text {
    font-size: 20px;
    color: #666;
    margin-bottom: 20px;
}
.contact-block-form-content input[type=text],
.contact-block-form-content input[type=email],
.contact-block-form-content textarea
{
    border:1px solid #999;
    border-radius: 5px;
    font-family:"Work Sans", sans-serif;
}
.contact-block-form-content {}
.form-row {
  margin-bottom:20px;
}
.form-row.last-row {
  margin-bottom:0px;
}
.main-content {
    padding: 0px;
}
.submit-button {
    border-radius: 5px!important;
    background: #44a053;
    padding: 15px 30px;
    color: #FFF;
    font-family: "Poppins", sans-serif;
    border: 0px;
}

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/6.2.2/css/foundation.min.css" integrity="sha512-sLQq3tGVkDfa4o5139obF22+JI52RmowZ7bSeNmDYzaMox6PfuIyEK+TYiqA1mg+v7aT+JzFns4pPrIjtfiLZA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Related Tags

No Items Found.

Add Comment
Type in a Nick Name here
 
Related Search Terms
Search Code
Search Code by entering your search text above.
Welcome to CSSBundle.com

Hi there and welcome to CSSBundle. Here at CSS Bundle we aim to find the best css and javascript bundles and demos and add them here to make them easy to find all in one place.

If you would like to stay up to date with our latest updates you can subscribe to our mailing list where we will send you one email per week with the latest updates, no spam emails just the latest updates.

Random Quote


Latest Code
css animations Falling Stars CSS Animation html Video different sources on screen sizes video embed html responsive css animations Animated Triangles on Canvas JS HTML HTML Canvas Instant colour fill with HTML Canvas javascript Transform Text into Images using SnapText JS CSS Tools Fancy Border Radius CSS Generator Tool - spin animation keyframes CSS Tools CSS Drop Filter Shadow Creator CSS Slider A CSS and HTML Only Carousel Slider CSS Z-Index Z-Index Code Front - CSS to change z-index when element is active sections section with image to the right text to the left gradient Sections Two Clickable Logo Promo Box Section Foundation HTML CSS Sections Inline Contact Form Formatting HTML CSS Sections Overview full width section in Poppins font with light gray background using foundation Interactive Images Map Image with Easy Dots and Titles using only CSS HTML Sections Social Header Links easy Drop in Code with Font Awesome Icons Sections Responsive Friendly Subscribe to our Newsletter Section CSS Tips Create a button with CSS, HTML and Center it! CSS Text Formatting Truncate Text to an amount of lines using line-clamp CSS Positions Item Positioning in CSS CSS Tips Draw a Circle in CSS css animations Magical Text Effect Bootstrap 4.2 Kitchen Sink CSS Frameworks Make your site look like windows 7 CSS Backgrounds Fancy up your banner image hero sections using overlay gradients CSS Modal Floating Modal Message Fixed on the Bottom of the Screen CSS Modal Create a modal with only CSS css grid display items in a css grid CSS Text Effects Using the selection selector to change the default highlight color Text Truncate your Text with CSS CSS Cursors Change your cursor into an Emoji Cursor or Image Cursor CSS How to Center Everything or Anything with CSS CSS Animations Smooth Scrolling with just CSS CSS Animations Radial Glow under cursor on box hover over effect CSS Shadows Using a filter drop shadow for transparent images CSS Animations Pure CSS 3D Flipping Book with Animations CSS Create a checkerboard background pattern with CSS CSS Animations button animations hover and fill animation CSS Animations button on focus swing animation CSS Animations Animated Button Border when Active Quick CSS create a border with top triangle in css CSS Animations Single Element CSS Spinners CSS Animations CSS Shake - Shake up your elements CSS Framework NES-style(8bit-like) CSS Framework CSS Tips Why to use a CSS Reset? Web Developer Checklists Front-End Checklist Icons Font Awesome Icons CSS Animation Animate Stuff with Animate.css CSS Animations Check Wave Click a Checkbox and Watch the Animation Animation Cloudy spiral animation with CSS3 Notifications Toast Messages and Notifications Standalone Library no JQuery - notify.js