Form Functionality

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Form Functionality

timit2thelimit pro asked 8 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!

mark petersen answered 8 years ago

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.

Michal Szymanski staff pro premium priority answered 8 years ago

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

timit2thelimit pro answered 8 years ago

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.

Dawid Adach pro answered 8 years ago

@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>
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
timit2thelimit
Pro User
10Support score
1Questions 1Answers
0Snippets likes 0Snippets