{"id":302,"date":"2024-10-23T11:35:21","date_gmt":"2024-10-23T11:35:21","guid":{"rendered":"https:\/\/codingtutorials.in\/?p=302"},"modified":"2025-04-05T10:49:40","modified_gmt":"2025-04-05T10:49:40","slug":"how-to-create-complete-signup-form","status":"publish","type":"post","link":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/","title":{"rendered":"Complete Sign-Up Form Using PHP, Bootstrap, and jQuery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"302\" class=\"elementor elementor-302\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7106030 e-flex e-con-boxed e-con e-parent\" data-id=\"7106030\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-244a472 elementor-widget elementor-widget-text-editor\" data-id=\"244a472\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This tutorial covers the entire process of constructing a sign-up form with PHP as the backend, Bootstrap styling, and JavaScript for front-end validation. All the necessary documentation is included in the package.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e54fd9 elementor-widget elementor-widget-heading\" data-id=\"9e54fd9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Features of the Sign-Up Form:<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a38fd3 elementor-widget elementor-widget-text-editor\" data-id=\"8a38fd3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Bootstrap 4 is utilized in the form to create a clean and responsive appearance.<\/li><li>To guarantee secure submission and ensure proper data validation, clients and servers must pass client-side JavaScript or PHP code.<\/li><li>Validation: After verifying, name, e-mail, password are stored in a MySQL database.<\/li><li>Confirmation Emails: A user is automatically emailed when they sign up.<\/li><li>Prior to commencing, it is recommended to familiarize yourself with HTML, PHP, and MySQL. You&#8217;ll need a server environment that is operational and has access to. MySQL database.<\/li><\/ul><p>Before getting started, ensure that you have a basic understanding of HTML, PHP, and MySQL. You&#8217;ll also need a working server environment with access to a MySQL database.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-195a4bf elementor-widget elementor-widget-heading\" data-id=\"195a4bf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HTML Structure<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00e7c6a elementor-widget elementor-widget-text-editor\" data-id=\"00e7c6a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We start to creating the HTML structure of the <a href=\"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/\"><strong>sign-up form<\/strong><\/a>. Bootstrap is used to ensure that the form looks professional and is responsive on different devices.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83b534c elementor-widget elementor-widget-code-highlight\" data-id=\"83b534c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.0.0\/dist\/css\/bootstrap.min.css\">\n\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25b371e elementor-widget elementor-widget-code-highlight\" data-id=\"25b371e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>\n<style>\n    body {\n        background-color: darkkhaki;\n    }\n    .container {\n        position: absolute;\n        top: 5%;\n        left: 8%;\n    }\n    .background {\n        background-color: whitesmoke;\n        padding: 45px;\n    }\n    h1 {\n        font-family: \"Times New Roman\", Times, serif;\n    }\n    label {\n        font-family: Arial, Helvetica, sans-serif;\n    }\n<\/style><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a2837f elementor-widget elementor-widget-code-highlight\" data-id=\"1a2837f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>\n\n<div class=\"container\">\n    <div class=\"row justify-content-center\">\n        <div class=\"col-lg-5\">\n            <div class=\"background\">\n                <h1 class=\"text-center mb-4\">Sign Up Form<\/h1>\n                <form action=\"process_signup.php\" method=\"POST\" onsubmit=\"return Myfunction()\">\n                    <div class=\"form-group\">\n                        <label>Enter Name<\/label>\n                        <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Enter Name\" class=\"form-control\">\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label>Enter Email<\/label>\n                        <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"Enter Email ID\" class=\"form-control\">\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label>Enter Password<\/label>\n                        <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Enter Password\" class=\"form-control\">\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label>Re-enter Password<\/label>\n                        <input type=\"password\" id=\"password2\" placeholder=\"Enter Re-Password\" class=\"form-control\">\n                    <\/div>\n                    <div class=\"form-group\">\n                        <input type=\"submit\" name=\"submit\" class=\"btn btn-primary\">\n                    <\/div>\n                <\/form>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf36dbe elementor-widget elementor-widget-heading\" data-id=\"bf36dbe\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Adding Validation with JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22f83ee elementor-widget elementor-widget-text-editor\" data-id=\"22f83ee\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For better user experience, we validate form inputs on the client side before sending the data to the server. This will ensure that required fields are not left blank and both passwords match.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38b127f elementor-widget elementor-widget-code-highlight\" data-id=\"38b127f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><script>\n    function Myfunction() {\n        var name = document.getElementById(\"name\").value;\n        var email = document.getElementById(\"email\").value;\n        var password = document.getElementById(\"password\").value;\n        var password2 = document.getElementById(\"password2\").value;\n\n        if (name === \"\") {\n            alert(\"Please fill the name field\");\n            return false;\n        } else if (email === \"\") {\n            alert(\"Please fill the email field\");\n            return false;\n        } else if (password === \"\") {\n            alert(\"Please fill the password field\");\n            return false;\n        } else if (password2 === \"\") {\n            alert(\"Please fill the Re-password field\");\n            return false;\n        } else if (password !== password2) {\n            alert(\"Passwords do not match\");\n            return false;\n        } else {\n            return true;\n        }\n    }\n<\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b4aa8e elementor-widget elementor-widget-heading\" data-id=\"7b4aa8e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Backend Processing with PHP and MySQL<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9fb058d elementor-widget elementor-widget-text-editor\" data-id=\"9fb058d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tNext, we will create a script in PHP, which is called <code>process_signup.php<\/code>, that will process the form data. The script will check whether the e-mail exists in the database and, if it does not, will insert the user&#8217;s details into the sign table.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a0cba61 elementor-widget elementor-widget-heading\" data-id=\"a0cba61\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Create the conn.php File for the MySQLi Connection<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1827a5 elementor-widget elementor-widget-code-highlight\" data-id=\"d1827a5\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp><?php\n    include_once 'conn.php'; \/\/ Database connection\n\n    if(isset($_POST[\"submit\"])) {\n        $name = $_POST[\"name\"];\n        $email = $_POST[\"email\"];\n        $password = $_POST[\"password\"];\n\n        \/\/ Check if the email is already registered\n        $sql = \"SELECT * FROM sign WHERE email='$email'\";\n        $result = mysqli_query($conn, $sql);\n\n        if(mysqli_fetch_assoc($result)) {\n            echo \"<p class='text-danger'>Email already exists!<\/p>\";\n        } else {\n            \/\/ Insert new user into the database\n            $sql = \"INSERT INTO sign (name, email, password) VALUES ('$name', '$email', '$password')\";\n            if(mysqli_query($conn, $sql)) {\n                \/\/ Send confirmation email\n                $to = $email;\n                $subject = \"Welcome to Our Website!\";\n                $message = \"Hi $name,\\n\\nThank you for signing up!\";\n                $headers = \"From: no-reply@yourwebsite.com\";\n\n                if(mail($to, $subject, $message, $headers)) {\n                    echo \"<p class='text-success'>Confirmation email sent!<\/p>\";\n                } else {\n                    echo \"<p class='text-danger'>Failed to send confirmation email.<\/p>\";\n                }\n            } else {\n                echo \"<p class='text-danger'>Error registering user.<\/p>\";\n            }\n        }\n    }\n?><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbc5218 elementor-widget elementor-widget-text-editor\" data-id=\"cbc5218\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In this file, we\u2019ll establish the connection to the MySQL database.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8ea614 elementor-widget elementor-widget-code-highlight\" data-id=\"d8ea614\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-sql line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-sql\">\n\t\t\t\t\t<xmp><?php\n    $conn = mysqli_connect(\"localhost\", \"root\", \"\", \"signup_form\");\n    if (!$conn) {\n        die(\"Connection failed: \" . mysqli_connect_error());\n    }\n?><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1b2967 elementor-widget elementor-widget-text-editor\" data-id=\"b1b2967\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the above code:<\/p><ul><li><code>\"localhost\"<\/code> is the server (usually localhost when working on a local server).<\/li><li><code>\"root\"<\/code> is the MySQL username (default for local environments).<\/li><li><code>\"\"<\/code> is the MySQL password (leave empty if there is no password for the root user).<\/li><li><code>\"signup_form\"<\/code> is the name of the database where you are storing the user information.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4df8179 elementor-widget elementor-widget-text-editor\" data-id=\"4df8179\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Once the code is imposed and implemented in the local or live server, check if the code runs perfectly and is working as intended. Just check if the database connection is set properly if the form data is correctly entered into the database. Check the email confirmation now to see if users receive welcome emails.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b4764f elementor-widget elementor-widget-shortcode\" data-id=\"6b4764f\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style type=\"text\/css\">\r\n\t\t#dae-shortcode335-download-wrapper {\r\n\t\t\tbackground: url() !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 20% !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t\tbackground: none !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px 0 0 10px !important;\r\n\t\t\t-moz-border-radius: 10px 0 0 10px !important;\r\n\t\t\t-webkit-border-radius: 10px 0 0 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tbackground: #f9f9f9 !important;\r\n\t\t\tborder-radius: 0 10px 10px 0 !important;\r\n\t\t\t-moz-border-radius: 0 10px 10px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 10px 10px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #0081c1 !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0081c1 !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode335-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode335-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode335-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode335-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode335-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode335-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode335-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode335-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode335-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\">Php complete form<\/h2>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">FREE DOWNLOAD<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Send download link to:<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"php-form.zip\" \/>\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Send link\" \/>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\n\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>This tutorial covers the entire process of constructing a sign-up form with PHP as the backend, Bootstrap styling,<\/p>\n","protected":false},"author":1,"featured_media":304,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[35,34,33],"class_list":["post-302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-complete-php-form","tag-form-in-php","tag-php-form"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>how to create complete signup form using php<\/title>\n<meta name=\"description\" content=\"This tutorial covers the entire process of constructing a sign-up form with PHP as the backend, Bootstrap styling, and JavaScript for front-end\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"how to create complete signup form using php\" \/>\n<meta property=\"og:description\" content=\"This tutorial covers the entire process of constructing a sign-up form with PHP as the backend, Bootstrap styling, and JavaScript for front-end\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-23T11:35:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-05T10:49:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/signup.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1216\" \/>\n\t<meta property=\"og:image:height\" content=\"562\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"how to create complete signup form using php","description":"This tutorial covers the entire process of constructing a sign-up form with PHP as the backend, Bootstrap styling, and JavaScript for front-end","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/","og_locale":"en_US","og_type":"article","og_title":"how to create complete signup form using php","og_description":"This tutorial covers the entire process of constructing a sign-up form with PHP as the backend, Bootstrap styling, and JavaScript for front-end","og_url":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2024-10-23T11:35:21+00:00","article_modified_time":"2025-04-05T10:49:40+00:00","og_image":[{"width":1216,"height":562,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/signup.webp","type":"image\/webp"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"Complete Sign-Up Form Using PHP, Bootstrap, and jQuery","datePublished":"2024-10-23T11:35:21+00:00","dateModified":"2025-04-05T10:49:40+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/"},"wordCount":404,"commentCount":0,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/signup.webp","keywords":["complete php form","form in php","php form"],"articleSection":["php"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/","url":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/","name":"how to create complete signup form using php","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/signup.webp","datePublished":"2024-10-23T11:35:21+00:00","dateModified":"2025-04-05T10:49:40+00:00","description":"This tutorial covers the entire process of constructing a sign-up form with PHP as the backend, Bootstrap styling, and JavaScript for front-end","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/signup.webp","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/signup.webp","width":1216,"height":562,"caption":"Sign Up Form"},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/how-to-create-complete-signup-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"Complete Sign-Up Form Using PHP, Bootstrap, and jQuery"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=302"}],"version-history":[{"count":53,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/302\/revisions"}],"predecessor-version":[{"id":3015,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/302\/revisions\/3015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/304"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}