Formularios para cualquier página web

¿Necesitas algo más que un simple formulario de contacto?

Si tu respuesta es "Si" has dado con el tutorial correcto. Si tu respuesta es "No", también has encontrado el tutorial que necesitas.

Hoy te vamos a enseñar a usar el configurador avanzado que puedes encontrar dentro de suformulario.com. Tanto si necesitas un simple formulario de contacto como si se trata de un formulario más complejo, este nuevo configurador va a cumplir tus deseos. En el caso de que tan solo necesites un formulario de contacto simple puedes acudir a nuestra entrada anterior y disponer de un formulario de contacto en menos de un minuto-

Bueno... pues vamos al tajo...

En suformulario.com disponemos de 3 configuradores gratuitos y accesibles sin registro previo que son contacto, reserva y avanzado.  En este tutorial vamos a centrar nuestra atención sobre el configurador avanzado.

Lo primero que debemos de hacer es acceder a http://www.suformulario.com.

En segundo lugar seleccionaremos el configurador avanzado. La página se divide en dos columnas
siendo la columna izquierda las instrucciones para obtener un formulario de forma rápida y la columna de la derecha el configurador de formularios. Este configurar dispone más opciones que sus hermanos menores.

Aunque se trata de un configurador más completo y más completo sigue siendo extremadamente fácil configurar un formulario. Hemos seguido la premisa de poder optener un formulario en menos de un minuto.

El configurador se divide en 4 partes que os vamos a explicar de forma secuencial.

De esta forma nuestro tercer paso sería buscar los campos que van a componer nuestro formulario.
Podemos hacer uso del filtro para buscar un campo que se adapta a nuestra necesidades o buscar por todos los campos que hay dado de alta en suformulario.com. Si decidimos buscar por todos los campos debemos saber que se mostrarán de forma paginada de cinco en cinco. En el caso de que de que no encontremos un campo que se adapta a nuestras necesidades podemos solicitar la creación de un nuevo tipo de campo a través de un formulario de alta de campos.

Una vez pinchado sobre el botón de buscar podremos añadir los campos a la configuración de nuestro formulario pinchando sobre el botón  complentando así  cuarto paso.

Os explico brevemente en que consiste cada elemento de la tabla de campos y como obtener más infomación de cada uno de los campos.

A través del botón  podemos ver más información del campo antes de añadirlo a la configuración.

Actualmente no hay soporte multi-idioma, pero se está evolucionando la aplicación para soportar español e inglés. Una vez la aplicación disponga de soporte para multi-idioma todos los campos que dispongan de traducción se podrán visualizar en el idioma seleccionado.

Nombre del campo: Cadena de texto que identifica el campo.
Etiqueta emergente: Cadena de texto que se muestra cuando un usuario pasa el ratón por encima del campo.
Tipo de campo: Este valor indentifica si el campo es un desplegable una caja de texto grande, un check de selección o una caja de texto corta.
Descripción: En la descripción del campo se suele dar información relevante como por ejemplo el número de caracteres que admite,o si este campo emite alguna notificación (tal y como se puede visualizar en el ejemplo).


Cada campo que añadimos al formulario con el botón se incorpora en el panel inferior.

Siempre nos podemos arrepentir y eliminar campos de este panel mediante el icono , también podemos marcar un campo como obligatorio 

 

y reordenar los campos añadidos (Quinto paso). 

El configurador avanzado de suformulario.com también te permite establecer el título que más te convenga dentro del campo Título (Opcional).

El sexto paso sería elegir el estilo para nuestro formulario, escribir nuestra dirección de correo electrónico  (donde queremos recibir las notificaciones de contacto, reserva, etc...) y aceptar la política de privacidad.

Por último solo queda rellenar los valores captcha (Imagen con letras y números aleatorios) y guardar el formulario.

Te recomendamos que antes de guardar el formulario lo previsualices midiante el botón de "PREVIO" te ayudará a ver como queda el formulario y podrás hacer las modificaciones que más te convengan de forma previa a guardar el formulario definitivo.

Una vez pulsado sobre el botón de "Guardar" suformulario.com te mostrará la URL del formulario que has configurado y te enviará un correo electrónico (Es muy importarte que el correo electrónico que uses sea correcto) con un enlace para activar el formulario (También lo puedes activar desde el panel privado de suformulario.com accediendo con tu correo y clave).

Suformulario.com te ofrecerá varias opciones para incorporar el formulario a tu página web como a través de un iframe, div o bien invocando directamente al formulario.

Puedes ver algunos ejemplos de páginas que han incorporado uno o varios formularios son:

http://www.next1.es/index.php?sec=contacto

http://www.madridconserjes.com/index.php?sec=contacto

Actualmente Suformulario.com carece de publicidad, puedes ayudar a que suformulario.com siga en pie haciendo una donación pinchando aquí.

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.