Adaptive layout site allows web pages to automatically adjust to the screens of tablets and smartphones. Mobile Internet traffic is growing every year, and in order to effectively process this traffic, it is necessary to offer users adaptive sites with a user-friendly interface.
Search engines use a number of criteria to evaluate the adaptability of a site when viewed on mobile devices Oh. Google is trying to simplify the use of the Internet for owners of smartphones and tablets, marking sites adapted for mobile devices in mobile search results with a special mark. mobile friendly. Yandex also has an algorithm that gives preference to sites with a mobile / adaptive version for users in mobile search.
You can check the display of the page on mobile devices on the services and.
Rice. 1. Mobile issuance of Yandex and Google with a note about the friendliness of the site to mobile devices What is adaptive layout
Adaptive layout implies the absence horizontal bar scrolling and scalable areas when viewed on any device, readable text and large areas for clickable elements. Using media queries, you can control the layout and position of blocks on the page, rearranging the template so that it adapts to different device screen sizes.
The main techniques for creating an adaptive site are given in the article. For responsive design the width of the main site container is set in % , while it can be equal to or less than 100% of the browser window width. The width of the grid columns is also set in %. IN responsive design the width of the main container and grid columns is fixed using values in px .
Considered in this lesson Responsive fluid layout will work great on a two-column template, making the site responsive and easy to view on mobile devices. The template assumes a different layout of the main content of the pages, in this lesson the layout of the main page will be analyzed.
Main page layout
The page consists of three main blocks: a header (header), a wrapper container for the main content and a sidebar, and a footer (footer). Let's take 768px and 480px as design breakpoints.
At the first point, we will hide the top menu and move the sidebar under the container with the posts. At the second point, we will change the location of the header elements, cancel the positioning of the social network buttons in the posts, and cancel the wrapping of the page footer columns.
Rice. 2. An example of adaptive layout 1. Meta tags and section
1) Add to section
necessary files - a link to the fonts used, the jQuery library, as well as the prefixfree plugin (so as not to write browser prefixes for properties):
2. Page header
In the header of the page
logo ;
button to show/hide the main menu
< div class = "col-md-4" >[ submit class : btn - flat class : col - xs - 12 "Order" ]< / div > < / div > |
Important note: Dear friends, in this example I am using responsive styles to create a contact form in WordPress, i.e. it can take forms of any screen size.
You will see the button in the upper right corner. You definitely won't miss out. 🙂
We have done some of the work, now we are moving on to the next step.
Setting up an email address for receiving applications
At this step, we need to make some settings so that letters go to us on our mailbox. How to achieve this I will describe below.
We need to click on the large "Letter" tab. It will be the second one after the Form Template.
The first thing you will see is your tags that you added, we need to insert them into the body of the letter, they will substitute the data that the user enters from the form. I think I explained it well.
Now for the fields:
- To (Where the application will be sent, in my case, this is my mail address, you can specify several addresses where to send applications)
- From (Field From, i.e. the value will be substituted that the application comes from my studio site)
- Subject (It is used to determine from which form the application comes from, in our case it is an application from the site promotion form).
- Additional Headers (Additional headers, we do not touch them, they are needed for the correct form submission)
- Message Body (Message body, here you indicate From whom the letter came and from what address, for example: “From: Ivan” “Mail address: vasya@ mail . en »)
- File Attachments (Attachments to the file, do not touch)
Now we need to set up notifications about the successful or unsuccessful sending of a letter from the contact wordpress forms.
These will be messages that will be shown to the user in response to his actions with the form. By default they go to English language. I made a translation into Russian of the most necessary for you. There will be more than enough of them, and if not, then Google translator will help you. So let's get started.
- On successful message sending: “Your message was sent successfully. Thanks."
- When sending a message incorrectly from the form: “An error occurred while sending the message. Please try again later or contact the site administrator."
- Fill error: "Fill errors. Please check all fields and submit again."
- The data sent was identified as spam: “Error sending message. Please try again later or contact the site administrator."
- Some conditions must be accepted: "Please accept the conditions to continue."
- Some fields must be completed: "Please fill in the required field."
- Exceeded the length of the characters in the field: "Too much data specified."
- Insufficient length of characters in the field: "Too little data specified."
- Invalid date format: "The date format is invalid."
- Early date in minimum limit: "The date specified is too early."
- Late date in the maximum limit: "The date specified is too late."
- File upload failed: "Failed to upload file."
- File type not allowed: "This file type is not allowed."
- Uploading a file that is too large: "This file is too large."
- File upload failed due to PHP error: "File upload failed. An error has occurred."
- The number format entered by the sender is incorrect: "The number format is invalid."
- Number less than the minimum limit: "This number is too low."
- The number is greater than the maximum limit: "This number is too high."
- The sender did not enter the correct answer to the question: "You entered an incorrect answer."
- The e-mail address entered by the sender is incorrect: "Invalid e-mail."
- The URL entered by the sender is invalid: "Invalid URL."
- The phone number entered by the sender is incorrect: "Invalid phone number."
Very good. We have finished setting up the form, now we need to insert it on the site. To do this, using already known technology, go to an existing page or create a new one. In my example, I will show you an example of an existing form on a WordPress site page.
Since our form collects applications for website promotion, let's go to a similar page.
To insert our contact form, we need to copy the shortcode assigned to it by the plugin. It is available under the name of your form.
Copy and paste into our page, after going to text editor(not visual). Shown in the screenshot below:
Let's save our page and see what happens in the end in the browser:
Super! Now let's try to submit the form without filling it out. And here's what we'll see.
An error occurred while submitting the form because the user did not provide the required data in the fields. Now let's enter the correct data and see what we get in this case. 
We press submit and this is what our form writes:
Now let's see what our application looks like. They come to my mailbox. Check delivery:
Let's go inside to make sure the encoding and all the data are correct.
Everything is alright. The form works properly and sends data. Now we can collect applications that will come to you when you are engaged, if we are talking about regional promotion.
So, we have told how to make a contact form on WordPress on a website page. Now I will tell you how to do popup adaptive feedback form using our Contact form 7 plugin.
Making a Popup Responsive Contact Form in WordPress
In order for our form to become adaptive, i.e. "rubber", we need to connect another plugin, or rather its addition to Contact Form 7 - it's called Bootstrap Contact Form 7. Install and simply activate it and that's it - it works. You don't need to do any settings with it. Set and forget.
In the next step, I will tell you what changes need to be made to make our form popup and responsive. I made a similar implementation home page your studio site. To do this, let's go to the index.php template, which is located in the "Appearance - Editor" section. We will work only with the code, manually.
Our popup form will be displayed in a modal dialog like this:
To achieve this result you will need the following code, I will present it in its entirety in a snippet:
Order
< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" >Order< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" >×< / span > < span class = "sr-only" >close< / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" >Submit your application< / h4 > < / div > |
From the author: A good contact page is very important for maintaining relationships with your visitors. Whether we're talking about e-commerce, magazines, personal websites, online services, users are usually looking for a contact page as the first means of communication with you. Oddly enough, many web designers neglect the humble contact page, even considering it one of the least important aspects of a website. Let's fix this.
The Importance of a Good Contact Page
The contact page is often overlooked. How many websites have you visited to contact, complain about a product or service, or ask a question? And how often have you had to fight with a contact form?
A good contact page is beneficial to any kind of business. It is able to increase customer satisfaction by helping to solve their problems. It can also help you improve your products and services by providing a broad avenue for valuable feedback.
When it comes to direct user feedback, other channels can be limited. Television, radio, magazines, newspapers... they are all a form of one-way communication. Online communication should be a two-way street; dialogue between business and customer. Both sides benefit from this, which is why a good contact page is so important.
Location
First step: where to put your contact information. There's no point in having the best contact page in the world if your visitors can't find it. You can help them if you adhere to some design traditions.
In general, contact information can be found in two places:
Basic navigation is the perfect place to link to the contact page. Visitors usually look for the contact page on the right because it is seen as a secondary element. Therefore, you will simply see a link to the contact page as one of the last navigation elements of the site.
We can also look at the smaller subnav in the top right corner of the screen. This is also a valuable position for the contact page. By the way, it is better to avoid placing the contact page in the drop-down menu, as it is easy to miss it there.
footer is also a popular place for contact information. It may contain a link to a contact page:
…or the most important contact information:
Predicting the flow of visitors to a contact page is difficult, so placing links in at least the two places mentioned is a good insurance policy.
The most important in the contact page
Now you're safe - your visitors will be able to find their way to the contact page, and it's time to think about its actual content. Let's start with the basics and consider the information that should be presented.
Email address / contact form
An email address is the easiest way to communicate online in business. Alternatively, you can use a contact form that sends an email. With a form you have more control over the content (required fields) and spam can be prevented. We will talk about contact forms in this article below.
The address
A business with a brick-and-mortar store should not forget to mention their address. If you have many stores, it's best to create an individual page for each one. Fill it in with individual contact information for that store, hours of operation, directions, etc. This is not only for visitors, but it can also help your site in local search queries.
Phone
Displaying a phone number evokes a sense of trust. This is often seen as a sign of a real company and really helps online stores.
Many websites have started adding social media buttons to the contact page. While this may not work for all sites, for some visitors it does. additional value. Especially since more and more companies are offering customer support via Twitter (sometimes even 24/7).
Additionally
There is no one size fits all solution for a good contact page. Any website or business requires certain elements that may be redundant on other sites.
There are a lot of additional information or features that you will find useful on the contact page. For traditional stores, it's a good idea to mention, say, opening hours. Large companies could be linked to their Live Chat, and e-commerce sites could secure user trust by displaying their VAT number.
Convenient Information
The ease of use of the information will keep your visitors from getting frustrated with the contact page.
Instead of images, include your information as HTML text. HTML text can be copied and pasted, making it easier for the visitor to save your contact details.
The email address must use a mailto link. This gives the visitor the ability to click on it and send a message without having to copy the delivery address and open mail client. This technique, however, can be problematic in the form of spambots collecting email addresses associated with the mailto: link. So you might decide to obfuscate them first with a service like mailtoencoder.com.
Side note: Phone numbers must also be interactive. Last year we posted a little tip on how to make a phone number click-sensitive. Thanks to a small piece of code, smartphones recognize phone numbers and make it possible to call them. This is really convenient for mobile users.
Businesses that rely heavily on their traditional stores often benefit greatly from an interactive map, allowing the user to quickly find their way to the outlets. Showing a store address is good, adding an interactive map is even better.
Thanks to Google Maps paste it useful property easy peasy. Just enter your address in Google Maps and click on the link icon in the sidebar. There is an embed code for you.
Did you know that you can customize the map for yourself? You can edit map colors, add custom pointers to the map, and create a legend. You can read more about this at developers.google.com. You can also consider using alternative services, such as the rather attractive Mapbox.
Don't Forget Search Engine Optimization
As a visitor, you will instantly recognize the address on the contact page. search engines, however, a little help is required in recognizing the various elements.
Contact forms
Most websites use a contact form on their page. However, some forms are overly complicated and unfriendly to the user.
As simple as a contact form may seem, it is actually a combination of several components. They all need to work together to ensure the best possible user experience.
Input fields
Input fields, such as text fields, option buttons (radio buttons), checkboxes, etc., allow the user to enter necessary information.
Website visitors are more inclined to fill out short forms as they require less effort. The number of input fields is a balancing act between user experience and business needs. Hubspot analyzed over 40,000 forms and examined the effect of increasing the number of input fields. The result of their research is to use as few form fields as possible and be especially careful with complicated text areas and dropdowns.
Help your visitors complete the fields by providing the correct format. Phone numbers and dates can be a pitfall, especially for foreign visitors. The HTML5 placeholder attribute will help you.
Next, make sure that you have highlighted the fields you need to fill in (they are traditionally marked with an asterisk *). The safest way is to unambiguously specify required and optional fields.
Finally, it is useful to highlight the active field. It can be indicated barely or very brightly - as you wish.
Below is an example contact form from Jim Nielsen's tutorial. It uses a red asterisk for required fields, gives format advice, and highlights the active field.
Form validation
Internal validation can also prevent some contact form diseases. Having to submit and resubmit a form due to entering incorrect data or data in the wrong format is very annoying. As mentioned here, it's best to help visitors by showing the required format (e.g. date, phone number...).
Buttons
There is no contact form without a submit button. It should be at the very end. For the button text, use "send message" instead of "submit" to remind customers what they're doing.
The usual standard since last year is to include a "reset" or "clear form" button. Do not do that. Click on it by accident. There is nothing worse than typing a thoughtfully detailed message and losing it because of the reset button.
Response
The visitor entered his contact information, wrote a message and clicked the "send" button. Now what? Did the message arrive or not?
Reassure your visitors that the message has been sent successfully by displaying an appropriate message. It's also good to use a confirmation email message.
The same advice applies to mistakes. Showing an error on failure to send a message is a necessity that can prevent a lot of future disputes. The error message should be friendly, so avoid displaying alarming error codes.
Contact page design
A lot of things apply to the contact page design. technical requirements, but let's not forget one of highlights: visual styles.
If using a contact form, make the fields large, friendly, and inviting to fill out. White space and padding will serve you well.
Website visitors follow an F-shaped pattern when browsing a web page, so keep this in mind when creating your markup. For contact forms, it's best to arrange all the fields vertically instead of placing them next to each other. This reduces the number of necessary movements of the visitor's gaze when filling out the form.
The contact page should be combined with the visual features of the site. Consistency is the key to excellence. Take a look at this contact page, designed to look like a postcard, for example.
And, as with most web design related tasks; being creative pays off. Neil Patel created his contact page as an infographic, tripling the number of contact requests.
Contact form examples
Speaking of good contact forms, let's take a look at these examples for inspiration (click on the image to visit the related site):
Conclusion
Before designing your contact page, make sure your visitors can find it. Link to it from the main navigation or footer. Remember that most people look for contact information on the right side of the screen.
Consider what information to include. The ability to send a message via email or a contact form is essential. An address and phone number can also be helpful. Additional Information, such as links to profiles in in social networks and hours of operation for some types of business is also needed.
Interactivity is important. Apply the mailto attribute for email addresses and the tel: attribute for phone numbers(very useful for visitors from mobile devices). You can insert an interactive map such as Google Maps, but consider the performance implications.
Contact form usability can make or break a contact page. Request only the most necessary information. You can avoid headaches by showing the correct format of input fields and applying internal validation. Don't forget to display successful submission messages when submitting the form.
