Diseño y Posicionamiento Web con Joomla › Foros › Joomla! 3.0 › Componentes Joomla 3.0 › Modificar estilo de Formulario de Contacto
- Este debate tiene 4 respuestas, 3 mensajes y ha sido actualizado por última vez el hace 9 años, 4 meses por
felipergueza.
-
AutorEntradas
-
-
04/10/2015 a las 06:26 #114378
felipergueza
ParticipanteHe 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]Attachments: -
04/10/2015 a las 12:09 #114379
DimarR
ParticipanteHola.
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.
-
04/10/2015 a las 18:02 #114380
felipergueza
ParticipanteEl 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.
-
05/10/2015 a las 19:09 #114382
lorena
ParticipanteAicontactsafe 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
-
05/10/2015 a las 20:10 #114383
felipergueza
ParticipanteGracias 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.
-
-
AutorEntradas
- Debes estar registrado para responder a este debate.