Cómo agregar un formulario de contacto de Google Docs a tu blog de Blogger

Es probable que muchos de ustedes se hayan subido al WordPress o al tren Tumblr, pero todavía hay una cantidad de personas que esperan en Blogger. Google se mantiene al día con los Joneses con su nueva interfaz Blogger in Draft, y la herramienta web sigue ofreciendo una alternativa más económica para la personalización total y los nombres de dominio originales para blogs personales.

Si usted es un usuario de Blogger, es posible que se haya preguntado ocasionalmente., “¿Cómo puedo crear uno de esos formularios de contacto increíbles que tienen todos los demás blogs del mundo??” Afortunadamente, si usted también es usuario de Google Docs, esto se puede hacer con relativa facilidad (y absolutamente sin dolor).

Haciendo la forma

Para comenzar, inicie sesión en Google Docs y cree un nuevo formulario como se muestra en la imagen a continuación. Puede marcar un título en su formulario para mantenerse organizado, pero en realidad podría dejar esta sección de su formulario como “Intitulado” Y no haría ninguna diferencia. Para que sea una página de contacto legítima, debe proporcionar a los usuarios el “texto de párrafo” tipo de pregunta. Esto permite suficiente espacio para largas preguntas o comentarios.

Tenga en cuenta que el formulario predeterminado inserta automáticamente dos preguntas de muestra. Asegúrese de eliminar la segunda muestra, o de lo contrario tendrá una consulta fantasma que realmente no necesita. Sin embargo, si desea agregar más preguntas utilizando diferentes formatos de respuesta (casillas de verificación, opciones múltiples, etc.), entonces es libre de hacerlo. Incluso puede hacer las respuestas requeridas para elementos tales como datos de contacto. Una vez que hayas terminado, asegúrate de recordar guardarla.

Rasgando la forma

Es posible que ya sepa que los formularios de Google tienden a pegarse a plantillas no personalizables que a menudo no encajan bien con el diseño de su blog. Claro, puede incrustar el formulario utilizando un código iFrame, pero aún conserva el mismo formato que las plantillas de cortador de galletas prediseñadas. Afortunadamente, hay una manera de evitar eso.

Después de completar su formulario, vuelva a la página de inicio de Docs y abra la hoja de cálculo del formulario que acaba de crear. Como nota al margen, esta hoja de cálculo le permitirá ver todos los envíos a su formulario. Cuando llegue a esta página, seleccione “Formar” en la barra de menú y luego haga clic “Ir a vivir forma“.

Mientras observa su página de formulario, debe usar la función que su navegador le permita para ver el código fuente de la página. Ya que estoy usando Chrome en mi Mac para este tutorial, simplemente usé mi trackpad para abrir el menú contextual y seleccioné “Ver código fuente“.

Aquí mismo, las cosas pueden ponerse tediosas, así que presta mucha atención. Debe usar la función Buscar de su navegador (CTRL + F) para ubicar el término “forma de acción“. Cuando lo encuentres, deberías ver este código:

Tome nota de dónde se encuentra esta línea de código y luego busque el siguiente código:

Copie completamente desde la primera línea de código mencionada a la siguiente línea de código mencionada. Si se siente más cómodo pegando este código en una aplicación de texto, entonces adelante. Lo estarás usando momentáneamente..

Instalando el formulario

Una vez que haya copiado con éxito el código seleccionado en su portapapeles, debe ingresar en el panel de control de Blogger. Como dije antes, estoy usando la interfaz de Blogger in Draft, pero si está usando la interfaz de usuario original, aún podrá seguir.

En primer lugar, debe crear una nueva página para su blog y titularla “Contáctame” o algo similar. Después de abrirlo, vaya directamente a la sección de edición HTML de la página y pegue el código.

A partir de ahora, básicamente ha completado la tarea de instalar el formulario en su blog. En este punto, la vista previa debe ser similar a la imagen de abajo. Sin embargo, las vistas previas serán diferentes para diferentes personas según la máquina que estén utilizando.

Personalizando el formulario

Como descubrí con mi blog personal, a veces habrá problemas como el hecho de que haya demasiado espacio entre el título de la página y el formulario en sí o que el cuadro de respuesta sea demasiado grande para el ancho del blog. Estos problemas menores se pueden solucionar fácilmente.

Si tiene problemas con que haya demasiado espacio entre el título y las preguntas, busque

br

etiquetas y eliminarlas. Sin embargo, si tiene problemas con el ancho del cuadro de respuesta, busque esta línea de código:

</pre> </blockquote><p>Ajustando el “cols” valor a un número menor, puede cambiar el ancho del blog para adaptarse a pantallas más pequeñas o navegadores alternativos. Además, puede cambiar las fuentes de las preguntas mientras edita la página. Con suficiente personalización, puedes terminar con algo como la siguiente imagen.</p><p><img src="//ephesossoftware.com/img/images_17/how-to-add-a-google-docs-contact-form-to-your-blogger-blog_11.png"></p><h2>Conclusión</h2><p>Esta es una forma rápida y eficiente de colocar un formulario de Google Docs con estilo en su blog de Blogger, y el tutorial podría adaptarse a cualquier otro blog o sitio web. Puedes hacer mucho más de lo que ves aquí, así que asegúrate de jugar un rato con él..</p><p>¿Qué otros sitios utilizas para hacer formularios web? ¿Cómo te resultó este tutorial? Si tiene algún problema para crear su propio formulario web, háganoslo saber en los comentarios o, de manera alternativa, haga una pregunta en MakeUseOf Answers.</p> <p><small>Explora más sobre: Google Docs.</small></p>


            </div>
            
            <div class="rek-block">
            <center>
                <ins class="adsbygoogle"
                style="display:inline-block;width:580px;height:400px"
                data-ad-client="ca-pub-3810161443300697"
                data-ad-slot="3145557800"></ins>
           <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
           </script>
            </center>
            </div>
            
            <div class="row PageNavigation d-flex justify-content-between font-weight-bold">
            
            <a class="prev d-block col-md-6" href="/articles/wordpress-plugins/how-to-add-a-glossary-or-dictionary-section-in-your-wordpress-site.html"> « Cómo agregar un glosario o una sección de diccionario en su sitio de WordPress</a>
            
            
            
            <a class="next d-block col-md-6 text-lg-right" href="/articles/wordpress-plugins/how-to-add-a-help-resource-section-in-wordpress-admin.html">Cómo agregar una sección de ayuda / recurso en el administrador de WordPress » </a>
            

            <div class="clearfix"></div>
            </div>

		</div>

	</div>
</div>


    
</div>
    

</div>
</div>


<footer class="footer">
    <div class="site-langs-list">
        <ul>
                <li class="site-lang"><a href="https://ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-DE"></i>Deutsch</a></li>
                <li class="site-lang"><a href="https://nl.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-NL"></i>Nederlands</a></li>
                <li class="site-lang"><a href="https://sv.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-SE"></i>Svenska</a></li>
                <li class="site-lang"><a href="https://no.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-NO"></i>Norsk</a></li>
                <li class="site-lang"><a href="https://it.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-IT"></i>Italiano</a></li>
                <li class="site-lang"><a href="https://fr.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-FR"></i>Français</a></li>
                <li class="site-lang"><a href="https://es.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-ES"></i>Español</a></li>
                <li class="site-lang"><a href="https://ro.ephesossoftware.com/articles/wordpress--web-development/how-to-add-a-google-docs-contact-form-to-your-blogger-blog.html"><i class="flag flag-RO"></i>Românesc</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 text-center text-lg-left">
                  © <script>
                        var currentTime = new Date();
                        var year = currentTime.getFullYear();

                        document.write(year);
                </script>
                <a href="https://es.ephesossoftware.com">es.ephesossoftware.com</a>
            </div>
            <div class="col-md-6 col-sm-6 text-center text-lg-right">    
                <span>¡Noticias del mundo de la tecnología moderna!</span>
            </div>
        </div>
    </div>
</footer>

   
</div> 

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
	"palette": {
	"popup": {
		"background": "#edeff5",
		"text": "#838391"
	},
	"button": {
		"background": "#4b81e8"
	}
	},
	"theme": "classic",
	"position": "bottom-right"
})});
</script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    
<script src="js/jquery.min.js"></script>
    
<script src="js/bootstrap.min.js"></script>

<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>

<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
        </script>



</body>
</html>