Search code examples
phpformsmaterialize

Form action in Materialize


Long time bootstrap user that recently switched to Materialize. Today I found myself in quite a predicament, as I'm trying to make work of a simple "contact me" form in a website and could not find where I should declare the "action" as I would in bootstrap's tags.

This is my contact section:

<section class="section section-contact scrollspy" id="contact">
<div class="container">
  <div class="row">
    <div class="col s12 m6">
      <div class="card-panel teal white-text center">
        <i class="material-icons medium">email
        </i>
        <h5>Contactanos sin compromiso</h5>
        <p>Dejanos tu consulta y te la respondemos dentro de las 24 horas</p>
      </div>
    </div>
    <div class="col s12 m6">
      <div class="card-panel grey lighten-3">
        <h5>Por favor completá con tus datos</h5>
        <div class="input-field">
          <input type="text" placeholder="Tu nombre" id="name">
          <label for="name">Nombre</label>
        </div>
        <div class="input-field">
          <input type="email" placeholder="email" id="email">
          <label for="email">Correo electrónico</label>
        </div>
        <div class="input-field">
          <input type="text" placeholder="Formato (351)2004974" id="phone">
          <label for="phone">Teléfono</label>
        </div>
        <div class="input-field">
          <textarea id="message" placeholder="Escribí tu consulta" class="materialize-textarea"></textarea>
          <label for="message">Mensaje</label>
        </div>
        <input type="submit" value="submit" class="btn">
      </div>
    </div>
  </div>
</div>

And this is how I would usually tackle this in Bootstrap in order to call to my php contactform (last code):

<form class="contact-form" action="contactform.php" method="post">
    <input type="text" name="name" placeholder="Full name">
    <input type="text" name="mail" placeholder="Your e-mail">
    <input type="text" name="subject" placeholder="Subject">
    <textarea name="message" placeholder="Message"></textarea>
    <button type="submit" name="submit">SEND MAIL</button>
  </form>

PHP Contact form:

<?php
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$mailFrom = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$mailTo = "admin@mcravero.com";
$headers = "From: Aikos website";
$txt = "Recibiste un correo de ".$name.".\n\n".$message;
mail($mailTo, $txt, $headers);
header("Location: index.php?mailsend");
}   

Am I missing something? I've googled and read documentation for about an hour to no veil.


Solution

  • You are missing the form tags.

    <form class="contact-form" action="contactform.php" method="post">
    ....
    </form>
    

    Your <form> tag "contains interactive controls for submitting information". So, yes. You want all the inputs and buttons in-between your form open and close tags.

    You can have more than one form on a page.

    With HTML5 there are some new attributes for elements also which suggest being able to associate inputs and forms irrespective of position in the DOM.