{"id":1708,"date":"2010-11-15T10:24:58","date_gmt":"2010-11-15T10:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/working_with_html\/Advanced\/article15.html"},"modified":"2020-01-31T05:01:42","modified_gmt":"2020-01-31T10:01:42","slug":"how-create-asp-contact-form-html","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-create-asp-contact-form-html.html","title":{"rendered":"How to create an ASP contact form in HTML"},"content":{"rendered":"Let’s learn it at an example. Let’s say one of your pages has a code as follows:\r\n
<form id=\"form\" action=\"\" enctype=\"multipart\/form-data\">\r\n<div class=\"inp_h\">\r\n<input class=\"inp_2\" type=\"text\"  name=\"name\" value=\"Name:\"  onfocus=\"this.value=''\" \/>\r\n<\/div>\r\n<div class=\"inp_h\">\r\n<input class=\"inp_2\" type=\"text\"  name=\"mail\" value=\"E-mail:\"  onfocus=\"this.value=''\" \/>\r\n<\/div>\r\n<div><textarea class=\"inp_3\" rows=\"30\" cols=\"40\"  onfocus=\"this.value=''\">Message:<\/textarea><\/div>\r\n<div style=\"padding:12px 0 0 0;\">\r\n<a href=\"#\" onclick=\"document.getElementById('form').reset()\">\r\n\t<img src=\"images\/clear.jpg\" style=\"border:0px none;\" alt=\"\" \/>\r\n<\/a>\r\n<img src=\"images\/spacer.gif\" alt=\"\" width=\"6\" height=\"1\" \/>\r\n<a href=\"#\" onclick=\"document.getElementById('form').submit()\">\r\n\t<img src=\"images\/send.jpg\" style=\"border:0px none;\" alt=\"\" \/>\r\n<\/a><br \/>\r\n<\/div>\r\n<\/form><\/pre>\r\nThe layout of the contact form can look like this:\r\n
\r\n
On your server you should have a script that will actually generate and send e-mails to a certain e-mail address. A sample of this contact.asp<\/span> script you can download here<\/a>. The ASP script is supported on the most of Windows-based hosting servers.\r\n\r\nOur html form has two tags: opening <form><\/span> and closing <\/form><\/span>. For the form to pass data to our contact.asp<\/span> we need to specify five attributes within this tag:\r\n
<form id=\"form\" method=\"post\"  target=\"_blank\" action=\"contact.asp\" name=\"form\" ><\/pre>\r\n– “Id”<\/span> attribute is a standard for all forms;\r\n– “Method”<\/span> attribute specifies what method is using for sending contact form letters;\r\n– “Target”<\/span> attribute specifies how the message which is telling us that letter was sent will be appear;\r\n– “Action”<\/span> attribute is telling us that we are using ” contact.asp” file as a script for sending letters;\r\n– “Name”<\/span> attribute is a value which is used in contact.asp file.\r\n\r\nThe form we are working with has two text input fields and one text area. The original contact form already has two of them: name=”name”<\/span>, name=”mail”<\/span>, you will also need to set the third name value into the message text area \u2013 name=”message”<\/span>. The resulting <form><\/span> script should look like this:\r\n
<form id=\"form\" method=\"post\"  target=\"_blank\" action=\"contact.asp\" name=\"form\" >\r\n<div class=\"inp_h\">\r\n<input class=\"inp_2\" type=\"text\"  name=\"name\" value=\"Name:\"  onfocus=\"this.value=''\" \/>\r\n<\/div>\r\n<div class=\"inp_h\">\r\n<input class=\"inp_2\" type=\"text\"  name=\"mail\" value=\"E-mail:\"  onfocus=\"this.value=''\" \/>\r\n<\/div>\r\n<div><textarea class=\"inp_3\" rows=\"30\" cols=\"40\" name=\"message\" onfocus=\"this.value=''\">Message:<\/textarea><\/div>\r\n<div style=\"padding:12px 0 0 0;\">\r\n<a href=\"#\" onclick=\"document.getElementById('form').reset()\">\r\n\t<img src=\"images\/clear.jpg\" style=\"border:0px none;\" alt=\"\" \/>\r\n<\/a><img src=\"images\/spacer.gif\" alt=\"\" width=\"6\" height=\"1\" \/>\r\n<a href=\"#\" onclick=\"document.getElementById('form').submit()\">\r\n\t<img src=\"images\/send.jpg\" style=\"border:0px none;\" alt=\"\" \/>\r\n<\/a><br \/>                                                                \r\n<\/div>\r\n<\/form><\/pre>\r\nwhere you can see the code for the Reset<\/span> button:\r\n
<a href=\"#\" onclick=\"document.getElementById('form').reset()\"><img src=\"images\/clear.jpg\" style=\"border:0px none;\" alt=\"\" \/><\/a><\/pre>\r\nAnd the code for Submit<\/span> or Send<\/span> button:\r\n
<a href=\"#\" onclick=\"document.getElementById('form').submit()\"><img src=\"images\/send.jpg\" style=\"border:0px none;\" alt=\"\" \/><\/a><\/pre>\r\nNow lets take one of the templates which doesn’t have the CSS structure<\/span> and uses tables. Here is the default code from the contact form:\r\n
<form action=\"\" id=\"form1\" style=\"margin:0; padding:0 \">\r\n<table style=\"height:213px\">\r\n<tr>\r\n<td style=\"width:239px; padding-left:29px\">\r\n<input type=\"text\" class=\"input3\" value=\"  Your Name:\" \/><br \/>\r\n<input type=\"text\" class=\"input3\" value=\"  Your Fax:\" \/><br \/>\r\n<input type=\"text\" class=\"input3\" value=\"  Your Phone:\" \/><br \/>\r\n<input type=\"text\" class=\"input3\" value=\"  Your E-mail:\" \/>\r\n<\/td>\r\n<td style=\"width:259px\">\r\n<textarea name=\"textarea\" style=\"margin:0 0 11px 0px\" cols=\"35\" rows=\"35\">&nbsp; Your Message:<\/textarea><br \/>\r\n<a href=\"#\" onclick=\"document.getElementById('form1').reset()\" class=\"more_2\" style=\"margin:0 16px 0 107px\">clear<\/a>\r\n<a href=\"#\" onclick=\"document.getElementById('form1').reset()\" class=\"more_2\">send<\/a><br \/>\r\n<\/td>\r\n<\/tr>\r\n<\/table>\r\n<\/form><\/pre>\r\nYou have to insert the same values as in example above, so let’s see how the result code should look like:\r\n
<form id=\"form\" method=\"post\"  target=\"_blank\" action=\"contact.asp\" name=\"form\">\r\n<table style=\"height:213px\">\r\n<tr>\r\n<td style=\"width:239px; padding-left:29px\">\r\n<input type=\"text\" name=\"name\" class=\"input3\" value=\"  Your Name:\" \/><br \/>\r\n<input type=\"text\" name=\"fax\" class=\"input3\" value=\"  Your Fax:\" \/><br \/>\r\n<input type=\"text\" name=\"phone\" class=\"input3\" value=\"  Your Phone:\" \/><br \/>\r\n<input type=\"text\" name=\"mail\" class=\"input3\" value=\"  Your E-mail:\" \/>\r\n<\/td>\r\n<td style=\"width:259px\">\r\n<textarea name=\"message\" style=\"margin:0 0 11px 0px\" cols=\"35\" rows=\"35\">&nbsp; Your Message:<\/textarea><br \/>\r\n<a href=\"#\" onclick=\"document.getElementById('form').reset()\" class=\"more_2\" style=\"margin:0 16px 0 107px\">clear<\/a>\r\n<a href=\"#\" onclick=\"document.getElementById('form').reset()\" class=\"more_2\">send<\/a><br \/>\r\n<\/td>\r\n<\/tr>\r\n<\/table>\r\n<\/form><\/pre>\r\nNow let’s take a look at the contact.asp<\/span> file, what do we need to change here. Open it with your php editor and find the following lines:\r\n\r\n‘—-Settings———–\r\nsubj = “Contact form from your site”      – (here you can change heading message which you will receive in the letter from guest)\r\nmail_from = “admin@tsie.loc”                – (here you need to put your website mail address )\r\nmail_to = “andy@template-help.com”  –  (here you need to put your own email address)\r\nsmtp_server = “localhost”                       – (here you need to put SMTP server name of your server )\r\nsmtp_port = 25                                          – (here you need to put SMTP port of your server)\r\n\r\nIf you don’t know these settings, you need to contact your hosting provider for the details.\r\n\r\n<\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"
\u0412 \u044d\u0442\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443 ASP \u0432 HTML<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[253],"tags":[497,509,2411],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1708"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=1708"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1708\/revisions"}],"predecessor-version":[{"id":86102,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1708\/revisions\/86102"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}