Formularios en Google Form Drive

Man-In-the-Middle · 9 Agosto 2016, 00:36 AM

Holas, alguien que me de un cable con esto, google form es una ***** como plantilla, asi que le quiero meter , algo responsive y mas atractivo,

Tengo que introducir

Código [Seleccionar]

<form action="https://docs.google.com/a/thelastart.com/forms/d/e/1FAIpQLSdtQcPqcl4ps8JJTmV6HaN4mVo_SItHfXSsKWoMXlZfZNwS3A/formResponse" method="POST" id="ss-form" target="_self" onsubmit=""><ol role="list" class="ss-question-list" style="padding-left: 0;">

Donde lo pongo, para que me respete el css??

Código [Seleccionar]


<!DOCTYPE html><html class=''>
<head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/markmurray/pen/JsAhx/" />

<link rel='stylesheet prefetch' href='//codepen.io/assets/reset/reset.css'>
<style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Merriweather);
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  background: #f1f1f1;
  font-family: 'Merriweather', sans-serif;
  padding: 1em;
}

h1 {
  text-align: center;
  color: #a8a8a8;
  text-shadow: 1px 1px 0 white;
}

form {
  max-width: 600px;
  text-align: center;
  margin: 20px auto;
}
form input, form textarea {
  border: 0;
  outline: 0;
  padding: 1em;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  display: block;
  width: 100%;
  margin-top: 1em;
  font-family: 'Merriweather', sans-serif;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  resize: none;
}
form input:focus, form textarea:focus {
  -moz-box-shadow: 0 0px 2px #e74c3c !important;
  -webkit-box-shadow: 0 0px 2px #e74c3c !important;
  box-shadow: 0 0px 2px #e74c3c !important;
}
form #input-submit {
  color: white;
  background: #e74c3c;
  cursor: pointer;
}
form #input-submit:hover {
  -moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  -webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
}
form textarea {
  height: 126px;
}

.half {
  float: left;
  width: 48%;
  margin-bottom: 1em;
}

.right {
  width: 50%;
}

.left {
  margin-right: 2%;
}

@media (max-width: 480px) {
  .half {
    width: 100%;
    float: none;
    margin-bottom: 0;
  }
}
/* Clearfix */
.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}
</style></head><body>
<h1>Elegant Contact Form</h1>
<form class="cf">
  <div class="half left cf">
    <input type="text" id="input-name" placeholder="Name">
    <input type="email" id="input-email" placeholder="Email address">
    <input type="text" id="input-subject" placeholder="Subject">
  </div>
  <div class="half right cf">
    <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
  </div>  
  <input type="submit" value="Submit" id="input-submit">
</form>

</body></html>

[u]nsigned · 9 Agosto 2016, 14:25 PM

Hola, si entendí bien, los estilos los querés aplicar en el formulario de Google en su dominio? Porque eso no se puede, igualmente los nuevos formularios de Google usan Material Design

Man-In-the-Middle · 9 Agosto 2016, 15:17 PM

Ajam!!, ese es el problema, los nuevos formularios, no dejan hacer nada, y la apariencia es fatal, , si lo quiero hacer responsive( tengo que meterlo al iframe)

, eb fin arreglado esta, pero de seguro me lo quitan en un tiempo

Código [Seleccionar]

<form action="https://docs.google.com/a/thelastart.com/forms/d/e/1FAIpQLSdtQcPqcl4ps8JJTmV6HaN4mVo_SItHfXSsKWoMXlZfZNwS3A/formResponse" method="POST" id="ss-form" target="_self" onsubmit=""  class="cf">
  <div class="half left cf">
    <input type="text" id="input-name" placeholder="Name"  name="entry.1000000">
    <input type="email" id="input-email" placeholder="Email address"  name="entry.1000001">
    <input type="text" id="input-subject" placeholder="Subject" name="entry.1567048330">
  </div>
  <div class="half right cf">
    <textarea name="entry.1000003" type="text" id="input-message" placeholder="Message"  ></textarea>
  </div>  
  <input type="submit" value="Submit" id="input-submit"  name="submit">
</form>

Cuando me refiero a quitar, es que google a finales de agosto de manda abajo los ids de google host, asi es cuestion de tiempo, para que hagan lo mismo

CitarEstimado administrador:

El año pasado anunciamos que dejaríamos de ofrecer alojamiento web en Google Drive para usuarios y programadores. El 31 de agosto de 2016, dejaremos de publicar contenido a través de googledrive.com/host/[id].

Según la información que tenemos, hay usuarios en tu organización que tienen páginas web alojadas en Drive. Hemos adjuntado un archivo CSV que contiene los elementos compartidos que se han publicado a través del alojamiento web de Drive en las últimas semanas.

Como alternativa al alojamiento web de Drive, te recomendamos dos opciones:

API de Drive: si estás utilizando la función de alojamiento web para proporcionar a los usuarios con sesión iniciada acceso a elementos de Drive públicos, puedes utilizar la API de Drive para este objetivo.
Alojamiento de Firebase: si estás utilizando la función de alojamiento web para proporcionar a los usuarios acceso a páginas web estáticas con contenido que está en Drive, puedes migrar a Firebase. Para realizar la migración, sube el contenido a Firebase y publica las páginas mediante las URL específicas de Firebase.
Si no haces cambios antes del 31 de agosto, los archivos que se hayan publicado con la función de alojamiento web no se cargarán.

Atentamente,
El equipo de Google Apps

[u]nsigned · 9 Agosto 2016, 15:35 PM

Yo lo que me pregunto es por que usas Google Forms siendo la peor opción de todas xD

Man-In-the-Middle · 9 Agosto 2016, 16:33 PM

por que trabajo todo con Google apps, y el nivel de seguridad es de lujo

WHK · 22 Agosto 2016, 02:25 AM

Bootstrap a ojos cerrados. Usa los CDN.

http://getbootstrap.com/css/
http://getbootstrap.com/components/

Acá el CDN: https://www.bootstrapcdn.com/

También te recomiendo Fonts awesome para vectorizar iconos, especiales para retina display:
http://fontawesome.io/
Acá el CDN: https://www.bootstrapcdn.com/fontawesome/

Y para hacerte la vida mas facil jQuery:
https://code.jquery.com/

Saludos.

[u]nsigned · 22 Agosto 2016, 18:43 PM

@WHK el problema es que los nuevos formularios de Google no dejan editar el CSS

WHK · 22 Agosto 2016, 18:53 PM

Claro que si, en el panel de google script agregas un nuevo template html y le editas todo el css que quieras y luego cargas el template desde el script con HtmlService.createTemplateFromFile(...).evaluate()

De hecho las buenas prácticas es que separes el controlador de la vista, donde el archivo html es la vista donde van todos los css y js que necesites y el .gs con todo el contenido a modo de controlador donde simplemente llamas a la vista y le pasas variables, luego desde el template los obtienes con <?= var ?> tal como se explica en la documentación oficial:

https://developers.google.com/apps-script/guides/html/templates

Aca un ejemplo de un script corriendo con bootstrap que acabo de hacer:
https://script.google.com/macros/s/AKfycbyZ9Hqrlle47GjXDfEQ86ZVp7EVr0vmMy4eL-dX_rOOd4UhVKi9/exec

Vegetrans · 23 Agosto 2016, 20:41 PM

Gracias por la información, me he pasado toda la tarde buscando en la red algo que me resolviera este tema

Vaya palo que no dejen publicar css