Contact Info
Along with the navigation, contact info is one of the most important items on any website page. Contact info must be up front, visible on every page and not tucked away in a footer.
Most visitors will not trust a website unless the contact info is easily found and preferably visible on page load.
The ThemeKit Block Contact Info widgethas a grid layout with an image or a interactive Google map in the left column and two or four block links in the the right column. The items can be spaced out using the grid gap control.
Each block has an SVG icon and a text.
The email and phone blocks are already set up with default icons. The other wo blocks can have any SVG icon code inserted and can be configured as internal links.
AS can be seen from the example each block can have a different background or the opacity can be set to zero to allow the text to show over the container's gradient background.
Contact Bar
Contact info can be displayed on page load using a contact bar. The ThemeKit Block Contact Bar as a choice of two contact icons for a link to the contact page, an optional, centered phone function and a spam protected email icon link.
The background color opacity cab be reduced and the bar moved up to overlay the bottom of the item above it.
When the page is viewed on mobile phones, the phone number is replaced by a phone icon which places the call when tapped.
The icons are SVGs and can be styled for size, color and hover color.
Contact Form
Most web savvy visitors do NOT want to fill in a form give up lots of info. Forms should always have the minimum number of fields and have an alternative email function - especially for mobile device users.
Styling
The ThemeKit Block Contact widget shown below has minimal styling so that it doesn't clash with the other items like most forms do.
The two column grid layout has an info section and the form. The position of the items can be switched and the text can appear above or below the form on browser/device screen widths below the break point.
Text Block
This has a heading, text, optional phone number/phone icon an a spam protected email function.
Form
The form gets rid of the usual boxes and has an option to separate the fields with a styled line. It can have any amount of fields and the text message field is optional.
The submit button can have a solid or transparent background and there are controls for adding a border. It can be aligned left, center or right.