Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Добавление полей в контактную форму в HTML

Этот урок покажет, как добавить поля в контактную форму в HTML . Данный урок – это продолжение туториала Как создать контактную форму в HTML. Если у Вас остались файлы из предыдущего урока, то откройте их, чтобы продолжить работу или же скачайте

Часть 1. HTML

В любом HTML редакторе откройте файл index.html. В нем есть 2 кнопки, созданные элементом input, 1 текстовый элемент и две кнопки, созданные с помощью buttons. Давайте добавим больше разных функций таких как, например, флажки (checkboxes), переключатели (radio buttons) и выпадающий (drop-down) список. Прямо после кнопок Submit (подписать) и Reset (Сброс) добавьте следующий код.

Дополнительные опции:

	<input type="checkbox" name="check[]" value="USA">USA<br />
	<input type="checkbox" name="check[]" value="Canada">Canada<br />
	<input type="checkbox" name="check[]" value="Mexico">Mexico<br />

Вы согласны?

<input type="radio" value="yes" name="cf_radio_button">Yes
<input type="radio" value="no" name="cf_radio_button">No

Выберите элемент из выпадающего списка:

<select size="1" name="cf_drop_down">
	<option>php</option>
	<option>html</option>
	<option>css</option>
	<option>asp</option>
	<option>ajax</option>
	<option>javascript</option>
</select>

Давайте разберем несколько интересных моментов в этом коде. Вы, наверное, обратили внимание, что имена, присвоенные к флажкам, не отличаются, как в случае с добавленным ранее текстовым редактором, и в конце у них стоят квадратные скобки. Скобки определяют, что это переменная массива. Вот как это работает. Для каждого чекбокса, массив check[] получает значение нажатого флажка. Например, после того как Вы выбрали два флажка USA и Canada, массив check[] будет иметь значения checked_usa и check_canada.

Ничего фантастического не происходит с переключателями (radio buttons) и выпадающим (drop-down) списком. К двум переключателям мы привязываем имя «cf_radio_button«, так как нельзя выбрать оба переключателя одновлеменно, то нет необходимости каждому давать уникальное имя.

Синтакс выпадающего списка также очень простой. Откройте тэг <select>, перечислите опции, завернутые в тэги <option>…</option> и в конце закройте тегом </select>. У тэга <select> два атрибута – имя (name) и размер (size). Атрибут size определяет количество видимых опций в выпадающем списке.</select>

Вот такой будет результат после добавления кода.

HTML contact form(нажмите для увеличения)

Часть 2. PHP

Итак, у нас есть элементы на странице. Теперь мы должны обработать переданные данные и добавить в отправленное письмо. Вот конечный код файла contact.php

<?php
// Grabbing data sent from the form and assigning it to variables
$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

// Composing body of the message
$mail_to = 'gordon@template-help.com';
$subject = 'Message from a site visitor '.$field_name;

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message."\n";
$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

// Creating headers of the message
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		alert('Thank you for the message. We will contact you shortly.');
		history.back(1);
	</script>
<?php
}

else { ?>
	<script language="javascript" type="text/javascript">
		alert('Message failed. Please, send an email to gordon@template-help.com');
		history.back(1);
	</script>
<?php
}
?>

Давайте посмотрим, что мы добавили в код и для чего.

Мы будем использовать функцию php foreach() для организации перебора всех элементов массива «check» и для сохранения каждого элемента массива в значение $value. Потом создадим значение $check_boxes и расширим его значением каждого элемента в массиве

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

Как вы видите, радио-кнопки и выпадающий список определяются также как и текстовое поле ввода. Мы создаем PHP переменную и присваиваем ей данные, отправляемые из переключателей (radio box )или выпадающего списка.

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

Эта часть кода аналогична той, что мы создавали раньше. Мы только добавили новые данные в э-мейл

$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

СОВЕТ:Одно маленькое обновление, которое может быть полезно. В предыдущей версии скрипта, после предупреждения JavaScript, стоит перенаправление на страницу, которую Вы указали в коде window.location = ‘contact_page.html’;. Поэтому, если Вы переименовываете contact_page.html на что-то другое, Вам нужно будет изменить имя файла в contact.php. Лучше было бы заменить этот код на этот

history.back(1);

Обычно код сам объясняет, что он делает. Это тоже самое, что и нажатие в браузере кнопки Back/Назад.

  • no1jester

    great guide i just have 1 question
    can i just insert the information on the contact page into a page on my webpage instead of the «contact» page?

    No votes yet.
    Please wait...
    • Аноним

      Yes you can do this.

      No votes yet.
      Please wait...
  • Brian

    This guide was quite helpful and I learned a few valuable things. However, I found that the resulting email message did not contain ANY headers. I didn’t know any PHP before this, but when I experimented and changed ‘$cf_email’ in the headers section to ‘$field_email’, my problem was resolved. Perhaps this was a typo?

    No votes yet.
    Please wait...
  • Gordon J. Blair

    Thank you Brian for noting the error. The code has been corrected

    No votes yet.
    Please wait...
  • wcs

    i dont seem to be getting sent an email i change where i saw your email to mine as well as $mail_to = ‘my email’ it comes up saying the mail was sent successfully but i never receive anything any ideas?

    No votes yet.
    Please wait...
  • wcs

    i seem to be struggling a little i dont get an error but i also dont receive the email but i get the msg saying it has been sent

    No votes yet.
    Please wait...
    • Аноним

      Please make sure you set the correct email adress to receive messages.Also make sure your mail server is configured correctly. You can contact your hosting provider to check mail server.
      Also please contact our technicians using our online help desk at http://esupport.template-help.com/index.php?/Tickets/Submit, they will provide you with further assistance.

      No votes yet.
      Please wait...
  • Amechi Ofozor

    Thank you for the wonderful and explicit exposition of these codes. However, i woul like to know where to put the contact.php , because i put mine in the public_html yet i don’t receive emails sent by visitors on the website. Your candid response is appreciated.

    No votes yet.
    Please wait...
    • Gordon J. Blair

      The contact.php file should be placed into the same directory as the .html file with the contact form. So if your contact_page.html file is for example in folder /public_html/test/ then the .php file should be there as well

      No votes yet.
      Please wait...
  • Kim Harrison

    Hi,
    Thank you very much for this tutorial! I’m finding that it’s not working for me.. and I’m sure it’s something I’m doing wrong.

    When I click submit, it changes to an error page and when I look at the link, it’s actually gone to the contact.php page. Is this supposed to happen?

    Also, I’m not sure if this is the reason why, but for my website, I’m using php files and I’m using the php includes for things such as the navigation, footer and the contact form. These are in a separate folder called includes. The form is also in this folder but I also put the contact.php file in there too.

    What am i doing wrong?

    No votes yet.
    Please wait...
    • Gordon

      Can’t say for sure where the source of the issue lies. Please, submit your issue to our Online Help Center http://esupport.template-help.com/index.php?_m=tickets&_a=submit and provide FTP access so we could investigate the issue

      No votes yet.
      Please wait...
  • Steve

    Great help and thank you!

    Can you please tell me how I can add a phone number between the email and message fields?

    No votes yet.
    Please wait...
    • Аноним

      This cab done the same way as described in the tutorial, but instead of readio button or select box use the text input:

      No votes yet.
      Please wait...
      • Steve

        Great, got it. One thing more — I am trying to get the info coming back to me to include «From». The info only comes back in the subject part of the email and the from is blank.

        Here is the code from the contact.php — What do I need to add to get the from in the from instead of all in the subject? Thanks Steve.

        <?php
        $field_name = $_POST['cf_name'];
        $field_email = $_POST['cf_email'];
        $field_phone = $_POST['cf_phone'];
        $field_message = $_POST['cf_message'];

        $mail_to = 'steve@emailaddress.biz';
        $subject = 'Message from contact visitor '.$field_name;

        $body_message = 'From: '.$field_name."n";
        $body_message .= 'E-mail: '.$field_email."n";
        $body_message .= 'Phone: '.$field_phone."n";
        $body_message .= 'Message: '.$field_message."n";

        $headers = 'From: '.$cf_email."rn";
        $headers .= 'Reply-To: '.$cf_email."rn";

        $mail_status = mail($mail_to, $subject, $body_message, $headers);
        ……

        No votes yet.
        Please wait...
        • Gordon

          there was a small error in the tutorial files. Replace
          $headers = ‘From: ‘.$cf_email.»rn»;
          $headers .= ‘Reply-To: ‘.$cf_email.»rn»;

          with

          $headers = ‘From: ‘.$field_email.»rn»;
          $headers .= ‘Reply-To: ‘.$field_email.»rn»;

          The code in the files and tutorial has been updated

          No votes yet.
          Please wait...
  • Steve

    How do you add captcha security to the form?

    No votes yet.
    Please wait...
    • Аноним

      Adding captcha is an additional customization and is beyond of our sphere of free support services. We recommend you to search google. It offers a lot of affordable solutions

      No votes yet.
      Please wait...
  • Victor Chia

    Great tutorial. Is there a way where i could custom style the pop-up mail status message? please advise.

    No votes yet.
    Please wait...
    • Аноним

      Unfortunately it’s not possible to change the pop-up window style in this contact form example. You can only do that if you are using the JavaScript based contact form.

      No votes yet.
      Please wait...
  • Brock

    Hello, Im hoping someone can help. I am also using the contact.php code provided by template monster, but I can’t get the code to work 100%.

    I get one of the following things happen:

    1) if i use…

    $headers = ‘From: ‘.$cf_email.»rn»;
    $headers .= ‘Reply-To: ‘.$cf_email.»rn»;

    …I recieve an email, but I get 2 «undefined variable» error msgs for the above 2 lines.

    2) if I use…

    $headers = «From: $cf_emailrn»;
    $headers .= «Reply-To: $cf_emailrn»;

    …no email will send, but no error msgs either?

    Please help, it’s driving me mad!

    No votes yet.
    Please wait...
    • Аноним

      Please replace the variable $cf_email with $field_email

      No votes yet.
      Please wait...
  • Gordon

    If you get full php code of the file, it means PHP is not installed or enabled on the server. You need to consult with your host provider

    No votes yet.
    Please wait...
  • Satyam Saini

    Hi..

    could you please design the php form for the code below?

    Name (required)

    Email (required)

    Website

    Thank you!

    No votes yet.
    Please wait...
    • Аноним

      We regret but our team do not offer customization services. You can contact our partner at templatetuning.com and get any kind of customization there.

      No votes yet.
      Please wait...
  • Alex Ross

    You should use unique names for your select boxes like cf_drop_down1 and cf_drop_down2. Then in PHP you can use:
    $drop_down_item1 = $_POST[‘cf_drop_down1’];

    $drop_down_item2 = $_POST[‘cf_drop_down2’];

    No votes yet.
    Please wait...
    • mistergookey

      I figured it out a few minutes after commenting in the end but thanks anyway!

      No votes yet.
      Please wait...
  • Teriann Shrum

    THANK YOU for this tutorial. I just needed a very simple contact form and you provided it with excellent instruction!

    No votes yet.
    Please wait...
 
Чат
We help you to choose the right product.
Начать чат