@alexto13

Как правильно подключить форму с сохранением такого же вида?

Здравствуйте, хочу подключить правильно форму ,чтобы было красиво ,как на картинке,а не с стандарными полями формы,еще интересует option с выбором связи с выбором пассажиров стрелочками.Как это можно реализовать?Заранее благодарен.

637ee053d30bf381343674.png

html:

<form method="post" action="#" class="book__item-form">
                     <input type="text" class="book__form-input text" placeholder="Ваше имя">
                     <input type="tel" class="book__form-input text" placeholder="Телефон (международный формат +)">
                     <input type="email" class="book__form-input text" placeholder="Email">

                     <div class='book__form-select select'>
                        <select>
                           <option value='0'>Укажите удобный метод связи</option>
                           <option value='1'>Телефон</option>
                           <option value='2'>Email</option>
                           <option value='3'>Whatsapp</option>
                           <option value='4'>Viber</option>
                           <option value='5'>Telegram</option>
                        </select>
                     </div>
                  
               </div>
               <div class="book__item">
                  <h4 class="book__item-title text-big">Детали поездки</h4>
                 
                     <input type="number" class="book__form-input text" min="1" max="3" step="1"
                        placeholder="Количество человек ( 1-3 человека)">
                     <input type="text" class="book__form-date book__form-input text"
                        placeholder="Время (укажите желаемое время)">
                  
               </div>
               <div class="book__item">
                  <h4 class="book__item-title text-big">Обратный билет</h4>
                  <div class="book__item-checkbox">
                     <label class="custom-checkbox">
                        <input type="checkbox" value="Yes">
                        <a href="bookreverse.html"  class="text">Требуется ли вам обратный билет?</a>
                     </label>
                  </div>
               </div>
            </div>
            <div class="book__container">
               <div class="book__item">
                  <h4 class="book__item-title text-big">Данные вашей поездки</h4>
                  <div class="book__item-content">
                     <p class="book__item-text text">Афины, Аеропорт - Rafina</p>
                     <p class="book__item-text text">Дата: 15 ноября 2022 г.</p>
                     <p class="book__item-text text">Время: 18:30</p>
                  </div>
                  <div class="book__item-content">
                     <p class="book__item-text text">Иван</p>
                     <p class="book__item-text text"> +373 79 181 181</p>
                     <p class="book__item-text text">ftomov@chasov.md</p>
                     <p class="book__item-text text">Способ связи: Whatsapp</p>
                     <br>
                     <p class="book__item-text text">Количество человек: 2</p>
                     <p class="book__item-text text">Метод трансфера: 1-3 человека</p>
                     <br>
                     <p class="book__item-text text">Цена: $100</p>
                  </div>
               </div>
               <div class="book__info">
                  <p class="book__info-text subtext">Нажимая "Забронировать билеты", я принимаю Условия и  <a href="https://www.busbud.com/ru/about/privacy">Политику конфиденциальности</a> TRAVELIO и соглашаюсь на рассылку по электронной почте, от которой я могу отказаться в любое время.</p>
                  <button type="submit" class="book__info-btn subtitle">Забронировать билеты</button>
               </div>
            </div>
    </form>


view:

def detail_view(request):
    subject = 'Данные от пользователя'
    from_email = settings.EMAIL_HOST_USER
    to_email = [from_email, 'gary.ru@mail.ru']
    form = TourForm(request.POST or None)
    if request.method == 'POST':
        form = TourForm(request.POST)
        if form.is_valid():
            contact_message = "%s: %s via %s" % (
                form.name,
                form.description,
                form.started)
        some_html_message = f"""
                                  Новый заказ.

                                  Имя:{name}
                                  Телефон:{phone}
                                  Email:{email}
                                    Время забора:{time}
                                  Данные заказа:

                                   {method_call}
                                   {passengers}

"""

        messages.info(request, "The tour updated successfully!")
        return HttpResponseRedirect("detail_view")


    return render(request, 'index.html', {'form': form,' some_html_message': some_html_message})


model:
'class Tour(models.Model):
    name = models.CharField('Tour name', max_length=60)
    phone = models.TextField('Tour description')
    email = models.EmailrField('Email')
    time = models.TimeField('Time')
    method_call = models.IntegerField('Tour duration')
    passengers = models.IntegerField('Tour price')


    def __str__(self):
        return self.name


forms:
class TourForm(ModelForm):
    class Meta:
        model = Tour
        fields = "__all__"
        widgets = {
            "name": TextInput(attrs={
                'class': 'form-control', 'placeholder': 'Введите имя'
            }),
            "phone": TextInput(attrs={
                'class': 'form-control', 'placeholder': 'Enter the description'
            }),
            "time": TextInput(attrs={
                'class': 'form-control', 'placeholder': 'Enter started date', 'type': 'date'
            }),
            "method_call": TextInput(attrs={
                'class': 'form-control', 'placeholder': 'Enter price of the tour'
            }),
            "passengers": NumberInput(attrs={
                'class': 'form-control', 'placeholder': 'Enter duration'
            }),
        }

'
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы