{"id":399,"date":"2024-02-09T05:01:38","date_gmt":"2024-02-09T05:01:38","guid":{"rendered":"http:\/\/www.phpgang.com\/?p=399---d1b5fa46-c28b-47c9-8474-cc7a209b8bf5"},"modified":"2024-02-09T05:01:38","modified_gmt":"2024-02-09T05:01:38","slug":"how-to-create-contact-form-using-bootstrap","status":"publish","type":"post","link":"https:\/\/www.phpgang.com\/how-to-create-contact-form-using-bootstrap_399.html","title":{"rendered":"How to create Contact Form using Bootstrap"},"content":{"rendered":"

Today I am going to a very basic tutorial<\/a>\u00a0on Bootstrap (front-end framework for faster and easier web development<\/strong>) and this is very simple and easy to configure and make your websites powerful at front-end, in this article I am explaining you with a contact form which is very simple and easy to use in your web designs<\/strong>.<\/p>\n

\"How<\/p>\n

[wpdm_file id=50]DEMO<\/a><\/div>\n

Here is HTML<\/a> for the design:<\/p>\n

<div class=\"container\">\r\n      <form class=\"contact-us form-horizontal\" method=\"post\">\r\n        <legend>Contact Form<\/legend>        \r\n        <div class=\"control-group\">\r\n            <label class=\"control-label\">Name<\/label>\r\n            <div class=\"controls\">\r\n                <div class=\"input-prepend\">\r\n                <span class=\"add-on\"><i class=\"icon-user\"><\/i><\/span>\r\n                    <input type=\"text\" class=\"input-xlarge\" name=\"name\" placeholder=\"Name\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"control-group\">\r\n            <label class=\"control-label\">Email<\/label>\r\n            <div class=\"controls\">\r\n                <div class=\"input-prepend\">\r\n                <span class=\"add-on\"><i class=\"icon-envelope\"><\/i><\/span>\r\n                    <input type=\"text\" class=\"input-xlarge\" name=\"email\" placeholder=\"Email\">\r\n                <\/div>\r\n            <\/div>    \r\n        <\/div>\r\n        <div class=\"control-group\">\r\n            <label class=\"control-label\">Url<\/label>\r\n            <div class=\"controls\">\r\n                <div class=\"input-prepend\">\r\n                <span class=\"add-on\"><i class=\"icon-globe\"><\/i><\/span>\r\n                    <input type=\"text\" id=\"url\" class=\"input-xlarge\" name=\"url\" placeholder=\"https:\/\/www.phpgang.com\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"control-group\">\r\n            <label class=\"control-label\">Comment<\/label>\r\n            <div class=\"controls\">\r\n                <div class=\"input-prepend\">\r\n                <span class=\"add-on\"><i class=\"icon-pencil\"><\/i><\/span>\r\n                    <textarea name=\"comment\" class=\"span4\" rows=\"4\" cols=\"80\" placeholder=\"Comment (Max 200 characters)\"><\/textarea>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"control-group\">\r\n          <div class=\"controls\">\r\n            <button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\r\n          <\/div>    \r\n        <\/div>\r\n      <\/form>\r\n<\/div><\/pre>\n
In this HTML code we are showing a full grid view and form elements with icons:\u00a0<i class=”icon-user”><\/i>\u00a0<\/em>This will show a user icon in-front of text box there is many icons in bootstrap like\u00a0pencil,\u00a0globe or\u00a0briefcase etc.<\/p>\n
Here is the libraries of bootstrap required to make its design:<\/p>\n
<link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\" media=\"screen\">\r\n<script type=\"text\/javascript\" src=\"js\/jquery-1.8.0.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/bootstrap.min.js\"><\/script><\/pre>\n
These are the files you have to include in you html form.<\/p>\n
The above theme support only wide screens but if you are looking for responsive use this css to enable it on all screen sizes.<\/p>\n
<link href=\"css\/bootstrap-responsive.min.css\" rel=\"stylesheet\" media=\"screen\"><\/pre>\n
All together:<\/strong><\/p>\n
Lets merge this complete article examples and show complete HTML code for this.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\" media=\"screen\">\r\n<link href=\"css\/bootstrap-responsive.min.css\" rel=\"stylesheet\" media=\"screen\">\r\n<script type=\"text\/javascript\" src=\"js\/jquery-1.8.0.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/bootstrap.min.js\"><\/script>\r\n<title>How to delete comments with jQuery | PGPGang.com<\/title>\r\n<\/head>\r\n\r\n<body>\r\n<h2>How to delete comments with jQuery example.&nbsp;&nbsp;&nbsp;=> <a href=\"https:\/\/www.phpgang.com\/\">Home<\/a> | <a href=\"http:\/\/demo.phpgang.com\/\">More Demos<\/a><\/h2>\r\n<div class=\"container\">\r\n      <form class=\"contact-us form-horizontal\" method=\"post\">\r\n        <legend>Contact Form<\/legend>        \r\n        <div class=\"control-group\">\r\n            <label class=\"control-label\">Name<\/label>\r\n            <div class=\"controls\">\r\n                <div class=\"input-prepend\">\r\n                <span class=\"add-on\"><i class=\"icon-user\"><\/i><\/span>\r\n                    <input type=\"text\" class=\"input-xlarge\" name=\"name\" placeholder=\"Name\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"control-group\">\r\n            <label class=\"control-label\">Email<\/label>\r\n            <div class=\"controls\">\r\n                <div class=\"input-prepend\">\r\n                <span class=\"add-on\"><i class=\"icon-envelope\"><\/i><\/span>\r\n                    <input type=\"text\" class=\"input-xlarge\" name=\"email\" placeholder=\"Email\">\r\n                <\/div>\r\n            <\/div>    \r\n        <\/div>\r\n        <div class=\"control-group\">\r\n            <label class=\"control-label\">Url<\/label>\r\n            <div class=\"controls\">\r\n                <div class=\"input-prepend\">\r\n                <span class=\"add-on\"><i class=\"icon-globe\"><\/i><\/span>\r\n                    <input type=\"text\" id=\"url\" class=\"input-xlarge\" name=\"url\" placeholder=\"http:\/\/www.example.com\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"control-group\">\r\n            <label class=\"control-label\">Comment<\/label>\r\n            <div class=\"controls\">\r\n                <div class=\"input-prepend\">\r\n                <span class=\"add-on\"><i class=\"icon-pencil\"><\/i><\/span>\r\n                    <textarea name=\"comment\" class=\"span4\" rows=\"4\" cols=\"80\" placeholder=\"Comment (Max 200 characters)\"><\/textarea>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"control-group\">\r\n          <div class=\"controls\">\r\n            <button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\r\n            <button type=\"button\" class=\"btn\">Cancel<\/button>\r\n          <\/div>    \r\n        <\/div>\r\n      <\/form>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Feedback<\/strong>
\nIf you have any issue in its configuration or want to suggest some thing please feel free to comment. For your ease we make its demo<\/a> and script to download.<\/p>\n
Facebook<\/a><\/blockquote><\/div><\/div>
Tutorial Categories:<\/strong>
\n        \"Bootstrap\"<\/a><\/div>
\n        \"CSS\"<\/a><\/div><\/div>","protected":false},"excerpt":{"rendered":"
Today I am going to a very basic tutorial<\/a>\u00a0on Bootstrap (front-end framework for faster and easier web development<\/strong>) and this is very simple and easy to configure and make your websites powerful at front-end, in this article I am explaining you with a contact form which is very simple and easy to use in your web designs<\/strong>.<\/p>\n
\"How<\/p>\n","protected":false},"author":1,"featured_media":400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"twitterCardType":"","cardImageID":0,"cardImage":"","cardTitle":"","cardDesc":"","cardImageAlt":"","cardPlayer":"","cardPlayerWidth":0,"cardPlayerHeight":0,"cardPlayerStream":"","cardPlayerCodec":"","footnotes":""},"categories":[243,64],"tags":[633,244,65,245,218],"_links":{"self":[{"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/posts\/399"}],"collection":[{"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/comments?post=399"}],"version-history":[{"count":0,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/posts\/399\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/media\/400"}],"wp:attachment":[{"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/media?parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/categories?post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/tags?post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}