Streaming live at 10am (PST)

[Tutorial] PHP Contact Form (External Hosting)

If you do not want to use the webflow forms you can use PHP, its free :slight_smile:

This is the form that you must attach to your index.html in the section

<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>

Now, you must create a php file with the name “mail.php” in the root (folder that you have index.html)

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "emailaddress@here.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>

Change: recipient: emailaddress@here.com and write your email… READY!
(You can change “thank you” por another html page (copy&paste) you make for a success form sent.)

4 Likes

Also, creating a custom php contact form on your own is not that difficult. Once you have a main contact form script, you can always add more things to it, like recaptcha, custom validation and authentication, etc.

This seems to work great on my cPanel server on Webflow contact forms. Do you know how to add some spam controls like ReCaptcha or honeypot without breaking anything? Trying to keep it simple and easily reusable. Thanks.

STEP 1

Add the following code to your contact page. [Add Elements - HTML Embed] and drop it onto your page].

** BELOW IS THE CSS (EDIT THE CSS PROPERTY’S AS YOU WISH)**

body{ margin:auto; padding:auto; font-family: "Verdana", sans-serif; } .formStyle { height: auto; width: 100%; margin: 0 0 10px 0; min-height: 20px; max-height: 40px; padding: 0px 0 0px 20px; text-align: left; line-height: 2em; font-weight: 200; background-color: #FFFFFF; } #form1 { text-align: left; padding: 20px 30px 10px 30px; margin: 20px; background-color: #ececec; border-radius: 10px; opacity: 1; width: auto; text-transform: uppercase; font-size: 12px; font-weight: 200; font-family: "Verdana", sans-serif; } #submit { background: #565454; border: 1px solid #f2f2f2; color: #fff; font-size: 12px; font-weight: 200; font-family: "Verdana", sans-serif; height: 35px; margin-top: 0; text-transform: uppercase; width: auto; padding: 0 10px 0 10px; } #submit:hover { background-color: #5ab6b1; cursor: pointer; }

BELOW IS THE CODE

  <div>
<form action="https://www.websitenamehere.com/formmail.php" method="post" name="form1" id="form1">
    <label for="name">Name:</label>
    <input name="name" type="text" required class="formStyle" id="name" form="form1">
   <br>
    <label for="email">Email:</label>
    <input name="email" type="email" required class="formStyle" id="email" form="form1">
    <br>

    <label for="phone">Phone:</label>
    <input name="phone" type="text" required class="formStyle" id="phone" form="form1">
    <br>

    <label for="comments">Comments:</label>
    <textarea name="comments" cols="5" required class="formStyle" id="comments" form="form1"></textarea>
    <br>

    <input type="submit" class="formStyle" name="submit" id="submit" value="Submit">
    <br>
    &nbsp;
  </form>
</div>

STEP 2:
BELOW IS THE PHP CODE
Create a PHP form: (Save PHP file as formmail.php)

<?php $name=addslashes($_POST['name']); $email=addslashes($_POST['email']); $phone=addslashes($_POST['phone']); $comments=addslashes($_POST['comments']);

// you can specify which email you want your contact form to be emailed to here

$toemail = “email@emailaddresshere.com”;
$subject = “from websitenamehere.com”;

$headers = “MIME-Version: 1.0\n”
.“From: “”.$name.”" <".$email.">\n"
.“Content-type: text/html; charset=iso-8859-1\n”;

$body = “Name: “.$name.”
\n”
.“Email: “.$email.”
\n”
.“Phone: “.$phone.”
\n”
.“Comments:
\n”
.$comments;

if (!ereg("^[a-zA-Z0-9_]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$", $email))
{
echo “That is not a valid email address. Please return to the”
." previous page and try again.";
exit;
}

mail($toemail, $subject, $body, $headers);
echo "Thanks for submitting your comments";

?>

STEP 3:

Create a thank you page. (Do not add the Thank you page into your navigation links.)

STEP 4

Export your website files and then upload them one by one via FileZilla or some other uploader. Upload the PHP file, as well.

STEP 5
IF YOUR WEBSITE DOES NOT HAVE AN SSL CERTIFICATE, leave the “s” off of the form action in the code: https and use http

<form action="https://www.websitenamehere.com/formmail.php