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 over 4 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 over 4 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 about 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 over 3 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 over 3 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 over 1 year 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.

 

ritariya 2 months ago

I was constantly searching for many sites to know how to submit a form. Accidentally I have seen the post and I came to know about particular codes to submit the form. You have mentioned techniques in submitting the form. Add some more details regarding the blog. Update your post.  private tour louvre night