0

Tengo mi plantilla de contacto que cree en html5 con css pero al utlizarla con un modelo de django y ponerle el form para que me guarde los datos del formulario en la base de datos me muestra el formato del formulario por defecto de django.

Este es el views.py de mi aplicación:

def contacto(request):
if request.method =="POST":
    form = ContactoForm(request.POST)
    if form.is_valid():
            usuario = form.save(commit=False)
            usuario.save()
            return redirect('contacto')
else:
    form = ContactoForm()
return render(request,'Contacto.html',{'form': form})

Este es el forms.py de mi aplicación:

from django import forms
from .models import Contacto

class ContactoForm(forms.ModelForm):

class Meta:
    model = Contacto
    fields = ('nombre', 'apellido', 'email','ciudad','mensaje',)

CON MI ESTILO CSS SE VE ASIintroducir la descripción de la imagen aquí

Y ESTE ES EL QUE CREA DJANGO POR DEFECTO COMO LO PUEDO HACER PARA PONER EL MIO introducir la descripción de la imagen aquí


<!--form method="POST" class="post-form">

<div id="caja1">    
    <div  class="row">

                <div id="e1" class="input-field col s6" >
                    <i id="i1"class="material-icons prefix">person_outline</i>
                    <label for="nombre">Nombre</label>
                    <input id="t1" type="text" name="nombre" required>
                </div>
    </div>
    <div class="row">
                <div  class="input-field col s6">
                    <i id="i2" class="material-icons prefix">person_pin</i>
                    <input id="t3" type="text" name="apellido" required>
                    <label for="apellido">Apellido</label>

                </div>
    </div>
    <div class="row">   
                <div  class="input-field col s6">
                    <i id="i3"class="material-icons prefix">email</i>
                    <label for="email">Email</label>
                    <input id="t3" type="email" name="email"  required>
                </div>
    </div>
    <div class="row">   
                <div  class="input-field col s6">
                    <i id="i4"class="material-icons prefix">location_city</i>
                    <label for="ciudad">Ciudad</label>
                    <input id="t4" type="text" name="city"  required>
                </div>
    </div>
    <div class="row">
                <div  class="input-field col s6">
                    <i id="i5" class="material-icons prefix">mode_edit</i>
                    <label for="mensaje">Mensaje</label>
                    <textarea id="t5"name="mensaje" id="" rows="10" class="materialize-textarea"  length="200" required></textarea>
                </div>
    </div>          

</div>              
                 <p class="center-align">
                    <button id="btn" class="waves-effect waves-teal btn" type="submit"><i class="material-icons right">send</i>Enviar</button>
                </p>
                <p class="center-align">
                    <button id="btn1" class="waves-effect waves-teal btn" type="reset"><i class="material-icons right">clear_all</i>Limpiar</button>
                </p>


</form>
-->

ESTE ES EL QUE DA DJANGO

<form method="POST" class="post-form">{% csrf_token %}
    {{ form.as_p }}
    <p class="center-align">
            <button id="btn" class="waves-effect waves-teal btn" type="submit"><i class="material-icons right">send</i>Enviar</button>
    </p>
    <p class="center-align">
                    <button id="btn1" class="waves-effect waves-teal btn" type="reset"><i class="material-icons right">clear_all</i>Limpiar</button>
    </p>
</form>
1

1 respuesta 1

0

Debes configurar los widgets en la clase Meta

class Meta:
   ...
   widgets = {
       'my_field1': forms.Select(attrs={'class': 'form-control'}),
       'my_field2': forms.CharField(attrs={'class': 'form-control'}),
       ...
   }

En 'class' defines las clases que contienen los estilos de tu template

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.