In response to such a question, the first thing that comes to mind is: “Comfortable and working.” And this is generally logical. Otherwise, what is the point of having a beautiful form on the site? feedback, which is not used? But first things first.
Many forms - one goalLet's start with what are feedback forms on the website for? The website owner must be able to reach the visitors of his website. People strive to save their time on searching for information about the products they need, clarifying their qualities and characteristics, prices, and, most importantly, placing an order. Feedback forms are an important channel through which communication occurs between a site visitor and its owner, seller and buyer. If this communication channel does not work or is inconvenient for the visitor, he may abandon the idea of contacting you, and, therefore, the idea of becoming your real client.
How regularly and actively feedback forms are used on your website will tell about your website no worse than visit analytics.
This logically follows the conclusion that has already been stated above - feedback forms must be convenient and must work!
It is worth noting that the second part of this conclusion depends not only on correct programming. From the technical side, the form may work perfectly, but the operator must quickly respond to requests coming from the site. Otherwise, feedback forms will be useless. If the operator calls the visitor back in two days, the need to order a product or service from the person may simply disappear.
There can be a great variety of feedback forms (“Order a call back”, “Ask a question”, “Leave a review”, “Fill out an order form”, “Contact a manager”, etc.), and they can be used for different tasks. But everyone will have essentially the same goal - to ensure a connection between a site visitor and its administrator or owner, to obtain the visitor’s contacts for further interaction with him.
Seven tips to rememberLet's remember a few simple rules, which must be taken into account when developing and posting FOS on the site.
The form should be positioned so that it is convenient for the visitor to find it.
Place the form in a visible place - so that your site visitor does not have to make an effort to find a feedback form among many different elements on the page or endlessly scroll down the page.
Traditionally, forms can be placed in the website header or on the contact page.
If necessary, you can duplicate key forms in the footer so as not to force visitors who have viewed the entire page to scroll up again:
If there are pages with products or services that are subject to special offer and the visitor can receive it through an online order, place a quick call or order form on this page.
In addition, this will allow you to “hook” a visitor who is already interested in the product or service. The visitor looked at the description, guarantees, prices, decided that the product or service suits him, and so, we immediately offer him, without leaving this page, to leave a request to order this service.
The form must be displayed and work equally correctly on all devices and in all browsers.
Or briefly - check the cross-browser and cross-platform compatibility of the feedback forms on your site. The form can be visible and easy to fill out from a laptop or desktop computer, but on a tablet the data entry field may be too narrow and inconvenient for entering text with touch screen. Will the client then try over and over again to enter their details in order to contact you? The answer is obvious.
The form should be short and clear.
What does it mean? The form should not consist of large quantity fields or filling steps. Unless, of course, there is a strict need for this. People strive for simplicity; they don’t want to spend a lot of time figuring it out and filling out ten thousand fields.
If the service involves receiving quite detailed information, simplify the task for the client (if this is possible, of course). Highlight a few key fields that need to be filled out:
Looks more convenient than, for example:
It’s better to call back and verbally clarify everything you need, but make it easier for the visitor to fill out the form. And thereby increase the chances that he will contact you!
Continuing the theme of clarity, pay attention to the fact that the form has a title - “Order a call back”, “Order a call to a surveyor”, “Order a free consultation”, etc. It is better to duplicate the same header in electronic notifications that will come from the form to your email. Then not only will the visitor to your site not get confused and forget the application for what exactly he is filling out. But you yourself will receive clear information about what information was of interest to the visitor who submitted the request. This will help you quickly navigate further communication with the visitor and build a dialogue correctly.
The form should have a pleasant and practical design.
All fields must be clearly visible. If you use a lot of colors when creating a form design, you should pay attention to ensure that there are not too many of them, that they are combined and not overly bright. The person filling out the form should not strain their eyesight. The same applies to choosing colors for text messages.
It is better to avoid combining dark on dark. If, for example, on a dark blue background you make a dark red or dark green inscription “Your message has been sent,” it simply will not be visible.
The form must contain a call to action.
A small touch that encourages the visitor to take or complete an action. In our case, send a message from the site!
It is also better to highlight the button in a contrasting color. Together with a call to action, this will make it noticeable and attract the visitor's attention.
The form should roll up easily.
So, the form is easy to find, it has a nice design, and is convenient to fill out. What else?
Don't forget to ask the developers to add a "cross" to the form so that you can close it. Or configure the form to automatically collapse after filling it out.
It seems like a small thing, but it can spoil the overall picture.
For example, a visitor left a request on the site and wants to return to viewing the site. BUT! The form hangs, does not disappear, and it is not clear how to close it. Or another option - the visitor changed his mind about writing a request, and decided to call himself. It may turn out unpleasant.
Setting up a response message.
Something like that…
The person sending the message wants to be sure that their message will be received and considered by you. Technically, setting up an automatic notification will not take much time, but it will strengthen the visitor’s confidence that his message will not go unanswered. This is usually used in those forms where you need to indicate your email. However, modern services allow you to set up automatic alerts via SMS.
SummarizingThere are a lot of subtleties and other details: you can experiment with shape and design, you can add unobtrusive graphics on the topic, etc. But the basic criteria do not change. To all that has been said above, I would like to add a big, but important, wish - periodically check the operation of the feedback forms on the site. Technical glitches should not be an obstacle to your business!
The feedback form, or to put it another way, is one of the most important elements of any website. And of course, like all other elements of the user interface, contact elements must be somehow externally stylized and designed in order to attract the attention of users and encourage communication.
I offer for your consideration a couple of options for styles of feedback forms, exclusively by means of 3, without the use of additional images in the design. Nothing superfluous, just short code fragments (snippets) for contact forms, made in light and dark colors.
Depending on the color of the main background of the page, the basic background color of the form itself will visually change. The size of the form depends on the size of the container in which the form will be placed.
The Html form framework is standard, the necessary input fields and a “Submit” button are required for linking with CSS, each form element is assigned a specific class, nothing complicated, it won’t be difficult to understand.
| < form> < input name= "name" placeholder= "Enter your name!" class = "name" required /> < input name= "emailaddress" placeholder= "Enter your Email!" class = "email" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Enter your message:" class = "message" required> < input name= "submit" class = "btn" type= "submit" value= "Send" /> |
CSS
I won’t go into much detail about the styles, I’ll just note one thing: I used some CSS3 properties in the design, a linear gradient, a shadow effect, slightly rounded corners, etc., I tried to achieve some cross-browser compatibility for these properties, but in older versions of browsers, the form will be still look a little different ((.
| /* Basic form style */ form ( margin: 0 auto; max- width: 95 %; padding: 30px 30px 6px 30px; border: 1px solid rgba(0 , 0 , 0 , .2 ) ; - moz- border- radius : 5px; - webkit- border- radius: 5px; border- radius: 5px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; background: rgba( 0 , 0 , 0 , 0.5 ) ; - moz- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; - webkit- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; box-shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; overflow: hidden; ) /* Message field */ textarea( background: rgba(255 , 255 , 255 , 0.4 ) ; width: 100%; height: 110px; border: 1px solid rgba(255 , 255 , 255 , .6 ) ; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; display: block; font- family: "Open Sans", sans- serif; font-size: 18px; font-weight: 300; color: #fff; padding-left: 25px; padding- right: 20px; padding-top: 12px; margin- bottom: 20px; overflow: hidden; ) /* Input fields */ input ( width: 100%; height: 48px; border: 1px solid rgba(255 , 255 , 255 , .4 ) ; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; display: block; font- family: "Open Sans" , sans - serif; font- size: 18px; font- weight: 300; color: #fff; padding- left: 20px; padding- right: 20px; margin- bottom: 20px; ) input[ type= submit] ( cursor: pointer; ) input. name ( background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; ) input. email ( background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; ) input. message ( background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; ) ::- webkit- input- placeholder ( color: #fff; ) :- moz- placeholder( color: #fff; ) : :- moz- placeholder ( color: #fff; ) :- ms- input- placeholder ( color: #fff; ) input: focus, textarea: focus ( background- color: rgba(0 , 0 , 0 , 0.2 ) ; - moz- box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , .5 ) ; - webkit- box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , .5 ) ; box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , . 5 ) ; overflow: hidden; ) /* Styles for the submit button */ . btn ( width: 138px; height: 44px; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; float: right; border: 1px solid #253737; background: #416b68; background: - webkit- gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: - webkit- linear- gradient(top, #6da5a3, #416b68); background: - moz - linear- gradient(top, #6da5a3, #416b68); background: - ms- linear- gradient(top, #6da5a3, #416b68); background: - o- linear- gradient(top, #6da5a3, #416b68); background- image: - ms- linear- gradient(top, #6da5a3 0%, #416b68 100%); padding: 10. 5px 21px; - webkit- border- radius: 6px; - moz- border- radius: 6px; border - radius: 6px; - webkit- box- shadow: rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(255, 255, 255, 0.7) 0 1px 0; - moz- box- shadow: rgba( 255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; box-shadow: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255, 255, 0.7) 0 1px 0; text-shadow: #333333 0 1px 0; color: #e1e1e1; ) . btn: hover ( border: 1px solid #253737; text- shadow: #333333 0 1px 0; background: #416b68; background: - webkit- gradient(linear, left top, left bottom, from(#77b2b0), to(# 416b68)); background: - webkit- linear- gradient(top, #77b2b0, #416b68); background: - moz- linear- gradient(top, #77b2b0, #416b68); background: - ms- linear- gradient(top , #77b2b0, #416b68); background: - o- linear- gradient(top, #77b2b0, #416b68); background- image: - ms- linear- gradient(top, #77b2b0 0%, #416b68 100%); color: #fff; ) . btn: active ( margin- top: 1px; text- shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: - webkit- gradient(linear, left top, left bottom, from( #ffCC00), to(#ff6600)); background: - webkit- linear- gradient(top, #ffcc00, #ff6600); background: - moz- linear- gradient(top, #ffcc00, #ff6600); background: - ms- linear- gradient(top, #ffcc00, #ff6600); background: - o- linear- gradient(top, #ffcc00, #ff6600); background- image: - ms- linear- gradient(top, #ffcc00 0% - moz - box-shadow: rgba(255, 255, 255, 0) 0 1px 0, inset rgba(255, 255, 255, 0. 7) 0 1px 0; box-shadow: rgba(255, 255, 255, 0) 0 1px 0, inset rgba(255, 255, 255, 0.7) 0 1px 0; outline: none; ) |
/* Basic form style */ form ( margin: 0 auto; max-width: 95%; padding: 30px 30px 6px 30px; border: 1px solid rgba(0,0,0,.2); -moz-border-radius : 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: rgba( 0, 0, 0, 0.5); -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0 ,.5); box-shadow: 0 0 13px 3px rgba(0,0,0,.5); overflow: hidden; ) /* Message field */ textarea( background: rgba(255, 255, 255, 0.4) ; width: 100%; height: 110px; border: 1px solid rgba(255,255,255,.6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background -clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display: block; font-family: "Open Sans", sans-serif; font-size:18px; font-weight : 300; color:#fff; padding-left:25px; padding-right:20px; padding-top:12px; margin-bottom:20px; overflow:hidden; ) /* Input fields */ input ( width: 100%; height: 48px; border: 1px solid rgba(255,255,255,.4); -moz-border-radius: 4px; -webkit-border-radius: 4px; border- radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display: block; font-family: "Open Sans", sans-serif; font -size:18px; font-weight: 300; color:#fff; padding-left:20px; padding-right:20px; margin-bottom:20px; ) input ( cursor:pointer; ) input.name ( background: rgba( 255, 255, 255, 0.4); padding-left:25px; ) input.email ( background: rgba(255, 255, 255, 0.4); padding-left:25px; ) input.message ( background: rgba(255, 255, 255, 0.4); padding-left:25px; ) ::-webkit-input-placeholder ( color: #fff; ) :-moz-placeholder( color: #fff; ) ::-moz-placeholder ( color: #fff; ) :-ms-input-placeholder ( color: #fff; ) input:focus, textarea:focus ( background-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); box-shadow: 0 0 5px 1px rgba(255,255,255,.5); overflow: hidden; ) /* Styles for the submit button */ .btn ( width: 138px; height: 44px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; float:right; border: 1px solid #253737; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: -webkit-linear-gradient(top, # 6da5a3, #416b68); background: -moz-linear-gradient(top, #6da5a3, #416b68); background: -ms-linear-gradient(top, #6da5a3, #416b68); background: -o-linear-gradient (top, #6da5a3, #416b68); background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%); padding: 10. 5px 21px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; text-shadow: #333333 0 1px 0; color: #e1e1e1; ) .btn:hover ( border: 1px solid #253737; text-shadow: #333333 0 1px 0; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to (#416b68)); background: -webkit-linear-gradient(top, #77b2b0, #416b68); background: -moz-linear-gradient(top, #77b2b0, #416b68); background: -ms-linear-gradient (top, #77b2b0, #416b68); background: -o-linear-gradient(top, #77b2b0, #416b68); background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100% ); color: #fff; ) .btn:active ( margin-top:1px; text-shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: -webkit-gradient(linear , left top, left bottom, from(#ffCC00), to(#ff6600)); background: -webkit-linear-gradient(top, #ffcc00, #ff6600); background: -moz-linear-gradient(top, # ffcc00, #ff6600); background: -ms-linear-gradient(top, #ffcc00, #ff6600); background: -o-linear-gradient(top, #ffcc00, #ff6600); background-image: -ms-linear -gradient(top, #ffcc00 0%, #ff6600 100%); color: #fff; -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; outline: none; )
Maybe this will be interesting to you: 2. Contact form in light colorsThe second design option for the feedback form is presented in light colors; the dimensions of the form (width, height), as in the first option, are not fixed, and will easily fit into the dimensions of the container where this form will be located.
As in the first option, the Html structure of the contact form is standard, form elements with certain classes corresponding to the classes in CSS.
| < form> < input name= "name" placeholder= "Enter your name!" class = "textbox" required /> < input name= "emailaddress" placeholder= "Enter your Email!" class = "textbox" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Enter your message:" class = "message" required> < input name= "submit" class = "button" type= "submit" value= "Send" /> |
CSS
When forming the basic sizes of forms and internal elements, I used percentage values for the width, thanks to which the form can easily be adjusted to the dimensions of the container in which it will be located. The color scheme of the “Send” button, its size and location can be easily changed, just experiment with certain values.
| /* Basic form styles */ form( margin: 0 auto; max- width: 95%; box- sizing: border- box; padding: 40px; border- radius: 5px; background: RGBA(255 , 255 , 255 , 1 ) ; - webkit- box- shadow: 0px 0px 15px 0px rgba(0 , 0 , 0 , .45 ) ; box- shadow: 0px 0px 15px 0px rgba(0 , 0 , 0 , .45 ) ; ) /* Margin styles input */ . textbox( height: 50px; width: 100%; border- radius: 3px; border: rgba(0 , 0 , 0 , .3 ) 2px solid; box- sizing: border- box; font- family: "Open Sans" , sans-serif; font-size: 18px; padding: 10px; margin-bottom: 30px; ) . message: focus, . textbox: focus( outline: none; border: rgba(24 , 149 , 215 , 1 ) 2px solid; color: rgba(24 , 149 , 215 , 1 ) ; ) /* Textbox styles */ . message( background: rgba(255 , 255 , 255 , 0.4 ) ; width: 100%; height: 120px; border: rgba(0 , 0 , 0 , .3 ) 2px solid; box-sizing: border- box; - moz - border- radius: 3px; font- size: 18px; font- family: "Open Sans" , sans- serif; - webkit- border- radius: 3px; border- radius: 3px; display: block; padding: 10px; margin - bottom: 30px; overflow: hidden; ) /* Basic button styles */ . button( height: 50px; width: 100%; border-radius: 3px; border: rgba(0 , 0 , 0 , .3 ) 0px solid; box-sizing: border- box; padding: 10px; background: #90c843; color: #FFF; font- family: "Open Sans" , sans- serif; font- weight: 400; font- size: 16pt; transition: background. 4s; cursor: pointer; ) /* Change the button background on hover */ . button: hover( background: #80b438; ) |
/* Basic form styles */ form( margin:0 auto; max-width:95%; box-sizing:border-box; padding:40px; border-radius:5px; background:RGBA(255,255,255,1); -webkit -box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); ) /* Input field styles */ . textbox( height:50px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 2px solid; box-sizing:border-box; font-family: "Open Sans", sans-serif; font-size:18px; padding:10px; margin-bottom:30px; ) .message:focus, .textbox:focus( outline:none; border:rgba(24,149,215,1) 2px solid; color:rgba( 24,149,215,1); ) /* Text field styles */ .message( background: rgba(255, 255, 255, 0.4); width:100%; height: 120px; border:rgba(0,0,0,.3 ) 2px solid; box-sizing:border-box; -moz-border-radius: 3px; font-size:18px; font-family: "Open Sans", sans-serif; -webkit-border-radius: 3px; border -radius: 3px; display:block; padding:10px; margin-bottom:30px; overflow:hidden; ) /* Basic button styles */ .button( height:50px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 0px solid; box-sizing:border-box; padding:10px; background:#90c843; color:#FFF; font-family: "Open Sans", sans-serif; font-weight:400; font-size: 16pt; transition:background .4s; cursor:pointer; ) /* Change the button background on hover */ .button:hover( background:#80b438; )
There are a lot of design options for contact forms, the main thing is to have a little imagination and basic knowledge of CSS. On the pages of my blog, you can find others and examples of the style of feedback forms.
For those who are especially inattentive, I want to clarify, once again: the forms presented in the article are just outer shell In order for the forms to actually perform their functions, you need to attach a script handler to them, of which there are plenty scattered on the Internet, so please do not write in the comments that the forms do not work, etc., everything works great, you just need understand what, where and why))).
With all respect, Andrew.
Hello, dear friends and blog guests! Website feedback is one of the most significant features that allows a blogger to communicate with his visitors. But there is one catch - plugins that display feedback for the site weigh a lot!
For some time now, I’ve been busy making my blog lighter and decided to get rid of unnecessary plugins that weigh it down with their weight and prevent pages from loading quickly. And first of all, my choice fell on the feedback form, or rather on the plugin that displayed it on my website “Contact Form 7”, and it also needed a second plugin that displayed the captcha “reCaptcha”. This is how I decided to get rid of two rather significant plugins at once, using a feedback form that does not require any plugins and is easy to install on the site. Now I’ll tell you about it and, of course, I’ll let you download the files so that you can create similar feedback for your site...
And so, having finally removed the plugins for creating a feedback form from my site, I began to create an easy and reliable feedback form without using any plugins. And this is what I got:
You can view and check the functionality of my feedback form for the site on the “ “ page. Write in my contact form on the website and I will answer you!
Now let's move on to the most important thing and create our own feedback for the site, independent of any plugins...
We provide feedback for the site without plugins!All we need for this: my blog site with the article “Feedback for the site”, a text editor and of course your desire to create your own contact form on the site to make it easier by getting rid of unnecessary and heavy plugins!
Here is the HTML code of the feedback form for the site, which you can paste onto your site or blog anywhere, for me this is the contact page:
Feedback form
What is your name
Message subject
send a message
Please note some important things you need to do in this code:
You must upload this file to your hosting in the root folder of the site engine! But first check whether you have fixed it or not!
In the line where the text “YOUR HOSTING EMAIL ADDRESS” is written! “, you need to correct it to your E-mail address that is on your hosting. If you don’t have an email account on your hosting, be sure to create one. It is not difficult!
Now you need to connect a script that connects the jQuery library on the site for the correct operation of our “feedback for the site” system. First, check on your website, maybe this script is already installed, if you don’t know how to do this, ask a question to support at your hosting.
Here is the script:
Or you can add this function to your WordPress functions.php file:
Function my_jquery() ( wp_deregister_script("jquery"); wp_register_script("jquery", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"); wp_enqueue_script("jquery" ); )
It replaces the script and also includes the jQuery library on the WordPress site.
Now we connect a script on our website that will work together with the mail.php file, sending your letters. To do this, we need to create a js file like contact.js and send it to your website in the folder with scripts of your active theme, which is called js. If you don’t have it on your website, then create it!
Here is the script:
JQuery(document).ready(function($) ( $("#contact").submit(function() ( var str = $(this).serialize(); $.ajax(( type: "POST", url : "YOUR DOMAIN/wp-content/themes/YOUR THEME/mail.php", data: str, success: function(msg) ( if(msg == "OK") ( result = "Message sent"; $(" #fields").hide(); ) else (result = msg;) $("#note").html(result); ) )); return false; )); ));
Almost done! Now all we have to do is upload the styles to yours on our hosting CSS file, which is responsible for styling the site's theme. If this is not done, then our newly created feedback for the site will not be beautiful and monochromatic.
Here is the style code for the feedback form for the site:
Form#contact ( border:1px solid #e5e5e5; padding:10px; background:#e9ffd0; border-radius:5px; ) #contact label ( font-size: 14px; ) #contact input:required:valid ( box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; background: #fff url(images/valid.png) no-repeat 98% center; ) #contact textarea:required:valid ( box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; ) #contact input:focus:invalid ( box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; background: #fff url(images/invalid. png) no-repeat 98% center; ) #contact textarea:focus:invalid ( box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; ) .err ( border: 1px solid #ff8c00; padding: 10px; background: #FFDF97; text-align: left; border-radius: 3px; ) .ok ( border: 1px #BCEF89 solid; margin-bottom: 15px; padding: 10px; background: #f5f9fd; text-align: center ; border-radius: 3px; ) #author, #email, #url ( width: 30%; padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; ) #comment ( padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; overflow: auto; ) #submit ( font-weight: 400; background: #393; font-size: 15px; color: #fff ; padding: 10px 50px; border: none; cursor: pointer; )
Just copy them and send them to the style.css file of your active theme on the site. If you then want to change the colors and shape, but this is only for advanced users!
Now our feedback for the site is completely ready for use. Test it and enjoy its work!
That's all!
If you liked this material? Then click on the social buttons, subscribe to blog updates and write your comment below!
The feedback form for the site that I will show you is based on the use of Ajax technology. But don’t worry, you don’t need to know this, everything is already ready, all you have to do is install this form and customize it for yourself!
Guys, the script is outdated a long time ago. For some it works, for others it doesn’t. And I’m too lazy to figure it out, let alone update it. So test at your own discretion.
PHP feedback form sent by emailThis website feedback form is very functional in itself, it comes with several plugins that create an attractive appearance and check the validity (read correctness) of the data you entered. These plugins work on the great and mighty! And they are called like this:
1. JQTransform– a plugin that allows you to make our feedback form beautiful!
2. formValidator– and this plugin checks the contact form for the correctness of the entered information and, if something happens, displays tooltips!
For the full operation of this form, the class PHPMailer will be used. Considered one of the best!
Note for the smart ones:
The feedback form for the site can be made in HTML! But it will start working only with the help of PHP! And nothing else!
This is me for those who are looking for a feedback form only in HTML. You'll do it, but it won't work!
Therefore, yours must support PHP, and for this contact form, PHP must be at least version 5. I hope I'm making it clear? Moreover, now, any normal hosting supports these conditions!
I dug up this feedback form on the website www.tutorialzine.com, the link leads directly to the original page, i.e. website of the author of this form!
Everything there is in English, so Sasha and I had to tinker a little to Russify this form contacts and the plugins themselves that are connected to it.
To be honest, we fiddled with this “form” for two days, because various bugs began to pop up, and we didn’t want to post a feedback form that was not fully completed, especially such a beautiful one! So if you are a fan of doing everything yourself, and the thought pops into your brightest head - to Russify this form yourself, I’ll give you a couple of tips, since you won’t limit yourself to simply translating phrases:
1. This feedback form is tailored for the bourgeoisie, and was downloaded from there, so it will send you krakozyabl instead of normal Russian characters. Understand the coding. And in general, all the “seals” will be associated with this!
2. The validation script initially does not understand our letters, so they will need to be written there!
3. Even after these steps, if you specify the subject of the letter in Russian, the letter arrives with the subject - No subject (I hope I wrote it correctly), this can be cured if you specify the encoding in the PHPMailer class file.
4. In the original form, the text in the input fields was pressed to the bottom, and not in the middle. This is a glitch in the JQTransform plugin.
Well, it seems like everything was written out and warned. Let's move on!
From the author: Greetings, friends. This article will be a continuation, in which we implemented sending form data to the server without reloading the page. Here we will continue this topic and learn how to receive data on the server and implement sending a form to email. So, let's set up a feedback form and add the ability to send it by email.
You can download the source files of the current article from .
In this lesson we will do everything as simply as possible and on our own. Specifically, to send emails, we will use a special PHP function called mail(), which was often used to send emails in the past.
Let's start with the syntax of the mail function. This function has three required parameters and two optional (not required). Required parameters:
to — recipient’s email (you can also specify several addresses, listing them separated by commas);
subject — subject of the letter;
message — text of the letter.
Of the optional parameters, only the first one is almost always used, which is responsible for the letter headers: encoding, sender, letter type, etc.
Let's try sending an email using this function. Let's do this in the mail.php file, in which we accept data from the form. New code this file will be like this: