Modificar estilo de Formulario de Contacto

Diseño y Posicionamiento Web con Joomla Foros Joomla! 3.0 Componentes Joomla 3.0 Modificar estilo de Formulario de Contacto

Mostrando 4 respuestas a los debates
  • Autor
    Entradas
    • #114378
      feliperguezafelipergueza
      Participante

      He instalado el componente Aicontactsafe de la siguiente direccion: http://www.algisinfo.com/en/forum/9-aiContactSafe–English-/15934-com_aicontactsafe-2-0-21-adapted-for-joomla-3.html?start=12

      Dicha descarga corresponde a la actualizacion que realizo un usuario de este componente para utilizarlo en Joomla 3.XX.. ya que el desarrollador actualizo el componente solamente para Joomla 2.5.
      Bueno, entrando en tema la instalacion se dio sin problema alguno y el componente es funcional.
      El resultado del formulario es el siguiente:

      Aun asi aunque he logrado crear el formulario siento que le falta algo mas llamativo en cuanto al diseño del formulario por lo cual solicito un poco de apoyo para modificar el formulario en cuention del dise{o o estilo, el codigo del formulrio es el siguiente:
      [code type=css]/*
      align – margin
      make sure you have the corect aiContactSafe_mainbody_1 set everywhere on this CSS code
      the number following aiContactSafe_mainbody_ is the id of the profile
      if not properly set, the changes affecting this tag will not take effect
      */

      /* display into the center of the page */
      div#aiContactSafe_mainbody_1 {
      margin-left:auto;
      margin-right:auto;
      }

      /* force labels to be displayed inline */
      div#aiContactSafe_mainbody_1 label { display:inline-block !important; }

      /*

      set the width of some of the fields
      add here any of the fields of aiContactSafe
      replace “field_name” with the name of the field for which you want to set the width

      // Textbox
      div#aiContactSafe_mainbody_1 input#field_name
      // Combobox
      div#aiContactSafe_mainbody_1 select#field_name
      // Editbox
      div#aiContactSafe_mainbody_1 textarea#field_name
      // Checkbox – List
      div#aiContactSafe_mainbody_1 input.field_name
      // Radio – List
      div#aiContactSafe_mainbody_1 input.field_name
      // Date
      can’t modify the width
      // Email
      div#aiContactSafe_mainbody_1 input#field_name
      // Email – List
      div#aiContactSafe_mainbody_1 select#field_name
      // Joomla Contacts
      div#aiContactSafe_mainbody_1 select#field_name
      // Joomla Users
      div#aiContactSafe_mainbody_1 select#field_name
      // SOBI2 Entries
      div#aiContactSafe_mainbody_1 select#field_name
      // Hidden
      nothing to set
      // Separator
      div#aiContactSafe_mainbody_1 div#sp_field_name
      // File
      only a very complex solution will fix this problem
      // Number
      div#aiContactSafe_mainbody_1 input#field_name
      // Hidden Email
      nothing to set

      */
      div#aiContactSafe_mainbody_1 input#aics_name {
      width:240px;
      }
      div#aiContactSafe_mainbody_1 input#aics_email {
      width:240px;
      }
      div#aiContactSafe_mainbody_1 input#aics_phone {
      width:240px;
      }
      div#aiContactSafe_mainbody_1 input#aics_subject {
      width:240px;
      }
      div#aiContactSafe_mainbody_1 textarea#aics_message {
      width:240px;
      height:80px;
      }

      /* set the way labels and fields are displayed */
      div#aiContactSafe_mainbody_1 div.aiContactSafe_row {
      clear:both;
      padding:2px 0px;
      }
      div#aiContactSafe_mainbody_1 div.aiContactSafe_contact_form_field_label_left {
      float:left;
      padding:0px 3px;
      }
      div#aiContactSafe_mainbody_1 div.aiContactSafe_contact_form_field_left {
      float:left;
      padding:0px 3px;
      }

      div#aiContactSafe_mainbody_1 div.aiContactSafe_contact_form_field_label_right {
      float:left;
      padding:1px 3px;
      margin-top:2px;
      }
      div#aiContactSafe_mainbody_1 div.aiContactSafe_contact_form_field_right {
      float:right;
      padding:1px 3px;
      }

      /* center the contact form */
      div#aiContactSafe_mainbody_1 #aiContactSafeForm {
      margin-left:auto;
      margin-right:auto;
      }

      /* set the space between the notification for the required fields to the contact form */
      div#aiContactSafe_mainbody_1 div#aiContactSafe_info {
      margin-bottom:10px;
      }

      /* set the div containing the captcha */
      div#aiContactSafe_mainbody_1 div#div_captcha {
      clear:both;
      text-align:left;
      margin:5px 0px;
      padding-top:10px;
      }
      div#aiContactSafe_mainbody_1 div#div_captcha_info {
      margin-bottom:5px;
      }

      /* set the way the text counting the characters in the edit box */
      div#aiContactSafe_mainbody_1 div.countdown_div {
      font-size:9px;
      }
      div#aiContactSafe_mainbody_1 input.countdown_editbox {
      font-size:9px;
      text-align:center;
      border:none;
      overflow:visible;
      background:transparent;
      }

      /* set the cells containig the contact form and the contact information */
      div#aiContactSafe_mainbody_1 table#aiContactSafeForm td, div#aiContactSafe_mainbody_1 div#aiContactSafeForm {
      padding:5px;
      vertical-align:top;
      }

      /* modify the cursor of the labels to let the user know they can click on them */
      div#aiContactSafe_mainbody_1 label {
      cursor:pointer;
      }
      /* set the label tag containing the character that marks the required fields */
      div#aiContactSafe_mainbody_1 label.required_field {
      text-align:left;
      vertical-align:top;
      margin-left:5px;
      }

      /* hide the hidden rows */
      div#aiContactSafe_mainbody_1 div.aiContactSafe_row_hidden {
      display:none;
      }

      /* make the buttons higher */
      div#aiContactSafe_mainbody_1 div#aiContactSafeBtns input {
      padding:5px;
      margin:0px;
      }

      /* set the way the date is displayed */
      div#aiContactSafe_mainbody_1 table.aiContactSafe_date td {
      padding:0px 0px 0px 0px;
      vertical-align:middle;
      }
      div#aiContactSafe_mainbody_1 table.aiContactSafe_date td select {
      margin:0px 2px 0px 0px;
      }

      /* set the space between field sufix and the field and between the field prefix and the field */
      div#aiContactSafe_mainbody_1 span.aiContactSafe_sufix {
      margin-right:3px;
      }
      div#aiContactSafe_mainbody_1 span.aiContactSafe_prefix {
      margin-left:3px;
      }[/code]

      [b]Alguna sugerencia para mejorar el diseño y estilo del formulario.
      Nota: En cuestion de estilos CSS no son muy bueno.[/b]

    • #114379
      DimarDimarR
      Participante

      Hola.

      Asi pienso yo, es muy difícil que te apoyen. Sin acceso directo al formulario, seria dar tiros a ciegas. Ademas no indicas que diseño buscas ni cuales son los colores de tu web. En si, sin acceso pienso que es dificil que te ayuden.

    • #114380
      feliperguezafelipergueza
      Participante

      El formulario esta en el siguiente link http://www.maquinariayservicios.com/servicio-de-fletes

      Solo quiero darle un poco mas de vista, asignar un borde a todo el formulario, letras mas obscuras, etc.

    • #114382
      lorena28lorena
      Participante

      Aicontactsafe es muy rudimentario. ¿Porque no pruebas otro como el breezingforms?

      Aqui un tutorial para crear un form con dos columnas que explica otros aspectos como el estilo con themes especificos de breezingforms.

      Breezingforms version Lite y aqui la categoria del foro donde encontraras mas cosas : Foro ayuda Breezingforms

    • #114383
      feliperguezafelipergueza
      Participante

      Gracias por la sugerencia Lorena.

      Lo que me gusta de Aicontactsafe es que en el mismo back end de joomla aparecen todos los registros de las consultas generadas.

      De igual manera con un poquito mas de tiempo testeare la extension que me comentas.

Mostrando 4 respuestas a los debates
  • Debes estar registrado para responder a este debate.
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad