ThemeKit M1 Contact Module
The form can be hidden for phone users since it is a lot easier for them to use the spam protected email link.
Tel: Tel: 012 345 6789EverWeb Widgets
Website Essentials
If a website's landing page doesn't download and grab the visitor's attention in under two seconds it is pretty much useless.
The items that should be immediately visible are the logo, website name, hero item and contact info.
Inserting a horizontal navigation at the top of the page is a waste of vital space. For mobile device users the navigation action tab should be fixed in the bottom half of the screen for easy access.
Contact Form
Apart from being mobile friendly a website should also be "visitor friendly". A succesfull website engages the vistor, earns their trust and has concise, quality text content which is relevant to their search criteria.
In general, website contact forms are not the best method of engaging visitors and have no place on the site when it is viewed on mobile phones.
If a form is essentail it should have the minimum nuber of fields, no checkboxes or dropdowns and definitely no reCaptcha.
Contact Module
The ThemeKit M1 Contact Module widget has a two column grid layout. One column has a heading, text, optional phone number/call icon and an optional spam protected email function.
The other column has the contact form which has the option to be above or below the contact info hidden when the page is viewed on mobile phones or be hidden.
Styles
Most contact forms are quite ugly and can spoil a web page design completely. The ThemeKit M1 Contact Module form has a modern, minimalist style with placeholder text rather than field labels. It does havethe option to add field bprders for those who want their design to look really out of date!
Contact Tab
If it is important for visitors to complete a contact form the link to it must be easily visible on each page.
The ThemeKit M1 Contact Tab widget has an SVG "contact" icon with controls to adjust its color, hover color, background color and opacity and the padding. Adjusting the padding changes the relative size of the icon.
Position
The link can be positioned top or bottom and left center or right with controls to adjust its position on the X and the Y-axis.
There is a control for adjusting its z-index to bring it to the front of other items on the page.
NOTE: The tab can be hidden on tablets and/or computers if required.
Contact Bar
When landing on a website home page the visitor must see the website logo and name, a memorable hero item and contact info immediately.
The contact bar can be used below or to overlay the bottom of the hero giving immediate access to this vital info and earning the visitor's trust.