Menu icon Foundation
Submitting a form

I want to make a simple form that submits some information to an e-mail address. I've made the form, but now I'm running into the problem of submitting it. Since I have never made a form before I'm not sure what to do. Do I submit it by using php or javascript? Is there a best practice? How would you advice me to do this?

formsubmitbutton

I want to make a simple form that submits some information to an e-mail address. I've made the form, but now I'm running into the problem of submitting it. Since I have never made a form before I'm not sure what to do. Do I submit it by using php or javascript? Is there a best practice? How would you advice me to do this?

Rafi Benkual almost 5 years ago

Not an expert at this but I think you start with a action script:

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

This article explains how to do in JS
http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

Wing-Hou Chan almost 5 years ago

Hey Paul!

Taking a look a Rafi's link, that tutorial seems a lot simpler than the mashed up on I'm going to give in PHP

1) Set the action attribute to a page like this: http://yourDomain.com/submitform.php.

2) Create a new PHP document with the name submitform.php.

3) Place this PHP code in submitform.php:

<?php 
  $to = 'your@emailaddress.com' ;  // Replace email address with your own
  $subject = 'yourSubject' ; 
  $firstname = $_POST['first_name'] ; 
  $surname = $_POST['surname'] ;
  $email = $_POST['email'] ;
  $phone = $_POST['phone'] ;
  $text = $_POST['message'] ;

  // The above are the variables that will hold data entered by the user
  // You can use these variables, rename them or create your own
  //Make sure the text in the square brackets correspond to the name attributes in your form


  $message = "From: $firstname $surname \nEmail: $email \nPhone: $phone \nMessage: $text \n";

  // The $message variable will form the message of the email.
  // It collects the variables your declared at the top
  // A line break ( \n ) is placed between each section


  $sent = mail($to, $subject, $message) ; 
    if($sent) {
      echo "<h3>Thank you for your message.</h3><p>Your email has been sent successfully and we appreciate you getting in touch with us. We will be sending a reply soon.</p>"; 
    }else{
      echo "<h3>Sorry, your message wasn't sent.</h3><p>We seem to have encountered a problem sending your message. Please go back and try again. If you get this message again please email <a href='mailto:webmaster@yourDomain.com'>webmaster@yourDomain.com</a>.</p>"; 
}

  // A new variable called $sent is created
  // This variable uses the mail() function to send the data.
  // The first option is the email address the message is sent to, as declared in the $to variable
  // The second is the subject, as declared with the $subject variable
  // The last is the message, as declared by the $message variable which holds the user submitted data

  // If the message is sent successfully, a "success message" is echoed.
  // If not, an alternate message is echoed.
?>

4) Delete all the comments.

If you have other data entry types such as checkboxes you'll need some more code.

If you have any problems with the PHP code tweet me @WingHouChan or email me, my email is on my profile. Click the "Message" button.

Not many tutorial writers will give one-to-one support ;)

michael angel over 4 years ago

This is good info.
For my problem- my submit text window and button and php all work fine- but the button size is too large-

1

This works with too large button

2

This looks correct but does not function

How can I make 1 look like 2?
Or, can I size the text window up until it matches the height of the submit button?

Derek Payne almost 4 years ago

Hey All. I have this all implemented, but for some reason when I submit the form it just opens up the php file in a new window. I know this is probably a simple fix, but I'm completely new to php and mostly stay away from contact forms. Any help would be great.

<form action="submitform.php" method="post">
                        <div class="row">
                          <div class="large-6 columns">
                            <label>Name:</label>
                            <input type="text" placeholder="" name="name">
                          </div>
                          <div class="large-6 columns">
                            <label>Company:</label>
                            <input type="text" placeholder="" name="company">
                          </div>
                        </div>
                        <div class="row">
                          <div class="large-6 columns">
                            <label>Email Address:</label>
                            <input type="text" placeholder="" name="email">
                          </div>
                          <div class="large-6 columns">
                            <label>Phone Number:</label>
                            <input type="text" placeholder="" name="phone">
                          </div>
                        </div>
                        <div class="row">
                          <div class="large-12 columns">
                            <label>Message:</label>
                            <textarea placeholder="" name="message"></textarea>
                        </div>
                        <div class="row">
                          <div class="large-12 columns" id="formbutton">
                            <input type="submit">
                            </div>
                        </div>
                    </form>
<?php 
  $to = 'dnpayne@live.com' ;  // Replace email address with your own
  $subject = 'Test email' ; 
  $name = $_POST['name'] ; 
  $company = $_POST['company'] ;
  $email = $_POST['email'] ;
  $phone = $_POST['phone'] ;
  $message = $_POST['message'] ;

  // The above are the variables that will hold data entered by the user
  // You can use these variables, rename them or create your own
  //Make sure the text in the square brackets correspond to the name attributes in your form


  $message = "From: $firstname $surname \nEmail: $email \nPhone: $phone \nMessage: $text \n";

  // The $message variable will form the message of the email.
  // It collects the variables your declared at the top
  // A line break ( \n ) is placed between each section


  $sent = mail($to, $subject, $message) ; 
    if($sent) {
      echo "<h3>Thank you for your message.</h3><p>Your email has been sent successfully and we appreciate you getting in touch with us. We will be sending a reply soon.</p>"; 
    }else{
      echo "<h3>Sorry, your message wasn't sent.</h3><p>We seem to have encountered a problem sending your message. Please go back and try again. If you get this message again please email <a href='mailto:webmaster@yourDomain.com'>webmaster@yourDomain.com</a>.</p>"; 
}

  // A new variable called $sent is created
  // This variable uses the mail() function to send the data.
  // The first option is the email address the message is sent to, as declared in the $to variable
  // The second is the subject, as declared with the $subject variable
  // The last is the message, as declared by the $message variable which holds the user submitted data

  // If the message is sent successfully, a "success message" is echoed.
  // If not, an alternate message is echoed.
?>

Bob Sawyer almost 4 years ago

Check out SendGrid. Free/very cheap platform for sending email that will integrate into any site. Much more secure than any of the PHP forms above.

https://sendgrid.com/user/signup

Erick Salazar almost 2 years ago

Hi Wing-Hou,

I'm going to try the form and wanted to know if I can place the php file containing the form elements in the src/assets/pages directory, and will it be automatically parsed into the Dist folder? Also, can I place the submitform.php file that contains the actual php processing code in the same directory? Or do I manually upload the php file containing the code into the root of my webserver (/public_html)?

Do I need to make any entries to the gulpfile.babel.js and/or the config.yml file for the stack to recognize the *.php extension and pushes any changes/updates to both the contact form content and the code php files up to the Dist directory?

 

Thanks in advance.