When designing responsive pages it's not possible to drop items like phone and email links, social media icon links etc anywhere on the design canvas. They need to be incorporated in containers and a well designed toolbar actually improves the appearance of the page design.
The toolbar has a centered signup/subscribe icon with options for previous and next page links to the left and right.
The toolbar has a maximum width setting that controls the spread of the icons. The icons are SVGs so they can be customised for color and hover color. The icons can show a title on hover when viewed on computers.
Sign Up Form
The form has optional intro text, fields for name and email address and a submit button. Rather than show a message on submission, the form will redirect the visitor to a web page - internal or external.
The form is visible on the EverWeb design canvas for setup and appears below the toolbar. A checkbox hides the form and allows it to appear above the toolbar on the published page when the signup icon is clicked or tapped.
Form Styles
To improve the appearance and save space, the form uses placeholder text rather than labels. There are lots of styling options for each item in the form and the container and there is a control for vertical spacing.
The toolbar above uses Ionicon icons. The widget has a link to the Ionicon cheatsheet which is hosted on the EverWeb Widgets website. Click the Ionicon (circle with dot) icon to check out the range.
Each link can have a different background color. The icons can be set globally for size, color and hover color.
Spam Protected Email Link
The optional email link has separate fields for the email name, domain and domain extension. The @ and the period are inserted using Javascript. This prevents spammers using scrapping software from harvesting the email address.
Phone
The optional phone link can be hidden on computers and tablets if required and only appear on mobile phones. It it is shown on these devices, the phone number can be entered into the title field to show on hover.
NOTE: If a Mac user clicks the phone icon when using a computer or iPad, FaceTime will open and they can contact the site owner that way.
The toolbar above uses Ionicon icons. The widget has a link to the Ionicon cheatsheet which is hosted on the EverWeb Widgets website.
The main toolbar icons can be adjusted for size, color and hover color.
Phone/Contact Link
By default, a phone number is shown on the left of the toolbar and it switches to a "Call Me" button on mobile phones.
If the phone facility is not required it can be switched to an internal link. The default icon is for a link to a contact form page but it can be changed to anything else.
Popup
The links can be seen below the toolbar when viewed on the EverWeb design canvas. Each link can have a different background color. The icons can be set globally for color and hover color.
Links are added as required and there are fields for entering the icon name, title, URL and a checkbox for the new window option.
There is a checkbox to hide the popup prior to publishing. The links will popup above the toolbar on the published page.
Spam Protected Email Link
The optional email link has separate fields for the email name, domain and domain extension. The @ and the period are inserted using Javascript. This prevents spammers using scrapping software from harvesting the email address.
The toolbar has a phone number which switches to phone button on mobile phones, a popup contact form and an email button.
The tab for the popup form can either be an icon like the one shown for the Signup Form further up this page or a CTA style tab as used in this example.
Phone
The phone item is optional and shows the number on computers and tablets. It switches to a "Call Me" phone icon on mobile phones.
Contact Form
The form 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 chosing 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.
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.
Setup
When the widget is dragged onto the EverWeb design canvas, the form appears below the toolbar so that it is visible during set up and styling. There is a checkbox to hide it prior to publishing where it will appear above the toolbar when the icon or tap is clicked or tapped.
Spam Protected Email Link
The optional email link has separate fields for the email name, domain and domain extension. The @ and the period are inserted using Javascript. This prevents spammers using scrapping software from harvesting the email address.