Hang around feedback copy of the letter. Creating a feedback form using standard Joomla tools

One of the most requested elements of the site was and remains the form feedback. It is a convenient way to establish contact between visitors and the site owner. Many webmasters install third-party extensions for organizing a feedback form, but few people know that you can create one and standard means Joomla. This is much more correct since every 3rd party extension requires separate update and tracking vulnerabilities. In this article, I'll show you how to create a spam-proof contact form using standard Joomla tools.

Sometimes it happens that you have been familiar with Joomla for a long time and seem to know this CMS quite well, but one fine day you discover new opportunity, which has been in Joomla all this time, but you didn’t even know about it. The same happens with the feedback form - it is there, but it is quite difficult to find it.

In addition to the standard feedback form, I advise you to try my Wedal Joomla Callback module. It is free and allows you to upload and submit a contact form without reloading the page.

Creating a feedback form using Joomla. Component "Contacts".

Tell me honestly, how many times have you tried to figure out the standard Joomla components that are available immediately after installing it? I don’t know why, but the associations are such that they are the simplest, basic things that are unlikely to ever be needed. In fact, the opposite happens.

Joomla has a standard component called "Contacts". It's easy to understand that it allows you to show on the site a list of contacts of site owners, managers, etc. You will say: “Well, why deal with the whole component, if you can just create an article with the necessary contact information in it?”. In many ways you will be right. But, unfortunately, by doing just that, you will never know that the "Contacts" component allows you to create a separate feedback form for each contact person. Already more interesting?

On the site site you can see an example of such a form:

As you can see, everything you need for communication is available. Visitors use this form quite often. How to create it?

Component "Contacts". Adding a contact.

Go to "Components" -> "Contacts" and add a new contact.

The following form will appear:

Here you specify the name of the contact, and select the user to be associated with the contact. Usually this is the administrator.

In the "Additional Information" field, you can specify some text that you want to show on the contact page.

In the "Contact Details" tab, do not fill in anything.

In the "Display Settings" tab, hide everything superfluous:

In the "Feedback form" tab, we show the form:

We save.

Component "Contacts". Adding a contact menu item.

After the contact is created, you need to show it on the site. To do this, create the item “Contacts” or “Feedback” in the menu and select the type “Contacts” –> “Contact” for it:

After that, in the form that appears on the right, select the contact we created:

And we save.

That's all. You can look at our form on the site.

Important! Be sure to check the functionality of the received feedback form. Sometimes, due to wrong settings sending letters, mail is not sent. This is not a contact form error, but a settings errorJoomla mail management (see general settingsJoomla).

Creating a feedback form using Joomla. Spam protection.

It happens that spam bots roaming the Internet find your form and, since the fields in it are standard, start sending spam to the site owners. The first time, when the form is just created, I advise you not to protect it from spam. Protection should only be used when you're really tormented by advertising, since spam protection complicates the form and reduces the loyalty of the real people who use it.

How to protect the feedback form from spam? Joomla 2.5 has support for probably the best captcha (code from the picture) reCAPTCHA. The activation algorithm is as follows:

1) Getting the keys. To get activation keys, you need to go to the page http://www.google.com/recaptcha/whyrecaptcha and click the "Sign Up Now" button. You will be prompted to log in with your Google account (the reCaptcha service is owned by Google). If not, then you will need to register. After authorization, you will be asked to enter the website address:

And after that, two keys will be generated.

The entire procedure for obtaining keys and using them is free.

2) Go to the site's plugin manager and find the "CAPTCHA - reCAPTCHA" plugin there.

In its settings we see fields for entering keys:

We enter the keys, activate the plugin and save it.

3) Go to the contacts component and open the settings:

In the "Enable CAPTCHA" option, select "CAPTCHA - reCAPTCHA". We save. Ready. Now the captcha will appear in our feedback form.

By the way, reCAPTCHA can be used not only in the feedback form, but also when registering users (activated in the user manager settings).

That's all. In just 5 minutes, you can create a simple and user-friendly contact form for your Joomla site without resorting to third-party extensions.

In contact with

One of the most common tasks in practice is the implementation of a feedback form. Tobish writing its HTML code, styling it in CSS, creating PHP script but, which would process the data received from the user and send them to our mail, writing a JS script that would check the form for the adequacy of the input data, protecting our offspring from spam, so that our mailbox did not collapse from bot attacks.

All of the above points will be considered in our review and commented in detail.

So, let's start creating a feedback form:

HTML

First of all, we write HTML code, it sets the fields that the user will fill in. They will be developed in the future. The form code looks like this:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Name: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Phone: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >Email: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Message: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "send" />

And visually it looks like this now:

I agree, so far everything is ugly and nothing is clear, but we have just begun.

Consider the above code in detail:

• < form method= "post" action= "mail.php" > …

  
  In order to create a form, you need to use the form tag. It is he who determines the beginning and end of the form for the code interpreter. It, like any tag, has a whole set of attributes, but there are only two required for the form to work, these are method (the method of sending a request to the server, post is standardly used for forms) and action (indicates the path to the form handler file, namely in this file will contain a PHP script, which will then send the values ​​entered by the user to us by mail, in our case we see that this file is called mail.php and it lies in the same site directory as the page we are considering).

• < input maxlength= "30" type= "text" name= "name" />

  
  Next we have inputs. These are actually the form fields themselves into which users will enter the information we need (type = "text" indicates that it will be text). The maxlength attribute specifies how many characters the user can enter in the given form field. The most important attribute is name - it specifies the name of a particular field. It is by these names that the PHP script will further process the information coming into it. If desired, you can also set the placeholder attribute, which displays text inside the field that disappears when the cursor is placed inside it. One problem with the placeholder is that it is not supported by some older browsers.

• < label for = "name" >Name:

  
  Used if we have abandoned placeholders. Regular field label, the for attribute tells which field it refers to given signature. The value indicates the name of the field of interest to us.

• < textarea rows= "7" cols= "50" name= "message" >

  
  Just like the input, it is intended for the user to enter information, only this time the field is sharpened for long messages. Rows specifies the size of the field in lines, cols in characters. In general, they set the height and width of our field.

• < input type= "submit" value= "send" />

  
  Type="submit" tells us that this is a button for submitting the form, and value specifies the text that will be inside this button.

• < div class = "right" >

  
  used only for further visual design forms.

css

In order for our feedback form to look presentable, it needs to be designed. To get the following result:

We used this code:

form ( background: #f4f5f7; padding: 20px; ) form . left, form. right ( display: inline- block; vertical- align: top; width: 458px; ) form . right ( padding- left: 20px; ) label ( display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px; ) input, textarea ( border: 1px solid #82858D; padding: 10px; font- size: 16px; width: 436px; ) textarea ( height: 98px; margin- bottom: 32px; ) input[ type= "submit" ] ( width: 200px; float: right; border: none; background: #595B5F; color: #fff; text-transform: uppercase; )

I don’t see the point in describing CSS in detail, I’ll only draw your attention to the key points:

1. It is not necessary to write a design for each tag in the form. Try to build your selectors in such a way that you can style all the elements you need in a couple of lines of code.
2. Do not use extra tags by type to break lines and create indents < br>, < p> and so on, these tasks are perfectly handled by CSS with the property display: block and margin with padding. More about why you shouldn't use < br> in layout, in general, you can read the br tag in the article, but is it really needed? .
3. Do not use tabular layout for forms. This goes against the semantics of this tag, and search engines love semantic code. In order to form the visual structure of the document, div tags are enough for us, and the display: inline-block properties set in CSS (arranges blocks in a row) and vertical-align: top (does not allow them to scatter across the screen), we set them the required height and voila, nothing superfluous and everything is arranged as we need.

For those who want to save their time on the design of sites, I can advise you to use CSS frameworks when creating sites, especially self-written ones. My choice in this regard is Twitter Bootstrap. A lesson on designing forms using it can be viewed.

PHP

Well, it's time to make our form workable.

We go to our root directory of the site and create the mail.php file there, to which we previously specified the path in the action attribute of the form tag.

Ultimately, his code will look like this:

\" javascript: history.back()\" >Go back

You can skip the discussion of the HTML and CSS parts of this document. At its core, this is a regular page of the site, which you can design as you wish and need. Let's consider the most important part of it - the PHP script for processing the form:

$back = "

\" javascript: history.back()\" >Go back

With this line we create a link to return to the previous page. Since we do not know in advance from which page the user will get to this one, this is done using a small JS function. In the future, we will simply refer to this variable to display it in the places we need.

if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) ) ( // internal part of the handler) else ( echo "Please fill in all fields to send a message! $back "; exit; )

Here we fasten the form check for the fullness of the fields. As you guessed, in the $_POST["name"] part, we write the value of the name attribute of our inputs in quotes.

If all the fields are filled, then the script will start processing the data in its internal part, but if at least one field has not been filled, then a message will be displayed on the user's screen with a request to fill in all the fields of the form echo "To send a message, fill in all the fields! $back" and a link to return to the previous page that we created with the very first line.

Next, paste it into the inside of the form handler:

$name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ) ;

Thus, we cleared the user input from html tags and extra spaces. This allows us to protect ourselves from receiving malicious code in messages sent to us.

Checks can be complicated, but it's up to you. We have already set the minimum protection on the server side. We will do the rest on the client side using JS.

I do not recommend completely abandoning form protection on the server side in favor of JS, because although it is extremely rare, there are unique people with JS disabled in the browser.

After cleaning the tags, add the message sending:

mail ( "[email protected]", "Email from your_site_address", "Wrote you: " . $name . "
His number: " . $phone . "
His mail: " . $mail . "
His message: ". $message , "Content-type:text/html;charset=windows-1251") ;

It is this line that is engaged in the formation and sending of a message to us. It is filled in as follows:

1. "[email protected]" - insert your mail between quotes here
2. "Email from your_site_address" is the subject of the message that will be sent to the mail. You can write anything here.
3. "Wrote you: ".$name." < br /> His number is: ".$phone." < br /> His mail: ".$mail." < br /> Its message: ".$message - we form the text of the message itself. $name - we insert the information filled in by the user through accessing the fields from the previous step, in quotes we describe what this field means, with the tag < br /> we do a line break so that the message as a whole is readable.
4. Content-type:text/html;charset=windows-1251 - at the end there is an explicit indication of the data type transmitted in the message and its encoding.

IMPORTANT!

The encoding specified in the "head" of the document ( < meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" /> ), the encoding from the message Content-type:text/html;charset=windows-1251 and in general the encoding of the PHP file must match, otherwise in the messages received by mail, instead of Russian or English letters, “crazy words” will be displayed.

Many do not explicitly specify the encoding of the message being sent, but on some mail clients because of this, problems may arise in the future (unreadable letters arrive in the mail), so I recommend that you specify it anyway.

Checking the form for the adequacy of the input data

So that users inadvertently do not miss the fields and fill in everything correctly, it is worth checking the input data.

This can be done in both PHP on the server side and JS on the client side. I use the second option, because this way a person can immediately find out what he did wrong and correct the mistake without making additional page transitions.

The script code is inserted in the same file where we have the HTML part of the form. For our case, it will look like this:

< script>function checkForm(form) ( var name = form. name. value; var n = name. match(/ ^[ A- Za- zA- Za-z] * [ A- Za- zA- Za-z] + $/ ) ; if (! n) ( alert( "The name was entered incorrectly, please correct the error") ; return false ; ) var phone = form. phone. value; var p = phone. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) ( alert( "Phone entered incorrectly") ; return false ; ) var mail = form. mail. value; var m = mail . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; if (! m) ( alert( "Email entered is incorrect, please correct the error") ; return false ; ) return true ; )

Well, now the usual analysis:

For that, so that when you click on the submit button of the form, we have it validated we hang the launch of our script on the form tag:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Now, point by point, we take the composition of the check:

As you can see, such a mini check is written for each of our fields. I highlighted the check for one field in the screenshot with a red square, for other fields it has a similar structure, and if you need to add a field or remove it, you can now easily do it.

· Igor Zhuravlev

Igor Zhuravlev, Andrey Kurosh, Alexey Chumachenko, Polina Vafina

Igor Zhuravlev, Polina Vafina

You received email, where there are several recipients in the copy. What happens when you click the Reply All button?

A letter will be created, where in the "To" field the address from which you received the original letter will be indicated

· A letter will be created, where in the "To" and "Cc" fields, respectively, all the recipients listed in the original letter will be indicated

An email will be created with an empty "To" field

A letter will be created, where in the "Copy" field the recipients listed in the original letter will be indicated

You received an email from a specific address. There are several more addresses in the "Copy" field. You want to reply only to the person from whose address the letter came. Which button should be pressed?

· To answer

· Reply All

· Create a message

Forward

What is the Go To button used for?

· To set a calendar reminder

To prepare a response on behalf of the manager

· To always mark the email as unread

To forward a letter to a subordinate

Which term is defined below?

· open data

Open Data Passport

666. The definition of what concept is given below:

Open data

Open government data

· Open Data Passport

In what format is data not prepared for an open data set for publication on the Open Data Portal Russian Federation?

XML format

· DOC format

CSV format

Which of the icons will allow you to launch software application to create an open dataset in CSV format?

Table 1

table 2

· Table 1

· Table 2

Which table meets the requirements for publishing an open dataset?

Table 1

table 2

· Table 1

· table 2

Not too long ago, I came across a working method that allows an attacker to send spam on behalf of your site using a Joomla feedback form (contact form). This feature is not a vulnerability and is unlikely to be fixed. In this article, I will talk about how this became possible, and what you need to do to protect your site.

Standard feedback formJoomla

Joomla has a pretty powerful and flexible component called " Contacts". This is a standard Joomla component. It is on every site, because. installed with the CMS. This component allows you to create and display categories of contacts, contacts, feedback forms on the site that allow you to contact one or another contact. A contact is, conditionally, a user - a person from the site.

Once I wrote an article about how you can create a feedback form on the site using standard Joomla tools. This instruction relevant even now. It allows you to create a completely suitable feedback form without installing third-party extensions. Sending spam is possible when this form is used, and also, under the simultaneous concurrence of some circumstances, which will be discussed below.

Sending spam on behalf of the site using the feedback formJoomla

You'd be surprised how easy it was to find a way to send spam on behalf of a site. For it to be possible, the feedback form should look something like this:

Those. two conditions must be met:

1. The form is not protected from spam bots (reCaptcha or any other form protection method is not enabled)
2. In the contact settings, the option "Send a copy of the letter to the sender" is activated. Thanks to it, the corresponding checkbox appears in the contact form (see the figure above).

If at least one of these conditions is not met, there will be no problems. If both conditions are met, then, as they say, watch your hands:

1. The spambot finds the contact form. There is no spam protection - you can use it.
2. The spam bot detects that the site is in Joomla and that the standard contact form is being used. Surprisingly, there are bots that are perfectly able to do this.
3. The spam bot sees the checkbox for sending a copy of the message to the sender.
4. Spam bot substitutes in the field Email address from your own spam mailing list, the message field is filled with spam. It doesn't matter how the rest of the fields are filled in.
5. The spam bot submits the form and repeats the process many times, substituting more and more addresses from its own database in the Email field.

What happens as a result? Joomla thinks that the form was filled out by a person who indicated his real address and wants to contact a contact from the site. Since the checkbox for sending a copy of the letter is checked, two people receive letters from the site: the person whose address is linked to the contact, and the person whose address is entered in the Email field.

Thus, substituting in the field Email different addresses, you can send thousands of messages on behalf of your site. Yes, it is possible that the contact will see this, quickly understand what is wrong, and close the loophole, but it is very likely that this will not happen.

The consequences of such an attack for the site and business can be extremely unpleasant, especially when a lot of money has already been invested to promote the site. If spam is being sent from your domain address, I don't think it's necessary to explain how the recipients will react.

How to protect yourself from this vulnerability?

How to protect yourself from this vulnerability? Elementary. Make it so that one of the conditions described above is not met, viz.