Form Functionality

Topic: Form Functionality

timit2thelimit pro asked 10 years ago

I've been away from this industry for a few years. I'm using MDB4 to design my site, but am unable to get my contact form to work. Is there any documentation anyone can point me to? Thanks a million!

Add comment

Dawid Adach pro answered 10 years ago

0 0 Best answer

@timit2thelimit

The code which you provided is perfectly fine, however this is HTML/CSS markup. In order actually send an email you have connect certain script which "do the work".

Since there are many things which you can do with your form (i.e. subscribe to newsletter, store in DB, send an email etc.) as well as multiple ways of sending email (JS/PHP/external service like MailChimp) there are no standard code with it. Below you can find an simple example of how to use PHP with HTML forms:

Save below code into mail.php, upload via FTP to your server and run. Don't forget to update your email address inside script. Based on that you can adjust the script to your needs.

<pre><code><?php 
if(isset($_POST['submit'])){
    $to = "email@example.com"; // this is your Email address
    $from = $_POST['email']; // this is the sender's Email address
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $subject = "Form submission";
    $subject2 = "Copy of your form submission";
    $message = $first_name . " " . $last_name . " wrote the following:" . "nn" . $_POST['message'];
    $message2 = "Here is a copy of your message " . $first_name . "nn" . $_POST['message'];

$headers = "From:" . $from;
    $headers2 = "From:" . $to;
    mail($to,$subject,$message,$headers);
    mail($from,$subject2,$message2,$headers2); // sends a copy of the message to the sender
    echo "Mail Sent. Thank you " . $first_name . ", we will contact you shortly.";
    // You can also use header('Location: thank_you.php'); to redirect to another page.
    }
?>

<!DOCTYPE html>
<head>
<title>Form submission</title>
</head>
<body>

<form action="" method="post">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Message:<br><textarea rows="5" name="message" cols="30"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>

</body>
</html> </code></pre>

Please insert min. 20 characters.

@timit2thelimit The code which you provided is perfectly fine, however this is HTML/CSS markup. In order actually send an email you have connect certain script which "do the work". Since there are many things which you can do with your form (i.e. subscribe to newsletter, store in DB, send an email etc.) as well as multiple ways of sending email (JS/PHP/external service like MailChimp) there are no standard code with it. Below you can find an simple example of how to use PHP with HTML forms: Save below code into mail.php, upload via FTP to your server and run. Don't forget to update your email address inside script. Based on that you can adjust the script to your needs.

<?php 
if(isset($_POST['submit'])){
    $to = "email@example.com"; // this is your Email address
    $from = $_POST['email']; // this is the sender's Email address
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $subject = "Form submission";
    $subject2 = "Copy of your form submission";
    $message = $first_name . " " . $last_name . " wrote the following:" . "nn" . $_POST['message'];
    $message2 = "Here is a copy of your message " . $first_name . "nn" . $_POST['message'];

    $headers = "From:" . $from;
    $headers2 = "From:" . $to;
    mail($to,$subject,$message,$headers);
    mail($from,$subject2,$message2,$headers2); // sends a copy of the message to the sender
    echo "Mail Sent. Thank you " . $first_name . ", we will contact you shortly.";
    // You can also use header('Location: thank_you.php'); to redirect to another page.
    }
?>

<!DOCTYPE html>
<head>
<title>Form submission</title>
</head>
<body>

<form action="" method="post">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Message:<br><textarea rows="5" name="message" cols="30"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>

</body>
</html>

Add comment

timit2thelimit pro answered 10 years ago

0 0 Best answer

Good morning,

I'm using the blog template, and it's the contact modal that I'm having trouble with (as well as the comments section, but one thing at a time).

<pre><code>   
    <div class="modal fade modal-ext" id="modal-contact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            
            <div class="modal-content">
                
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Write to me</h4>
                </div>
                
                <div class="modal-body">
                    <p>What's on your mind?</p>
                    <br>
                    <div class="md-form">
                        <i class="fa fa-user prefix"></i>
                        <input type="text" id="form22" class="form-control">
                        <label for="form42">Your name</label>
                    </div>

<div class="md-form">
                        <i class="fa fa-envelope prefix"></i>
                        <input type="text" id="form32" class="form-control">
                        <label for="form34">Your email</label>
                    </div>

<div class="md-form">
                        <i class="fa fa-tag prefix"></i>
                        <input type="text" id="form32" class="form-control">
                        <label for="form34">Subject</label>
                    </div>

<div class="md-form">
                        <i class="fa fa-pencil prefix"></i>
                        <textarea type="text" id="form8" class="md-textarea"></textarea>
                        <label for="form8">Message</label>
                    </div>

<div class="text-xs-center">
						<button type="button" class="btn btn-stc">Submit</button>
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
            
</code></pre>

This is just the basic code.  I'm unsure how to use this to actually receive email from site visitors as this isn't truly a form as HTML sees it.

I hope this sheds a little light on my issue.  Thanks in advance for your time.

Please insert min. 20 characters.

Good morning, I'm using the blog template, and it's the contact modal that I'm having trouble with (as well as the comments section, but one thing at a time).

   <!-- Modal Contact -->
    <div class="modal fade modal-ext" id="modal-contact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Write to me</h4>
                </div>
                <!--Body-->
                <div class="modal-body">
                    <p>What's on your mind?</p>
                    <br>
                    <div class="md-form">
                        <i class="fa fa-user prefix"></i>
                        <input type="text" id="form22" class="form-control">
                        <label for="form42">Your name</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-envelope prefix"></i>
                        <input type="text" id="form32" class="form-control">
                        <label for="form34">Your email</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-tag prefix"></i>
                        <input type="text" id="form32" class="form-control">
                        <label for="form34">Subject</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-pencil prefix"></i>
                        <textarea type="text" id="form8" class="md-textarea"></textarea>
                        <label for="form8">Message</label>
                    </div>

                    <div class="text-xs-center">
						<button type="button" class="btn btn-stc">Submit</button>
                    </div>
                </div>
                <!--Footer-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!--/.Content-->

This is just the basic code. I'm unsure how to use this to actually receive email from site visitors as this isn't truly a form as HTML sees it. I hope this sheds a little light on my issue. Thanks in advance for your time.

Add comment

Michal Szymanski staff answered 10 years ago

0 0 Best answer

Hi guys, I need more details to help you. Can you provide your sample code and perhaps some screenshots with occurring problems?

Add comment

mark petersen free answered 10 years ago

0 0 Best answer

How is it not working for you? What exactly is wrong? Perhaps I can help!!!! I am also having trouble. My form displays, but not correctly. The buttons are not the right size and the 'newsletter' checkbox is also not right. Something in the CSS is not connecting. I have tried both the min version and regular version to no avail.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

timit2thelimit

Pro User 10Support score
1Questions 1Answers 0Snippets