EverWeb Widgets

Responsive Grid Contact Form Plus

Fill out & send the form to receive a free gift and our immediate attention!

Contact Form

Contact Form

Contact forms can really spoil a page layout design. These nasty white boxes with borders take us back to the bad old days before CSS3 when websites were designed using a table layout.
The form above uses a CSS Grid layout with the form fields sitting side by side on wider screens and changing to a single column on mobile phones.
Using a grid also allows the item vertical spacing to be easily adjusted using the grid-row-gap property.
No Labels
Instead of labels, the form fields have a placeholder attribute. This specifies a short hint that describes the expected value of an input field. The placeholder text is displayed in the input field before the user enters a value.
Both the form background and the field background have controls for setting the background color and its opacity.
There is an optional paragraph for entering instructions.
Form Fields
The form can have up to 48 fields plus the optional text area which has adjustable height. The fields are added using the EverWeb widget API Assets List.
There are boxes for entering the item name and the placeholder name, a drop down for choosing the input type and a checkbox for required fields.
All the items share the same font family, size and color. The font can be web safe or non web safe or Google hosted with a web safe fallback.
Wrapper
The wrapper is full width responsive and the form is centered with a maximum width. The background can be a color with variable opacity or an image. The image is inserted in two sizes - one for wider screens and the other for mobile devices - to allow faster page download on wireless networks.
Animation
The form can enter with a scale animation from the center out and has controls for setting the animation time and delay. The animation will occur every time the item is scrolled into the viewport. There is a control to change this to allowing the animation to occur only once.
By default, the animation is prevented from firing on mobile phones but this can be changed by checking a box.
Redirect
When the submit button is clicked, instead of showing a hokey "Message Sent" popup, the visitor is redirected to another page of the site. This could be a "Thank You" page or one where the visitor can download a "Free Gift" which is offered as an incentive to fill out and send the form.

Contact Bar

An alternative to having a form on the page is to use a contact bar with an icon tab to open the form in a lightbox window. That way the form doesn't appear with the other items on the page and spoil the look of the layout.

Footer

All the contact info like street address, email link, phone number and phone call tab can be fitted into a suitable footer which can also have a link to another page with a contact form.