Responsiveness of contact information. Building a better contact page

Telephone

Good afternoon friends! In this tutorial, I will teach you how to create a WordPress contact form using plugins. A WordPress Contact Form is the perfect solution for anyone looking to keep in touch with their audience or receive email requests for a service. We will learn with you how to make a pop-up form in a modal window. After reading this article, you will be able to embed the form on your sites yourself. So let's go.

Why do you need a WordPress contact form?

You may be surprised by the question why do I need a feedback form on the WordPress site? Why not just add an email address to the site so people just write to me?

This is the most common question from newbies who are afraid to add form code to a site without programming knowledge. Truth be told, you don't need any code at all when creating a WordPress contact form. In this tutorial, we will create a contact form step by step, and even the most complete beginner can do it.

Below are the top 3 reasons why using a form is better than just adding an email address to your website.

- spambots with enviable regularity snatch through their parsers mail addresses where there is a mention of the mail domain and enter it into their database in order to send you unwanted correspondence later. On the other hand, when using the WordPress feedback form, you get rid of the problem of the dominance of SPAM emails to your mailbox.
Completeness of information - when they send mail, people don't always send all the information you need. With the help of the contact form, you yourself determine which fields you need to make it easier for users to send you an email (name, email, phone number, comment, and more).
Save time - WordPress contact form can save you time. In addition to the completeness of the information that you requested from the user and that he will send you, you can also indicate what awaits in the next step, for example "Your application will be reviewed within 24 hours" or Watch the video and many other useful things.

Below is an example of a contact form that we will be creating in this tutorial.

Let's start, gentlemen.

Step 1: Choosing the Best WordPress Contact Form Plugin

At this step, we need to decide on the choice of the appropriate form plugin. There are a great variety of them, both free and paid. In this tutorial I will tell you about different plugins so that you have a wide choice. In the first case, the WPForms plugin will be involved.

Below are the reasons WPForms is the best feedback plugin:

First, it is the most beginner-friendly plugin. By simply dragging and dropping the blocks you need, you can create a contact form in a few clicks.
WPForms Lite is completely free.
When you are ready for more powerful functionality and if it really matters to you, then you can upgrade to the Pro version.

Great, if these reasons were sufficient and I convinced you, then let's move forward.

Step 2: Installing WordPress Contact Form Plugin

For this tutorial we are using the Lite version because it is free and easy to use. You can install it by logging into your blog and going to Plugins - Add New.

In the search bar, type the name of our plugin and click Install now.

After installing the plugin, make sure you activate it. This is shown here:

Step 3: Create a Contact Form in WordPress

So, after successfully completing the plugin activation, it's time to create our feedback form. To do this, in the blog admin panel, click on the WPForms Menu tab and go to Add New.

This will open the Wpforms builder for you, where you can create a WordPress contact feedback form by simply dragging and dropping the blocks you want. There are two pre-built templates available in the free Lite version (blank and simple form). You can use them together to create the one that is right for you. In this example, we have chosen the second option for you, i.e. a simple contact form. Add a name, Email and a text field to it.

You can click on each field to edit it. You can also drag and drop the form fields using the mouse.

If you want to add a new field, just select the one you need from the list on the left and drag it to the work area.

When you're done, just click the Save button.

Step 4: Configuring Notifications and Confirmations

Once you have successfully created a WordPress contact form, it is very important to set up your notification and confirmation forms correctly.

The confirmation form is what your users see when they send you a request from the form. This can be a thank you message or you can redirect them to another dedicated page.

A notification form is the messages you receive when you receive a new application or email from your WordPress site.

You can customize both of these fields by going to Setting inside the WPForms Form Designer Plugin.

We did not set to touch by default and left the Confirmation Form field with the message "Thank you for your contact" as it is. However, you have the right to change it to a different text or redirect the user to a separate page.

The best thing about this plugin is that the default settings are just perfect for newbies. They don't need to figure out what to do or what to change. Everything is very intuitive and simple. When you go to the notification settings, all fields will be dynamically pre-filled.

By default, notifications are sent to the mail that you specified in the settings. If you want to change the destination for sending notifications, you can also easily change it. If you want to specify several mail addresses (separated by commas), then please, hand the cards, as they say 🙂

The Email Subject field will be automatically filled in with your form name. The name field will be taken from the username (your name). When you reply to a letter, it will go to the mail with the name of the user who filled out the contact form.

Step 5: Adding a WordPress Contact Form to the Page

At this step, when you have built and configured the feedback form, you need to create a separate "Contacts" page for it, where you can place it. Either you create a new one, or you edit an existing page where you can add it.

We will use a simple shortcode to insert a form into the page. Just click on the "Add form" button and select the name of your form to insert it into the page.

Fine. Now save the page and open the preview to see the changes.

This is how the form will roughly look on a simple WordPress page:

If you just want to add a form to a page, then congratulations. All steps have been completed successfully. If you want to add it as a widget to your sidebar, continue below.

Step 6: Adding a WordPress Contact Form to the Sidebar

The WPForms plugin comes with a built-in feedback form widget that you can add to your sidebar or any other area on your site (like the footer).

To do this, we need to go to the "Appearance" -\u003e Widgets section. There you will see the pre-installed form plugin widget on the left side. Simply drag and drop to set the display order in the desired area in the sidebar.

The next step is to specify the name of the widget and save. Go to the site and see the result.

This concludes our review of our WPForms contact form plugin. But, especially for you, I have prepared another review of one free plugin, with which we can make a pop-up feedback form and all the same features as in the previous one. It is called Contact Form 7. It is really very powerful and its trump card is that it is completely FREE!

It can also be made responsive, that is, the feedback form will adapt to the screen size of your device.

So, just in case, so you know they are J

How to make a contact feedback form using Contact Form 7

We continue to understand the issue of creating forms for accepting applications from your site. Ahead we have another WordPress contact form plugin called Contact Form 7. Let's install it on our blog and activate it as we can.

It's already installed on my site, not on this blog. The procedure is standard. Now we need to go to the blog admin area and create a new form that will collect us applications and other useful information. Go to the section "Contact Form 7" -\u003e Add new.

Fine! Now let's give it an appropriate name, in my case there are a lot of these contact forms. Let's choose one, for example "Site promotion order form"

I will briefly tell you what we need here. First of all, we need to decide how many form fields we want to make. I must say right away that there is no need to do 100,500 fields and it is pointless, for the simple reason that people will close your site and will not leave a request. They need to make this step easier. That is, if you think about it, then we need from a person that:

His name to refer to (personal appeal)
Mail address (feedback, where to send him an offer)
A phone number to call immediately (if it happens quickly, it will become your client anyway)
The "Submit" button itself

These are basic data, others you can already find out in the course of correspondence or telephone conversation. Is it logical? I think yes. Let's move on.

Creating Contact Form Fields in the Contact Form 7 Plugin

So, we have decided on the number of fields, now we need to create these fields. The following tabs are available to us:

Text (Any text field, for example "Name", "Ask a question", or any other name that you will collect through this field)
Email (there is only one purpose for the user to enter)
URL (the site address will be entered in this field, other values \u200b\u200bare not acceptable, an error will be generated)
Tel (a field with a phone number for our contact form on WordPress, numeric values \u200b\u200bare allowed, the text will give an error)
Number (A numerical range of values, you can apply, for example, to the price: "how much are you willing to pay for the site? From 23,000 to 120,000 rubles")
Date (We indicate the date, from which to what date. Example: "Booking a car from 13/04/2016 to 25/04/2016")
Text Area (text area, you can enter text here as a comment)
Drop-Down Menu (Drop-down list). Implemented on my blog, you can take a look. At the end of each article, I suggest that users create either a simple website or an online store. This is the functionality that this option provides.
Checkboxes (multiple choice, for example: Website + Logo design + promotion + contextual advertising)
Radio buttons (Selecting a single item, for example: "You order either contextual advertising or targeted")
Acceptance (You accept the terms of the agreement, i.e. user information, such as a public offer)
Quiz (Quiz is a series of short questions, you can also insert it into the contact form).
reCaptcha (Confirmation that you are not a robot and will not spam.) Good protection against SPAM. Note: this option works if you have connected the Really Simple Captcha plugin.
File (If you want to allow users to upload a file to you, for example: "Attach the technical specification for the development of the site").
Submit

So, we have decided on the fields, you also know the meaning of each. Let's get down to building our WordPress contact form.

In the example below, I used 2 fields: Name, Email. Accordingly, you need these tabs:

By clicking on the text tab (Text) we get into the dialog box:

Here we need to click on the checkbox Field Type - Required. Made so that if the user does not enter a name in it, then he will not be able to send you an application, there will be a sending error, that not all fields are filled in correctly.

Then you will see a shortcode for inserting this field and next to it a blue Insert Tag button. This will add one new contact form field.

So that you don't get confused, I highlighted it with style. Code below:

< div class = "col-md-4" > < label class = "sr-only" > Full Name< / label > [text * text - 658 class: form - control placeholder "(! LANG: Your name" ] !}< / div >

And here is the screen:

We do a similar operation for the "Email" field. We click on the appropriate tab and find ourselves in such a dialog box.

Absolutely no different from the previous one, we just repeat our actions with you. My email field also has a style. Below is the code:

< div class = "col-md-4" > < label class = "sr-only" > Full Email< / label > [email * email - 447 class: form - control placeholder "(! LANG: Your Email" ] !}< / div >

And here is the screen:

And finally, the "Submit" button. She's all about styles.

< 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, which means it can accept forms of any screen size.

You will see the button in the upper right corner. You certainly won't miss. 🙂

We have done some of the work, now we move on to the next stage.

Setting up a mailing address for receiving applications

At this step, we need to make some settings so that the letters go exactly to our mailbox. I will explain below how to achieve this.

We need to click on the large "Letter" tab. It will be the second after the Form Template.

The first thing that you will see is your tags that you added, we need to insert them into the body of the letter, it is they who will substitute the data that the user enters from the form. I think I explained it clearly.

Now by fields:

To (Where the application will be sent, in my case, this is my email address, you can specify several addresses where to send applications)
From (The From field, that is, the value will be substituted that the request comes from my studio site)
Subject (Serves to determine from which form the application comes, 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 (The body of the message, here you indicate from whom the letter came and from which address, for example: "From: Ivan" "Mail address: vasya @ mail. ru »)
File Attachments (I do not touch the attachments to the file)

Now we need to set up notifications about successful or unsuccessful sending of an email from a WordPress contact form.

These will be messages that will be shown to the user in response to his actions with the form. They are in English by default. I have translated into Russian 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.

If the message is successfully sent: “Your message was sent successfully. Thank you."
When sending a message from the form incorrectly: “Error sending message. Please try again later or contact the site administrator. "
Fill error: “Fill errors. Please check all fields and submit again. "
Submitted data is 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 filled in: "Please fill in a required field."
Exceeded the length of characters in the field: "Too much data specified."
Insufficient length of characters in the field: "There is too little data specified."
Invalid date format: "The date format is invalid."
Early date at minimum: "The date is too early."
Late date at maximum limit: "The date is too late."
Failed file upload: "Failed to upload file."
Unauthorized file type: "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: “Uploading file failed. An error has occurred. "
The number format entered by the sender is invalid: "The number format is invalid."
The number is less than the minimum limit: "This number is too small."
The number is greater than the maximum limit: "This number is too large."
The sender did not enter the correct answer to the question: "You have 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 well. We have finished setting up the form, now we need to insert it into the site. To do this, using the already known technology, go to an existing page or create a new one. In my example, I'll show you an example of an existing form on a WordPress site page.

Since our form collects applications for website promotion, we will 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 a text editor (not visual). Presented in the screenshot below:

Let's save our page and see what happened in the end in the browser:

Super! Now let's try submitting the form to it without filling out anything. And this is what we will see.

An error occurred while submitting from the form because the user did not enter the required data in the fields. Now let's enter the correct data and see what we get in this case.

Click submit and this is what our form writes:

Now let's see how our application looks like. They come to my mailbox. Check delivery:

Let's go inside to make sure that the encoding and all data are correct.

Everything is alright. The form is working properly and submitting data. Now we can collect applications that will come to you when you start, if we are talking about regional promotion.

So, we've covered how to create a WordPress contact form on a website page. Now I will tell you how to do pop-up responsive feedback form using our plugin Contact form 7.

Making a pop-up responsive contact feedback form in WordPress

In order for our form to become responsive, that is, "rubber", we need to connect one more plugin, or rather its addition to Contact Form 7 - it is called Bootstrap Contact Form 7. Install and just activate it and that's it - it works. You don't need to make any settings with it. Installed and forgotten.

In the next step, I'll tell you what changes need to be made to make our form pop-up and responsive. I made a similar implementation on the main page of my studio site. To do this, go to the index.php template, which is located in the "Appearance - Editor" section. We will only work with the code, manually.

Our popup form will display in a modal dialog box like this:

To achieve this result, you need the following code, I'll show it in full in the snippet:

To order

< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" > To 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" > & times;< / span > < span class = "sr-only" > Close< / span > < / button >

< h4 class = "modal-title black" id = "myModalLabel" > Submit your application< / h4 >

< / div >

Responsive web design is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Google "s algorithms should be able to automatically detect this setup if all Googlebot user agents are allowed to crawl the page and its assets (CSS, JavaScript, and images).

Responsive design serves all devices with the same code that adjusts for screen size.

TL; DR

Use the meta name \u003d "viewport" tag to tell the browser how to adjust the content.
Check out Web Fundamentals for more documentation.

Using meta name \u003d "viewport"

To signal to browsers that your page adapts to all devices, add a meta tag to the head of the document:

As a general rule, if your site works in a recent browser such as Google Chrome or Apple Mobile Safari, it would work with our algorithms.

Why responsive design

We recommend using responsive web design because it:

Makes it easier for users to share and link to your content with a single URL.
Helps Google "s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop / mobile pages.
Requires less engineering time to maintain multiple pages for the same content.
Reduces the possibility of the common mistakes that affect mobile sites.
Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user agent-based redirection is error-prone and can degrade your site "s user experience (see Pitfalls when detecting user agents for details).
Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site "s content and keep it appropriately fresh.

If you "re interested in responsive web design, start with our blog post on Webmaster Central and visit the Web Fundamentals site.

Important: Be sure not to block the crawling of any page assets (CSS, JavaScript, and images) for any Googlebot using robots.txt or other methods. Being able to fully access these external files helps our algorithms detect your site "s responsive web design configuration and treat it appropriately. Caution: To make sure your implementation is successful, avoid the common mistakes.

JavaScript

One part of building mobile-friendly sites that requires careful consideration is the use of JavaScript to alter the rendering and behavior of the site on different devices. Typical uses of JavaScript include deciding which ad or which image resolution variant to show in the page.

This section describes different approaches to using JavaScript and how they relate to Google "s recommendation of using responsive web design.

Common configurations

Three popular implementations of JavaScript for mobile-friendly sites are:

JavaScript-adaptive: In this configuration, all devices are served the same HTML, CSS, and JavaScript content. When the JavaScript is executed on the device, the rendering or behavior of the site is altered. If a website requires JavaScript, this is Google "s recommended configuration.
Combined detection: In this implementation, the website uses both JavaScript and server-side detection of device capabilities to serve different content to different devices.
Dynamically-served JavaScript: In this configuration, all devices are served the same HTML, but the JavaScript is served from a URL that dynamically serves different JavaScript code depending on the device "s user-agent.

Let "s look at each of these configurations in detail.

JavaScript-adaptive

In this configuration, a URL serves the same contents (HTML, CSS, JavaScript, an image) to all devices. Only when the JavaScript is executed on the device is the rendering or behavior of the site altered. This is similar to how responsive web design, using CSS media queries, works.

As an example, a page serves all devices the same HTML that includes a

2. Page header

In the page header

place the following container elements:
logo ;
button to show / hide the main menu

;
Main menu

;
site search form

3. Block with a summary of the article

Wrap the announcement of articles with an element

Design

Spring

The Russian language is very rich in words related to the seasons and natural phenomena associated with them.

...

4. Side column

To the side column

5. Footer

In the footer of the page, we will post information about the copyright, social media buttons and a link to email:

6. General CSS styles

General styles, reset browser default styles:

*, *: after, *: before (box-sizing: border-box; padding: 0; margin: 0; transition: .5s ease-in-out; / * add smooth transitions for all page elements * /) ul ( list-style: none;) a (text-decoration: none; outline: none;) img (display: block; width: 100%;) h1, h2, h3, h4, h5, h6 (font-family: "Playfair Display "; font-weight: normal; letter-spacing: 1px;) body (font-family:" Open Sans ", arial, sans-serif; font-size: 14px; line-height: 1; color: # 373737; background: # f7f7f7;) / * add a stream cleaner for all containers that have children wrapped inside * / header: after, .container: after, footer: after, .widget-posts-list li: after, #subscribe: after (content: ""; display: table; clear: both;) / * style class that controls the width of the grid container * / .container (margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px ;)

7. Styles for the header and its contents

header (width: 100%; background: white; box-shadow: 3px 3px 1px rgba (0,0,0, .05); padding: 15px 0; margin-bottom: 30px; position: relative;) / * logo * / .logo (display: block; float: left;) .logo span (color: white; display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; margin: 5px 0; text-align: center; text-shadow: 2px 2px 1px rgba (0,0,0, .4);) .logo span: nth-child (odd) (background: # EF5A42;) .logo span: nth-child (even) (background: # F8B763;) / * menu * / #menu (float: right;) #menu li (display: inline-block; margin-right: 30px;) #menu a (color: # 111; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; display: block; line-height: 40px;) #menu a: hover (color: # EF5A42;) #menu li: last-child (margin-right: 0;) / * search form * / #searchform (float: right; margin-left: 46px; display: inline-block; position: relative;) #searchform input (width: 170px; float: left; border: none; padding-left: 10px; height: 40px; overflow: hidden; outline: none; color: # 9E9C9C; font-style: italic; ) #searchform button (background: transparent; height: 40px; border: none; position: absolute; right: 10px; color: # EF5A42; cursor: pointer; font-size: 18px;) #searchform input: focus (outline: 2px solid # EBEBE3;) / * menu toggle button that appears at 768px width * / .nav-toggle (display: none; position: relative; float: right; width: 40px; height: 40px; margin-left: 20px; background: # EF5A42; cursor: pointer;) .nav-toggle span (display: block; position: absolute; top: 19px; left: 8px; right: 8px; height: 2px; background: white;) .nav-toggle span: before , .nav-toggle span: after (content: ""; position: absolute; display: block; left: 0; width: 100%; height: 2px; background: white;) .nav-toggle span: before (top: -10px;) .nav-toggle span: after (bottom: -10px;) / * the class that will be added to the top menu when the button is clicked and will show the hidden menu * / # menu.active (max-height: 123px;)

8. Styles for the block with the main content

/ * left container * / .posts-list (margin-bottom: 30px; width: 64%; float: left;) / * post block * / .post (margin-bottom: 35px;) .post-content p ( line-height: 1.5; padding-bottom: 1em;) .post-image (margin-bottom: 30px;) .category (margin-bottom: 15px;) .category a (color: # F8B763; text-transform: uppercase; ) .post-title (margin-bottom: 12px; font-size: 26px;) / * block with "continue reading" button and social media buttons * / .post-footer (border-top: 1px solid # EBEBE3; border- bottom: 1px solid # EBEBE3; position: relative; margin-top: 15px;) .more-link (position: relative; display: inline-block; font-size: 10px; text-transform: uppercase; color: white; line -height: 44px; padding: 0 22px; background: # 3C3D41; letter-spacing: 0.1em; white-space: nowrap;) .more-link: after (content: ""; display: block; position: absolute; width : 0; height: 0; top: 0; right: 0; border: solid transparent; border-width: 22px 18px; border-left-color: # 3C3D41; transform: translateX (100% ); ) .post-social (position: absolute; left: auto; top: 50%; right: 0; text-align: right; transform: translateY (-50%); padding: 0; font-size: 12px;). post-social a (display: inline-block; margin-left: 8px; color: # F8B763; width: 25px; height: 25px; line-height: 23px; text-align: center; border-radius: 50%; border : 1px solid;)

9. Styles for the side column

/ * right container * / aside (width: 33%; float: right;) / * block for widgets * / .widget (padding: 20px 15px; background: white; font-size: 13px; margin-bottom: 30px; box -shadow: 3px 3px 1px rgba (0,0,0, .05);) .widget-title (font-size: 18px; padding: 10px; margin-bottom: 20px; text-align: center; border: 2px solid # F8B763; box-shadow: 3px 3px 0 0 # F8B763;) .widget-category-list li (border-bottom: 1px solid # EBEBE3; padding: 10px 0; color: # c6c6c6; font-style: italic;). widget-category-list li: last-child (border-bottom: none;) .widget-category-list li a (color: # 626262; margin-right: 6px; font-style: normal;) .widget-category- list li a: before (content: "\\ f105"; display: inline-block; font-family: "FontAwesome"; margin-right: 10px; color: # c6c6c6;) .widget-posts-list li (border-top : 1px solid # EBEBE3; padding: 15px 0;) .widget-posts-list li: nth-child (1) (border-top: none;) .post-image-small (width: 30%; float: left; margin-right: 15px;) .widget-post-title (float: left ; ) / * subscription form * / #subscribe (position: relative; width: 100%; padding: 15px 0;) #subscribe input (width: 100%; display: block; float: left; border: 2px solid # EBEBE3; padding : 0 0 0 10px; height: 40px; position: relative; outline: none; color: # 9E9C9C; font-style: italic;) #subscribe button (padding: 0 15px; background: transparent; height: 40px; border: none ; position: absolute; right: 0; color: # EF5A42; cursor: pointer; font-size: 18px;) #subscribe input: focus + button (background: # EF5A42; color: white;)

10. Styles for the footer

Divide the site footer into three equal columns:

Footer (padding: 30px 0; background: # 3C3D41; color: white;) .footer-col (width: 33.3333333333%; float: left;) .footer-col a (color: white;) .footer-col: last- child (text-align: right;) .social-bar-wrap (text-align: center;) .social-bar-wrap a (padding: 0 7px; font-size: 18px;)

11. Media queries

@media (max-width: 768px) (/ * show the button to toggle the top navigation * / .nav-toggle (display: block;) header (padding: 10px 0;) / * hide the top menu, cancel the wrapping, position it, shifting to the site header height * / #menu (max-height: 0; background: white; float: none; position: absolute; overflow: hidden; top: 63px; right: 0; left: 0; margin: 0; padding: 0; z-index: 3;) / * make the list items blocky so that they fit one under the other * / #menu li (display: block; text-align: center; border-bottom: 1px solid # EBEBE3; margin-right : 0;) / * de-wrap left and right columns, set them to 100% * / .posts-list, aside (width: 100%; float: none;) .widget-post-title (font-size: 1.5em ;)) @media (max-width: 480px) (/ * unwrap the logo and align to the center * / .logo (float: none; margin: 0 auto 15px; display: table;) .logo span (margin: 0 2px;) / * position the menu to the increased header height * / #menu (top: 118px; ) / * position the search form to the left * / #searchform (float: left; margin-left: 0;) / * remove the top and bottom borders and align the button to the center * / .post-footer (border-top: none; border-bottom: none; text-align: center;) / * cancel positioning of social media buttons * / .post-social (position: static; text-align: center; transform: none; margin-top: 20px;) .widget- post-title (font-size: 1.2em;) / * de-wrapping for footer columns * / .footer-col (float: none; margin-bottom: 20px; width: 100%; text-align: center;). footer-col: last-child (text-align: center; margin-bottom: 0;))

12. Script for the mobile menu

The jQuery code, which we previously added to the page markup before the closing tag, is responsible for showing / hiding the top menu when the button is clicked (the menu height is toggled - from zero to equal to its content) :

Nowadays, having a responsive design is the sacred duty of any site, especially if your site is commercial. Because the mobile audience is growing at an impressive rate. Yes, you will say that the mobile audience has been growing for a long time, for many years, but now it is a new trend and growth is almost exponential. Smartphones are ubiquitous. If you are selling something, then responsive design is vital for you.

According to the statistics of Yandex reports, despite the general mobilization, users buy more from computers than smartphones, but at the same time choose goods and services more through mobile devices. Google says that nearly half of its users are looking for products from a smartphone.

According to MediaScope, the mobile audience is growing faster than others, with an increase of 15% in 2017. The aggregate mobile audience is 66 million people, which is 54% of the total population (2017). At the same time, the number of desktop users is decreasing.

According to the Kommersant newspaper, the Russian Internet audience in the mobile segment grew in 2017 from 47% to 56%. Moreover, the growth occurs at the expense of the older generation, because among young people the level of Internet use has long reached its maximum limit.

The largest network service provider Cisco is testing 5G networks due in 2020. Cisco predicted mobile traffic to grow by 2021 in 2016 sevenfold.

According to research by the online store Rechi, which sells shoes and accessories, it was noticed that mobile shoppers have become more determined. Smartphone users began to buy even when they were in line, at lunch or before bed.

What is responsive design?

Responsive web design has appeared since 2011, but despite this, until now, a large proportion of sites on the Russian Internet are crookedly displayed on mobile devices. For example, the menu can clutter up the entire screen, or, on the contrary, the site layout goes beyond the edges of the screen and you have to use terribly inconvenient horizontal scrolling, even turning the screen will not help you here. Also, without the adaptive version, the text from the smartphone will be very small, it is generally impossible to read it.

Adaptive Web Design is the design of website pages, built in such a way that all elements dynamically adjust to the screen, depending on its size, in order to display only the most important elements on the screen in limited conditions. The smaller the screen, the fewer objects on it, only the most important remains. On large screens, we are used to seeing a bunch of sidebars, menus, widgets and other similar things on the website, which, in fact, are rarely used. Therefore, in the adaptive version, only the really important and functional remains. For example, for an online store this is a hat with a phone, a transforming menu and goods, the rest is superfluous, but this is enough for a purchase.

It is generally accepted that responsive design for mobile devices needs to be designed in advance, even before the creation of the site, therefore, perhaps the valiant webmaster will be disappointed. But this is a big misconception, so it is not at all necessary to completely change the entire site template just for the sake of adaptability or completely change the entire CMS. You can adapt your current site very quickly, without any major changes or complications.

Is there a difference between responsive and responsive website layout?

In fact, there is a difference between responsive and adaptive. Once upon a time, when smartphones did not even think to conquer the planet, layout designers and programmers started an argument. Which optimization method for mobile devices is better: method (RWD - responsive) or method (AWD - adaptive). The difference is that the responsive method changes the size of elements in percentages: images, videos, blocks, etc. But the responsive design does not rely on the size of the browser, but focuses on the user and has three predefined layouts: for a smartphone, a tablet, notebook.

Nowadays, both options are used in responsive layout, they complement each other. The layout (grid) of the page can be radically rearranged in control points that correspond to the sizes of the three main types of screens: monitors, tablets, smartphones. Within the breakpoints, the layout stretches to fill the empty space with elements. Thus, the website will look optimal, whatever the screen size.

Why should a website be responsive?

Search engines are focusing more and more attention on mobile site adaptation every year. A separate search for mobile devices has already appeared. For example, Yandex uses the Vladivostok algorithm, which takes into account the suitability of the site for mobile devices, therefore, if your site is not adapted to mobile devices, then the visitor, when entering a request via a smartphone, will not see your site in the search results. And if the site is still in the search results, then it is far at the very bottom

Without a responsive mobile version, visitors will experience difficulties on your site, which will negatively affect the behavioral factors of the entire site. When a visitor opens the full bulky version on a smartphone, most likely they will immediately close your site without even trying, and each such visitor will spoil the behavioral factors. Behavioral factors strongly influence SEO rankings, including the time spent on the site, the number of pages viewed. The implementation of the adaptive version solves all these problems, without any side effects. In some projects, site traffic can grow up to 40%.

Convenient analytics system in Google Analytics and Yandex.Metrica. The systems automatically detect the mobility of your site and generate ready-made reports with statistics on traffic and conversions made via mobile devices. This is great for determining the mobility of your audience.

There are no downsides to responsive layout. There is only one drawback: the older generation does not like overly simplified and large elements, they are used to large screens and a huge number of small items in the menu.

Which is better: mobile or responsive?

One way to optimize for smartphones is to create a separate mobile version of the website that only opens from smartphones. Determination of the device type occurs on the server side. Recently, it is used less and less often, because it costs much more than an adaptive layout, and is more difficult to develop and maintain. The mobile version is only suitable for very complex and non-standard web services.

Unscrupulous large agencies take advantage of this by cheating customers. After all, the cost of implementing a separate mobile version is several times higher than the implementation of an adaptive layout, so it is more profitable for them to dissuade you from the adaptive version.

Why is a responsive website better than a mobile version?

In a responsive layout, changes to the code will be displayed immediately for all devices. For example, if you need to change or add new important functionality. In the case when the site has a mobile version, you will have to make changes in both versions. And so every time, which doubles the spending on programmers and layout designers.
In a responsive site, content is not duplicated, unlike the method when a mobile version of the site is created.
The address on the page for desktop and smartphone in the adaptive version remains the same, so you do not have to set redirects every time.
There is no need to generate content on separate pages for mobile and standard devices every time.
In addition, Google announced at one of the Digital October conferences in December 2016 that you need to make an adaptive version, and the mobile version is utter nonsense.

Life hack! Did you know that website adaptation for mobile can be done much cheaper than you think? Because, in fact, this does not require any great effort and the work is done in a short time without any consequences for your site. As a rule, web studios offer daring price tags: from 10,000 rubles to 20,000 rubles, and in fact, adaptation can be ordered for just 500 rubles remotely on the freelance exchange Kwork.

How to make a mobile version of the site?

Before embedding a responsive layout in your site, you need to plan the layout, for this you need to determine which elements to keep and which ones to remove. And do it separately for the smartphone and for the tablet. The space on the smartphone and tablet is limited, so we will have to sacrifice not too important blocks and leave only functional elements and only what helps the visitor.

By the way, on WordPress, most of the new premium themes support the mobile version, as well as amp pages. We've got a complete guide to read and build responsive WordPress sites.

For example, side bars usually perform an informative function, sliders, etc. The menu is too long, and in the plentiful version it turns into an endless party, so it is removed into a separate button. It's the same with the long search field. Items should not be close to each other to exclude pressing two items at the same time.

Greetings to my readers, I have gained some experience and will tell you about the principles of the php feedback form. I'll show you with illustrative examples so that you understand how everything works and how the interaction between the input form itself (its input fields) and the handler file written in php occurs. In addition, you can download the sources for free along with.

Of course it will be great if you know a little about HTML / CSS. By analogy, you will have to drag the code onto your page. We will not touch the PHP language, I will show all the necessary edits that need to be done for myself.

UPDATE: According to the responses of the readers, I realized that something more beautiful and functional is needed, meet, read and see. Choose which one you like best)

UPDATE2: Version 3.0 Responsive Landing Page + ajax form with passing UTM tags, read and see. You'll like it

I remembered myself when I first tried to make my own feedback form in php, and to be honest, it was laborious, because did not understand what was happening and how. Patience and perseverance are friends and you will succeed.

Php feedback form - structure

We will study the analysis of the feedback form itself using the example of a landing page (Landing Page), by the way, there is a separate article on. You can see how it works in action using the buttons below, I attach the sources of this one-page page and the main file of the php handler (this file will process and send the letter to email)

After downloading the sources and unpacking the archive, you will see the following file structure:

image - all images that are used for the Landing Page itself, buttons, etc.
js - javascript scripts that provide, for example, a popup modal on the page and other visual effects
index.html - our one-page index file
index1.php - a handler file to which values \u200b\u200bfrom the form are passed, then a letter is formed from the received variables and sent to the specified email address. Also, index1.php will act as an intermediate page for notification of successful sending of data with automatic redirection back to index.html (i.e. our one-page page)

It is important that your hosting, where the site files are located, supports php processing, otherwise the index1.php file will not be executed and will not work. To clarify this nuance, contact the campaign where your hosting is registered or just test it - it works, it means there is support. If not, enable php language support option

Take a look at how all elements interact (page, form, handler)

The source code of the form call and handler

Let's take a look at the operation of one of the buttons, which invokes a modal pop-up window that contains a feedback form. This given source code is more than once, two inserted into the page and it will work, you yourself will have to customize it to your design and needs.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Request a call back

Below is the complete source code of the index1.php handler, in order to configure sending to your mailbox, change “ [email protected]»On your own, the rest, in principle, can be left unchanged

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

"; // from whom $ send \u003d mail ($ address, $ sub, $ mes," Content-type: text / plain; charset \u003d utf-8 \\ r \\ nFrom: $ email "); ini_set (" short_open_tag ", "On"); header ("Refresh: 3; URL \u003d index.html");?\u003e You will be contacted