Plantilla con Animación JS. ¿Cómo se puede agregar campos al formulario de contacto?

Este tutorial va a ayudarle a agregar un nuevo campo al formulario de contacto de su plantilla con animación JS.

Por ejemplo, el formulario de contacto de su plantilla con animación JS es:

Y Usted va a agregar un nuevo campo “Fax” que viene después del campo “Teléfono”.

1. Primero, hay que abrir el fichero .html que contiene este formulario por medio de Dreamweaver.
2. Haga clic en Split (Dividir).

3. Para agregar un nuevo campo, tiene que copiar el código de uno de los campos existentes. Haga clic en el campo “Teléfono” para seleccionar su código.

4. Copie el código, por ejemplo,

<label class="phone">

<input type="tel" value="Telephone:">

<br class="clear">

<span class="error error-empty">*This is not a valid phone number.</span><span class="empty error-empty">*This field is required.</span> </label>

5. y péguelo al final de la parte seleccionada (ya que el nuevo campo “Fax” viene después del campo “Teléfono”).
6. Ahora Usted puede ver 2 campos “Teléfono” idénticos, por lo que todo lo que tiene que hacer es reemplazar el nombre del segundo campo:

<label class="fax">

<input type="fax" value="Fax:">

<br class="clear">

<span class="error error-empty">*This is not a valid Fax number.</span><span class="empty error-empty">*This field is required.</span> </label>

7. No queremos que fax sea un campo obligatorio, por lo que vamos a modificar el código:

<label class="fax">

<input type="fax" value="Fax:">

<br class="clear">

</label>

8. Guarde los cambios del fichero .html.
9. Abra la carpeta “js” y abra el fichero forms.js por medio de Dreamweaver (o simplemente haga clic en él en el panel de código de origen de Dreamweaver).
10. Asegúrese de que tiene esas líneas(De lo contrario, tendrá que añadirlas duplicando las líneas idénticas de los campos ya existentes y reemplazando sus nombres por “fax”):

(about line 25)

    
  ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},

(about line 108)

   
 
  fax:_.getValFromLabel($('.fax',_.form)),
  

11. Asegúrese de reemplazar # por su dirección de correo electrónico para activar el formulario.
12. Abra el fichero mailhandler.php en la carpeta “bat” para asegurarse de que tiene esas líneas (De lo contrario, tendrá que añadirlas duplicando las líneas idénticas de los campos ya existentes y reemplazando sus nombres por “fax”):

   

if($_POST['fax']!='nope'){ 

    $messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";

    $messageBody .= '<br>' . "\n";

}

(Hay que modificar el texto Fax Number si desea un texto diferente en el mensaje que viene)
13. Suba el contenido de la carpeta ‘site’ a su FTP.
14. Trate de enviar un mensaje de correo electrónico para comprobar si el campo funciona bien.

Por favor, revise el tutorial: