Вопрос как построить структуру формы. html/css

Question

Есть такая форма. Буду рад если накидываете хотябы наброски, или посоветуете как правильнее её реализовать. Либо как то увеличивать размер контактного блока, либо может есть ещё более "правильные" способы?

Answer 1

Например так. Адаптивности нет, по этому смотрите на весь экран в сниппете.

body {
  display: block;
  width: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
.feedback {
  display: block;
  width: 100%;
}
.feedback-wrapper {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.feedback__mess {
  display: block;
  width: 100%;
  border-radius: 12px;
  background-color: #5aadab;
  margin: 20px 0 0.5rem;
  padding: 0 60px;
  box-sizing: border-box;
}
.feedback__mess-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.feedback__text {
  display: block;
  max-width: 300px;
  color: #fff;
  padding: 3rem 0;
  margin-right: 20px;
  box-sizing: border-box;
}
.feedback__text-sub {
  text-transform: uppercase;
  font-size: 90%;
  margin-bottom: 0.5em;
}
.feedback__text-title {
  font-size: 150%;
  font-weight: bold;
  letter-spacing: 0.2px;
}
.feedback__form {
  display: block;
  width: 306px;
  height: calc(100% + 40px);
  border-radius: 10px;
  background-color: #fff;
  margin: -20px 0 -20px auto;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.15);
}
.feedback__input {
  display: block;
  width: 100%;
}
.feedback__input:not(:last-child) {
  margin-bottom: 1rem;
}
.feedback__input-label {
  display: block;
  font-size: 90%;
  font-weight: bold;
  color: #000;
  margin-bottom: 0.25em;
}
.feedback__input-input {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #f4f4f4;
  background-color: #f7f8fa;
  padding: 5px 5px;
  box-sizing: border-box;
}
textarea.feedback__input-input {
  overflow: hidden auto;
  resize: none;
}
.feedback__input-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.feedback__input-submit input {
  display: inline-block;
  max-width: 100%;
  border-radius: 6px;
  border: 0;
  background-color: #f36c33;
  color: #fff;
  font-size: 90%;
  padding: 0.75em 3em;
}
.feedback__checkbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
}
.feedback__checkbox input {
  margin-right: 10px;
}
.feedback__checkbox label {
  display: inline-block;
  font-size: 0.53rem;
  color: #777;
}
.feedback__checkbox label a {
  color: #5aadab;
  text-decoration: none;
}

<section class="feedback">
  <div class="feedback-wrapper">
    <div class="feedback__mess">
      <div class="feedback__mess-wrapper">
        <div class="feedback__text">
          <div class="feedback__text-sub">Остались вопросы?</div>
          <div class="feedback__text-title">Расскажите нам о&nbsp;своей задаче, получите техническую помощь или&nbsp;задайте вопрос</div>
        </div>
        <div class="feedback__form">
          <div class="feedback__input">
            <label class="feedback__input-label" for="name">Имя*</label>
            <input class="feedback__input-input" id="name" type="text" name="name" required="required"/>
          </div>
          <div class="feedback__input">
            <label class="feedback__input-label" for="email">E-mail*</label>
            <input class="feedback__input-input" id="email" type="text" name="email" required="required"/>
          </div>
          <div class="feedback__input">
            <label class="feedback__input-label" for="comment">Комментарий</label>
            <textarea class="feedback__input-input" id="comment" rows="3" name="comment"></textarea>
          </div>
          <div class="feedback__input-submit">
            <input id="submit" type="submit" value="Отправить"/>
          </div>
        </div>
      </div>
    </div>
    <div class="feedback__checkbox">
      <input id="check" type="checkbox"/>
      <label for="check">Я согласен с <a href="#">политикой конфиденциальности</a> и условиями обработки <a href="#">персональных данных</a></label>
    </div>
  </div>
</section>

Answer 2

Можно сделать через гриды. Так все двигается и на маленьких экранах и можно легко сделать в колонку. Откройте пример на всю страницу, чтобы выстроилось не в одну колонку.

.contact {
  width: 800px;
  min-height: 500px;
  display: grid;
  grid-template-columns: 500px 250px 50px;
  grid-template-rows: 20px 1fr 50px;
}

@media (max-width: 700px) {
  .contact {
    display: flex;
    flex-direction: column;
  }
}

.contact__description {
  background-color: dodgerblue;
  border-radius: 20px;
  grid-column: 1/4;
  grid-row: 2/3;
}

.contact__form {
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 0 10px black;
  grid-column: 2/3;
  grid-row: 1/4;
}

.contact__agreement {
  grid-column: 1/2;
  grid-row: 3/4;
}

<section class="contact">
  <div class="contact__description">
    <h2>Остались вопросы?</h2>
    <p>Расскажите нам о своей задаче, получите техническую помощь или задайте вопрос
    </p>
  </div>
  
  <form class="contact__form">
    Форма для заполнения
  </form>
  
  <div class="contact__agreement">
    <p>Я согласен</p>
  </div>
  
</section>

БЛОГ НА HUSL

Вопрос как построить структуру формы. html/css

Ответы (2 шт):