form completo

src/App.css

@@ -162,4 +162,15 @@ p {
 
 
 .negrita {
 .negrita {
   font-weight: bold;
   font-weight: bold;
+}
+
+.textForm-container {
+  width: 90%;
+}
+
+.button-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  border-top: 1px solid #ced4da;
 }
 }
\ No newline at end of file

src/App.js

 import './App.css';
 import './App.css';
 import { jsPDF } from "jspdf";
 import { jsPDF } from "jspdf";
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import './App.css';
 import Telefono from './assets/images/telefono.png';
 import Telefono from './assets/images/telefono.png';
 import Mail from './assets/images/email.png';
 import Mail from './assets/images/email.png';
@@ -8,13 +8,14 @@ import Map from './assets/images/map.png';
 // import $ from "jquery";
 // import $ from "jquery";
 
 
 function App () {
 function App () {
+  const [ renderAlert, setRenderAlert ] = useState(false);
 
 
   const previsualizacionPdf = () => {
   const previsualizacionPdf = () => {
     // Objeto jsPDF para utilizar los metodos de la libreria inicializado con los sig. args
     // Objeto jsPDF para utilizar los metodos de la libreria inicializado con los sig. args
     // p : Hoja vertical
     // p : Hoja vertical
     // pt: medicion en puntos de la hoja  
     // pt: medicion en puntos de la hoja  
     // letter: Tipo de papel a utilizar carta
     // letter: Tipo de papel a utilizar carta
-    var pdf = new jsPDF('p', 'pt', 'letter');
+    var pdf = new jsPDF('p', 'pt', 'a4');  //'l', 'mm', [1200, 1210]    'p', 'pt', 'a4'
 
 
     // --------- Configuracion del PDF -----------
     // --------- Configuracion del PDF -----------
     var margin = 10; // Margin que se le dara en todos los lados del pdf
     var margin = 10; // Margin que se le dara en todos los lados del pdf
@@ -40,7 +41,7 @@ function App () {
 
 
   const generarPdf  = () => {
   const generarPdf  = () => {
     // Utilizamos la misma configuracion PDF que en la funcion "PrevisualizacionPdf"
     // Utilizamos la misma configuracion PDF que en la funcion "PrevisualizacionPdf"
-    var pdf = new jsPDF('p', 'pt', 'letter');
+    var pdf = new jsPDF('p', 'pt', 'a4');
     var margin = 5; 
     var margin = 5; 
     var scale = (pdf.internal.pageSize.width - margin * 2) / document.body.scrollWidth;
     var scale = (pdf.internal.pageSize.width - margin * 2) / document.body.scrollWidth;
 
 
@@ -56,6 +57,10 @@ function App () {
       }
       }
     });
     });
   }
   }
+  
+  const mensajeEnviado = () => {
+    setRenderAlert(true);
+  }
 
 
   return(
   return(
     <div className='father-container'>
     <div className='father-container'>
@@ -271,18 +276,36 @@ function App () {
 
 
       </div>
       </div>
 
 
-    {/* Secciones Principales */}
 
 
       </div>
       </div>
 
 
-     
-      <button onClick={ previsualizacionPdf }>
-        Previsualizacion del Pdf
-      </button>
+      <div className="button-container mt-4">
+        <button type="button" className="btn btn-outline-primary mt-3" onClick={ previsualizacionPdf }>
+          Previsualizacion del Pdf
+        </button>
 
 
-      <button onClick={ generarPdf }>
-        Generar Pdf
-      </button>
+        <button type="button" className="btn btn-outline-primary mt-3" onClick={ generarPdf }>
+          Generar Pdf
+        </button>
+      </div>
+      
+      <div className="d-flex justify-content-center align-items-center mt-4">
+        <div className="textForm-container mb-3">
+          <label for="form-contact" className="form-label negrita">Formulario de Contacto</label>
+          <textarea className="form-control" id="form-contact" rows="3"></textarea>
+          <div id="liveAlertPlaceholder"></div>
+          <div className='d-flex justify-content-end'>
+            <button type="button" class="btn btn-success mt-2" id="liveAlertBtn" onClick={mensajeEnviado}>Enviar</button>
+          </div>
+          {renderAlert &&
+            <div class="alert alert-success mt-3" role="alert">
+              Mensaje Enviado
+            </div>
+          }
+        </div>
+      </div>
+     
+