Poner formulario de contacto o reserva en mi web

CREAR UN FORMULARIO DE CONTACTO O RESERVA DE FORMA SENCILLA

Configurar un formulario de contacto o reserva nunca fue tan sencillo y rápido. Para llevas a cabo esta labor acudiremos a la página suformulario.com donde en tan solo 30 segundos es posible tener un formulario configurado y operativo.

El funcionamiento de esta web es de los más sencillo, configuramos nuestro formulario y lo registramos mediante un correo electrónico.
Una vez tengamos el formulario operativo lo ponemos en nuestra web, facebook, blog, etc... siguiendo los ejemplos de uso que nos proporciona esta misma página.
Finalmente por cada registro que se produzca en nuestro formulario recibiremos un correo electrónico con el detalle del mismo. Igualmente tendremos disponibles todos los registros en la zona privada, donde podemos descargarlo en formato de PDF o excel.

Vamos a explicar de forma detallada y gráfica como poner un formulario en nuestra página web, facebook, blog o cualquier otro sitio.

1º.- Accedemos a http://www.suformulario.com

Esta página es muy sencilla de usar. Si dividimos la pantalla de forma vertical desde el centro diferenciamos dos zonas:

• Izquierda: Instrucciones de uso y panel de acceso a usuarios registrados
• Derecha: configuradores simples de formularios
• Pie: Donaciones, contacto, etc...

Si se pincha en cada uno de los puntos del panel izquierdo, se nos desplegará una información más detallada de cada operación

2º.- Selección del tipo de formulario entre (Contacto, reserva y configurador avanzado). En esta entrada del blog vamos a centrarnos en los configuradores simples de contacto y reserva. El configurador avanzado aunque es mucho más dinámico y versátil que sus dos compañeros necesita una mención especial.

3º.- Selección de campos que van a formar parte de nuestro formulario.

La operación es tan sencilla como selección uno por uno o varios de los campos que queremos que formen parte de nuestro formulario.

Al final de este blog puedes consultar los detalles de los campos que puedes añadir a tu formulario a través de estos configuradores

4º.- Marcar los campos como obligatorios. Estos configuradores nos permiten marcar fácilmente que elementos deseamos que nuestros propios usuarios rellenen de forma obligatoria. De esta forma podemos marcar por ejemplo que para registrar un formulario el usuario debe de introducir al menos el correo electrónico.

5º.- Elegir el aspecto de nuestro formulario. Tan solo es necesario seleccionar un valor del desplegable.

Antes de guardar y registrar el formulario es recomendable que lo "previsualicemos" para ver el aspecto final que va a tener.

No es necesario introducir tu correo para previsualizar el formulario y podrás verificar que el formulario se adapta a tus necesidades antes de realizar el registro.

6º.- Registro del formulario: Para generar nuestro formulario tan solo es necesario insertar nuestro correo electrónico, aceptar la política de privacidad, insertar el campo de números aleatorios y pulsar sobre el botón de "guardar".

8º.- Activar el formulario: Tras pulsar sobre guardar el sistema nos mostrará una pantalla con la información de nuestro formulario y con ejemplos de uso.

Nada más registrar el formulario este se encuentra en estado de "Borrador". Unos minutos después de registrar el formulario (Esta operación puede tardar hasta 5 minutos) recibiremos en nuestro correo electrónico un e-mail donde podemos verificar y activar el formulario.

En el caso de que no recibir este correo verifique la carpeta de SPAM de su correo electrónico. Si aún así no nos ha llegado este correo o lo hemos perdido podemos acceder a la zona privada que nos mostrará toda la información sobre los formularios que tengamos configurados así como los registros que tengamos en los mismos.

Una vez hayamos verificado nuestro formulario ya podemos hacer uso del mismo de forma ilimitada.

A través de Suformulario.com evitamos instalar en nuestro servidor aplicaciones extras o tener que formarnos en ellas. También nos resulta útil si carecemos de los conocimientos necesario en programación. Por último es un manera sencilla de hacer de nuestro blog o facebook un lugar personalizado y al alcance de nuestros lectores, clientes, usuarios, etc... ya que les permitimos de forma rápida y sencilla ponerse en contacto con nosotros.

En breve publicaremos nuevas entradas en el blog con las maneras más sencillas y útiles de insertar estos formularios en tu web, blog, correo electrónico, etc...

Si quieres ayudarnos a mejorar puedes dejar un comentario o bien enviarnos tu sugerencia a través de nuestro formulario de consulta.

Si quieres colaborar con nosotros para que podamos mejorar los servidores y la web puede hacer tu aportación pinchando aquí

DETALLE DE LOS CAMPOS QUE PUEDO AÑADIR A MI WEB

Formulario de contacto:

• Tratamiento: Círculo de selección con las opciones de Sra y Sr.
• Nombre: Caja de texto corto que admite un máximo de 90 caracteres.
• Apellidos: Caja de texto corto que admite un máximo de 120 caracteres.
• E-mail: Caja de texto corto que admite un máximo de 100 caracteres y valida que la información introducida tenga formato de correo electrónico.
• Organización: Caja de texto corto que admite un máximo de 120 caracteres.
• Teléfono: Caja de texto corto que admite un máximo de 16 caracteres. Permite número internacionales y no valida el comienzo del mismo para que sea operativo en cualquier parte del mundo.
• Código Postal: Caja de texto corto de hasta 25 caracteres.
• Listado de motivos: Cuadro desplegable donde se pueden seleccionar los valores de "Consulta", "Sugerencia", "Soporte", "Incidencia" y "Otros".
• Asunto: Caja de texto corto de hasta 80 caracteres
• Página web: Caja de texto corto de hasta 100 caracteres.
• Comentario: Área de texto amplio de hasta 2000 caracteres.

Formulario de contacto:

• Tratamiento: Círculo de selección con las opciones de Sra y Sr.
• Nombre: Caja de texto corto que admite un máximo de 90 caracteres.
• Apellidos: Caja de texto corto que admite un máximo de 120 caracteres.
• Dirección: Caja de texto corto de hasta 140 caracteres.
• Población: Caja de texto corto de hasta 85 caracteres.
• E-mail: Caja de texto corto que admite un máximo de 100 caracteres y valida que la información introducida tenga formato de correo electrónico.
• País: Caja de texto corto que admite un máximo de 85 caracteres.
• Teléfono: Caja de texto corto que admite un máximo de 16 caracteres. Permite número internacionales y no valida el comienzo del mismo para que sea operativo en cualquier parte del mundo.
• Código Postal: Caja de texto corto de hasta 25 caracteres.
• Fecha de entrada: Caja de texto con un icono de calendario, limitada para solo introducir fechas. Valida que el formato de la fecha sea correcto.
• Fecha de salida: Caja de texto con un icono de calendario, limitada para solo introducir fechas. Valida que el formato de la fecha sea correcto
• Página web: Caja de texto corto de hasta 100 caracteres.
• ¿Cuántos días?: Caja de texto corto, limitado a introducir 2 dígitos de tipo numérico.
• Ocupación/Habitación: Desplegable con los valores "Individual (1p)", "Doble con alojamiento individual (1p)", "Doble (2p)" y "Otra"
• Tipo de habitación: Desplegable con los valores "Normal", "Junior suite" y "Suite".
• Cama supletoria: Check de selección.
• Comentario: Área de texto amplio de hasta 2000 caracteres.

Poner aviso sobre el uso de cookies en mi web

¿Cómo poner un aviso sobre el uso de cookies propias y de terceros en nuestra web?

Tras la inclusión de esta nueva ley son muchas las páginas web que ya se han adaptado a la legislación y muestran un aviso sobre el uso de cookies propias y de terceros en su web. En este blog te presentamos una manera sencilla de incorporar este mensaje en tu web sin tener que poner patas arriba tu diseño y contenidos

Incorporarlo en tu web es muy sencillo tanto si se trata de una web desarrollada solo en HTML como si utilizas PHP para su desarrollo. También es muy sencillo de incorporar a páginas que se hayan desarrollado con Joomla o similares

Para aquellos que lleguen a este blog con prisa puden descargarse el código PHP, HTML y todos los recursor del siguiente enlace:

Pincha aquí para descargar los fuentes (avisocookies.php , avisocookies.cssy imágenes)

También puedes ver con tus propios ojos la página de ejemplo en: http://www.suformulario.com/blog/avisocookies/index.php

AVISO IMPORTANTE: En el caso de que estéis usando un servidor en vuestro equipo local (EasyPHP, Wimp, Apache a secas o cualquier otro servidor) no  funcionará el botón de "Aceptar y ocultar".  Solo falla ejecutando desde vuestro ordenador local, una vez que lo instaléis o subáis a un servidor con DOMINIO podréis comprobar que funciona a la perfección. 

Las cookies son validadas contra un dominio (http://www.suformulario.com por ejemplo), cuando ejecutas un servidor local, no dispones de dominio, certificado ni acridetición que indique al navegador que estás usando que la página es real, existe y tiene unas propiedades. 

Cuando el usuario pincha sobre "Aceptar y ocultar" nuestra web instala en el PC/Ipad/Teléfono/etc... del cliente/usuario una cookie (totalmente inofensiva). Cada vez que el usuario acceda nuestra web, el código que vais a copiar comprobará si ya existe esa cookie en su equipo. En el caso de que exista no mostrará más el mensaje.

Pásate por nuestra página de google+ para conocer las últimas novedades disponibles en nuestra web: +suformulario com 

El código publicado en este blog hace uso de la librería jquery de javascript.

Código PHP: (avisocookies.php)

<!-- Es necesario importar la hoja de estilos 'avisocookies.css', la librería 'jquery.js' y los recursos -->

<?php
$rutaRelativa = ".";
$param = "off";
$hayCookie = false;

//Controlamos si el usuario ha pulsado sobre la opción de aceptar de la capa emergente

if (isset($_POST["aceptar_cookie"]) && $_POST["aceptar_cookie"] != "")
   $param = $_POST["aceptar_cookie"];

if(!isset($_COOKIE["cookieaceptada"]) && $param == "acepta")

{
   //La cookie Caduca en un año
   setcookie("cookieaceptada", $param, time() + 365 * 24 * 60 * 60, "/", "suformulario.com", 0);
   $hayCookie = true;
   $retornoJson["resultado"]= array("ok"=>$param);
   echo json_encode($retornoJson);
}
else if(isset($_COOKIE["cookieaceptada"]))
{
   //Si hay cookies
   $hayCookie = true;
}
else
{
   $hayCookie = false;
}

//Si este valor es false, entonces volvemos a motrar la capa con el aviso
if (!$hayCookie)
{

?>

<script type="text/javascript">
<!--
function cerrarCookie()
{
  //Ocultamos la capa poco a poco
  $("#avisocookie").toggle("slow");
}

function mostrarCookie()

{
  //Mostramos la capa poco a poco
    $("#avisocookie").show("slow");
}

function aceptarCookie()

{
  cerrarCookie();
  $.ajax({
     url: "<?php echo $rutaRelativa;?>/avisocookies.php",
     data: "aceptar_cookie=acepta",
     contentType: "application/x-www-form-urlencoded",
     type: "POST",
     success: function(retorno){
     try
     {
        if (retorno == null || retorno == "")
            mostrarCookie();
     }
     catch (e){
       alert(e);
       mostrarCookie();
      }
     }
  });
}
//-->
</script>
<link rel="stylesheet" type="text/css" href="<?php echo $rutaRelativa;?>/css/avisocookies.css">
<div id="avisocookie">
  <div class="cpMSGcookies">
     <div class="mCookie1"><div class="mCookie2"><div class="mCookie3"><div class="mCookie4"><div class="mCookie5">
      <span class="textocookie">El sitio web suformulario.com utiliza cookies propias y de terceros para poder ofrecerte una mejor experiencia de navegaci&oacute;n, recordar tus preferencias y mejorar constantemente seg&uacute;n los h&acute;bitos de navegaci&oacute;n.<br/>
Si sigues navegando sin cambiar la configuraci&oacute;n, aceptas el uso de cookies en nuestro sitio.</span>
     <div class="btnAceptarCookie">
          <input type="button" value="Aceptar y ocultar" id="aceptarCookie" onclick="aceptarCookie();"/>
     </div></div></div></div></div></div>
     </div>
     <div id="cerracookies" class="cpMSGcerrarcookie">
       <img alt="Cierra el mensaje emergente" src="<?php echo $rutaRelativa;?>/img/cerrar_ventana.png" onclick="cerrarCookie();" style="cursor:pointer"/>
     </div>
</div>

<?php }?>

<!-- Fin del fuente -->

Si copias y pegas este código, no funcionará correctamente ya que necesitas su hoja de estilos para poder visualizarlo bien (*.css). Puedes descargarte todos los fuentes de pinchando aquí.

El ejemplo que te puedes descargar tiene fondo gris claro y bordes gris oscuros. Puedes cambiar los colores a los que te plazcan, tan solo tienes que modificar las siguientes entradas del fichero avisocookies.css:

-- En esta entrada puedes cambiar el borde de la capa, dentro de recursos hemos incorporado 3 bordes más. Si quieres puede crear tu propio borde o bien eliminarlo
.cpMSGcookies, .cpMSGcookies .mCookie1, .cpMSGcookies .mCookie1 .mCookie2, .cpMSGcookies .mCookie1 .mCookie2 .mCookie3 {
background:url('../../estatico/img/redondoG.png') transparent no-repeat;
}

-- En esta entrada puedes cambiar el color de fondo. Tanto el color de fondo como el color y tamaño del borde deberían de encajar con la entrada anterior.
.cpMSGcookies .mCookie1 .mCookie2 .mCookie3 .mCookie4, .cpMSGcookies .mCookie1 .mCookie2 .mCookie3 .mCookie4 .mCookie5 {
background-color:#F2F2F2;
border:3px solid #777777;
}

Otros elementos que te pueden ser útiles para tu web, blog, foro, red social o cualquier otro contenido son los formularios (Formulario de contacto, reserva, compra de artículos, intercambio, etc...). A través de www.suformulario.com puedes configurar todo tipo de formularios de forma gratuita.


Puedes dejar tu comentario a continuación.

Si tienes alguna duda, sugerencia o cualquier otra cuestión y no quieres registrarte puedes ponerte en contacto con nosotros a través del formulario de contacto de nuestra web http://www.suformulario.com/?contactar=yes

Si te gusta este blog, no te olvides de hacer +1.