se agrego funcionalidad al boton de enviar

src/pages/Contacto/index.astro

@@ -3,37 +3,95 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <Layout title="Contacto">
-    <div class="grid grid-cols-1 place-items-center mx-10 mt-10">
-        <h1 class="text-3xl mb-4 font-bold text-slate-800">Contacto</h1>
-        <p class="text-lg">Estamos aquí para escucharte. Comparte con nosotros tus dudas, inquietudes o detalles sobre tu</p>
-        <p class="text-lg">proyecto. Haznos todas las preguntas que tengas y permítenos ayudarte a convertir tus ideas en</p>
-        <p class="text-lg">realidad. <b class="text-slate-800">¡Queremos leerte!</b></p>
-        
-    </div>
 
-    <div class="flex justify-center mt-10 ">
-        <form action="POST" autocomplete="on">
-            <div class="flex flex-col-2 space-x-3">
-                <input type="text" placeholder="Nombre" required class="border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700">
-                <input type="email" placeholder="Email" required class="border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700">
-            </div>
+  <div class="grid grid-cols-1 place-items-center mx-10 mt-10">
+    <h1 class="text-3xl mb-4 font-bold text-slate-800">Contacto</h1>
+    <p class="text-lg">
+      Estamos aquí para escucharte. Comparte con nosotros tus dudas, inquietudes
+      o detalles sobre tu
+    </p>
+    <p class="text-lg">
+      proyecto. Haznos todas las preguntas que tengas y permítenos ayudarte a
+      convertir tus ideas en
+    </p>
+    <p class="text-lg">
+      realidad. <b class="text-slate-800">¡Queremos leerte!</b>
+    </p>
+  </div>
 
-            <div class="flex flex-col-2 space-x-3">
-                <input type="text" placeholder="Teléfono"  required class= "border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700"> 
-                <input type="text" placeholder="Dirección" required class= "border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700">
-            </div>
-            <div class="grid place-items-center my-10">
-                <p>INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS</p>
-                <p class="text-sm">Esse sint sunt est magna et incididunt ullamco exercitation laborum cillum elit tempor ea.</p>
-                <p class="text-sm">Mollit commodo laborum nulla pariatur non pariatur quis aliqua proident adipisicing tempor.</p>
-                <p class="text-sm"><input type="checkbox" required>  Nisi dolore voluptate fugiat labore dolore ex non sunt dolore cupidatat qui.</p>
-            </div>
-            <button class="flex justify-center bg-lime-800 rounded w-full my-3 mb-40 text-white font-bold py-2 transition-transform hover:scale-105 hover:bg-lime-900 hover:shadow-md hover:shadow-black hover:ease-out hover:duration-300" 
-            type="submit">Enviar</button>
+  <div class="flex justify-center mt-10">
+    <form method="GET" action="/Contacto" autocomplete="on">
+      <div class="flex flex-col-2 space-x-3">
+        <input
+          type="text"
+          placeholder="Nombre"
+          name="nombre"
+          required
+          class="border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700"
+        />
+        <input
+          type="email"
+          placeholder="Email"
+          name="correo"
+          required
+          class="border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700"
+        />
+      </div>
 
-            
-        </form> 
-    </div>
+      <div class="flex flex-col-2 space-x-3">
+        <input
+          type="text"
+          placeholder="Teléfono"
+          name="telefono"
+          required
+          class="border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700"
+        />
+        <input
+          type="text"
+          placeholder="Dirección"
+          name="direccion"
+          required
+          class="border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700"
+        />
+      </div>
+      <div class="grid place-items-center my-10">
+        <p>INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS</p>
+        <p class="text-sm">
+          Esse sint sunt est magna et incididunt ullamco exercitation laborum
+          cillum elit tempor ea.
+        </p>
+        <p class="text-sm">
+          Mollit commodo laborum nulla pariatur non pariatur quis aliqua
+          proident adipisicing tempor.
+        </p>
+        <p class="text-sm">
+          <input type="checkbox" required /> Nisi dolore voluptate fugiat labore
+          dolore ex non sunt dolore cupidatat qui.
+        </p>
+      </div>
+      <button
+        class="flex justify-center bg-lime-800 rounded w-full my-3 mb-40 text-white font-bold py-2 transition-transform hover:scale-105 hover:bg-lime-900 hover:shadow-md hover:shadow-black hover:ease-out hover:duration-300"
+        type="submit"
+        id="env"
+        onclick="enviar()"
+        >Enviar</button
+      >
+    </form>
+  </div>
+  
 
+  <script>
+    const urlParams = new URLSearchParams(window.location.search);
+    const nombre = urlParams.get('nombre');
+    const correo = urlParams.get('correo');
+    const telefono = urlParams.get('telefono');
+    const direccion = urlParams.get('direccion');
+    
+    const env = document.querySelector('#env');
+    const enviar = env?.addEventListener('click', (e) => {
+      e.preventDefault();
+      window.open(`https://api.whatsapp.com/send?phone=5216624451613&text=Hola mi nombre es ${nombre}. Mi correo es ${correo}, mi número de teléfono es ${telefono}, y mi dirección es ${direccion}.`, '_blank');
+    });
 
-</Layout>
+  </script>
+</Layout>

src/pages/TrabajaConNosotros/index.astro

@@ -3,79 +3,158 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <Layout title="Trabaja con nostros">
-    <div>
+  <div>
+    <div class="grid place-items-center my-10">
+      <h1 class="text-3xl font-bold text-slate-800 mb-3">
+        <b class="text-lime-700">Se busca gente para</b> unirse a nuestro equipo
+      </h1>
+      <p>
+        Dolor ad proident pariatur ex laborum voluptate non sunt excepteur non.
+      </p>
+      <p>
+        Elit quis aliquip irure magna occaecat cillum dolor nisi cupidatat
+        cillum minim consectetur.
+      </p>
+      <p>Laboris irure culpa sint elit.</p>
+      <p>
+        Amet nisi adipisicing laboris labore velit occaecat id amet ad ullamco
+        enim.
+      </p>
+      <p>Eu amet aliquip aute proident dolor.</p>
 
-        <div class="grid place-items-center my-10">
-            <h1 class="text-3xl font-bold text-slate-800 mb-3"><b class="text-lime-700">Se busca gente para</b> unirse a nuestro equipo</h1>
-            <p>Dolor ad proident pariatur ex laborum voluptate non sunt excepteur non.</p>
-            <p>Elit quis aliquip irure magna occaecat cillum dolor nisi cupidatat cillum minim consectetur.</p>
-            <p>Laboris irure culpa sint elit.</p>
-            <p>Amet nisi adipisicing laboris labore velit occaecat id amet ad ullamco enim.</p>
-            <p>Eu amet aliquip aute proident dolor.</p>
-
-            <div class="my-10"></div>
+      <div class="my-10"></div>
 
-            <h1 class="text-3xl font-bold text-slate-800 mb-3 ">¿Tienes alguno de estos <b class="text-lime-700">perfiles</b>?</h1>
-            <p>Cillum magna minim in qui duis deserunt incididunt aliqua voluptate.</p>
-            <p>Labore eu fugiat dolor aliquip irure aute laborum occaecat.</p>
-            <p>Tempor dolore fugiat minim ut ipsum duis ex incididunt in officia Lorem.</p>
-            <p>Esse cupidatat amet elit voluptate enim tempor dolore id deserunt minim elit aliquip.</p>
+      <h1 class="text-3xl font-bold text-slate-800 mb-3">
+        ¿Tienes alguno de estos <b class="text-lime-700">perfiles</b>?
+      </h1>
+      <p>
+        Cillum magna minim in qui duis deserunt incididunt aliqua voluptate.
+      </p>
+      <p>Labore eu fugiat dolor aliquip irure aute laborum occaecat.</p>
+      <p>
+        Tempor dolore fugiat minim ut ipsum duis ex incididunt in officia Lorem.
+      </p>
+      <p>
+        Esse cupidatat amet elit voluptate enim tempor dolore id deserunt minim
+        elit aliquip.
+      </p>
 
-            <div class="mt-10">
-                <div class="space-y-6">
-                  <div class="flex space-x-4">
-                    <i class="fa-solid fa-circle-right fa-2xl mt-3" style="color: #2d8128;"></i>
-                    <p>Irure tempor tempor veniam ipsum culpa sunt</p>
-                  </div>
-                  <div class="flex space-x-4">
-                    <i class="fa-solid fa-circle-right fa-2xl mt-3" style="color: #2d8128;"></i>
-                    <p>Consectetur ut excepteur aute nostrud magna</p>
-                  </div>
-                  <div class="flex space-x-4">
-                    <i class="fa-solid fa-circle-right fa-2xl mt-3" style="color: #2d8128;"></i>
-                    <p>Incididunt non Lorem do ex eu veniam</p>
-                  </div>
-                </div>
-              </div>
+      <div class="mt-10">
+        <div class="space-y-6">
+          <div class="flex space-x-4">
+            <i
+              class="fa-solid fa-circle-right fa-2xl mt-3"
+              style="color: #2d8128;"></i>
+            <p>Irure tempor tempor veniam ipsum culpa sunt</p>
+          </div>
+          <div class="flex space-x-4">
+            <i
+              class="fa-solid fa-circle-right fa-2xl mt-3"
+              style="color: #2d8128;"></i>
+            <p>Consectetur ut excepteur aute nostrud magna</p>
+          </div>
+          <div class="flex space-x-4">
+            <i
+              class="fa-solid fa-circle-right fa-2xl mt-3"
+              style="color: #2d8128;"></i>
+            <p>Incididunt non Lorem do ex eu veniam</p>
+          </div>
         </div>
+      </div>
+    </div>
 
-        <div class="flex justify-center mt-10 ">
-            <form action="POST" autocomplete="on">
-                <div class="flex flex-col-2 space-x-3">
-                    <input type="text" placeholder="Nombre" required class="mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700">
-                    <input type="email" placeholder="Apellido" required class="mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700">
-                </div>
-    
-                <div class="flex flex-col-2 space-x-3">
-                    <input type="text" placeholder="Teléfono"  required class= "mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700"> 
-                    <input type="text" placeholder="Dirección" required class= "mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700 ">
-                </div>
-
-                <div class="flex justify-center flex-row-1 w-full my-6 ">
-                    <textarea name="Mensaje" id="" cols="90" rows="4" placeholder="Mensaje" class="border-2 border-lime-700 rounded placeholder:font-bold focus: outline-2 outline-lime-700 placeholder:absolute placeholder:left-4 placeholder:top-2 placeholder:text-slate-600"></textarea>
-                </div>
+    <div class="flex justify-center mt-10">
+      <form action="GET" action="/TrabajaConNosotros" autocomplete="on">
+        <div class="flex flex-col-2 space-x-3">
+          <input
+            type="text"
+            name="nombre"
+            placeholder="Nombre"
+            required
+            class="mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700"
+          />
+          <input
+            type="text"
+            name="apellido"
+            placeholder="Apellido"
+            required
+            class="mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700"
+          />
+        </div>
 
-                <div>
-                    <p class="text-slate-800 mb-2">Adjunte tu CV</p>
-                    <input type="file" name="CV" id="cv">
-                </div>
+        <div class="flex flex-col-2 space-x-3">
+          <input
+            type="text"
+            name="telefono"
+            placeholder="Teléfono"
+            required
+            class="mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700"
+          />
+          <input
+            type="text"
+            name="direccion"
+            placeholder="Dirección"
+            required
+            class="mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700"
+          />
+        </div>
 
-                <div class="grid place-items-center my-10">
-                    <p>INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS</p>
-                    <p class="text-sm">Esse sint sunt est magna et incididunt ullamco exercitation laborum cillum elit tempor ea.</p>
-                    <p class="text-sm">Mollit commodo laborum nulla pariatur non pariatur quis aliqua proident adipisicing tempor.</p>
-                    <p class="text-sm"><input type="checkbox" required>  Nisi dolore voluptate fugiat labore dolore ex non sunt dolore cupidatat qui.</p>
-                </div>
+        <div class="flex justify-center flex-row-1 w-full my-6">
+          <textarea
+            name="Mensaje"
+            cols="90"
+            rows="4"
+            placeholder="Mensaje"
+            class="border-2 border-lime-700 rounded placeholder:font-bold focus: outline-2 outline-lime-700 placeholder:absolute placeholder:left-4 placeholder:top-2 placeholder:text-slate-600"
+          ></textarea>
+        </div>
 
+        <div>
+          <p class="text-slate-800 mb-2">Adjunte tu CV</p>
+          <input type="file" name="CV" id="cv" />
+        </div>
 
-                <button class="flex justify-center bg-lime-800 rounded w-full my-3 mb-40 text-white font-bold py-2 transition-transform hover:scale-105 hover:bg-lime-900 hover:shadow-md hover:shadow-black hover:ease-out hover:duration-300" 
-                type="submit">Enviar</button>
-    
-                
-            </form> 
+        <div class="grid place-items-center my-10">
+          <p>INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS</p>
+          <p class="text-sm">
+            Esse sint sunt est magna et incididunt ullamco exercitation laborum
+            cillum elit tempor ea.
+          </p>
+          <p class="text-sm">
+            Mollit commodo laborum nulla pariatur non pariatur quis aliqua
+            proident adipisicing tempor.
+          </p>
+          <p class="text-sm">
+            <input type="checkbox" required /> Nisi dolore voluptate fugiat labore
+            dolore ex non sunt dolore cupidatat qui.
+          </p>
         </div>
-    
 
+        <button
+          class="flex justify-center bg-lime-800 rounded w-full my-3 mb-40 text-white font-bold py-2 transition-transform hover:scale-105 hover:bg-lime-900 hover:shadow-md hover:shadow-black hover:ease-out hover:duration-300"
+          type="submit"
+          id="env"
+          onclick="enviar()"
+          >Enviar</button
+        >
+      </form>
     </div>
+  </div>
 
-</Layout>
+  <script>
+    const urlParams = new URLSearchParams(window.location.search);
+    const nombre = urlParams.get("nombre");
+    const apellido = urlParams.get("apellido");
+    const telefono = urlParams.get("telefono");
+    const direccion = urlParams.get("direccion");
+    const env = document.querySelector("#env");
+
+    const enviar = env?.addEventListener("click", (e) => {
+      e.preventDefault();
+      window.open(`https://api.whatsapp.com/send?phone=5216624451613&text=Hola mi nombre es ${nombre} ${apellido}.Mi número de teléfono es ${telefono}, y mi dirección es ${direccion}.`, '_blank');
+    });
+
+
+    
+  </script>
+</Layout>