Мне нужна помощь, чтобы поместить все элементы формы регистрации по электронной почте в одну строку

У меня есть веб-сайт WordPress с панелью вверху, к которой я могу добавить собственный код.

Я пытаюсь добавить форму регистрации электронной почты Infusionsoft на эту панель и хочу, чтобы все было в одной строке. В настоящее время он показывает метку поля в первой строке, затем поле электронной почты во второй строке и затем кнопку отправки в третьей строке.

Я могу добавить любой код, который мне нужен, в эту форму и это поле с пользовательским кодом, а также я могу добавить собственный CSS к самим параметрам темы.

Я пробовал кучу вещей, и некоторые из них почти работают, но я не могу понять это.

Любая помощь будет принята с благодарностью.

Вот мой код формы:

<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
<input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
<input name="inf_form_name" type="hidden" value="Web Form submitted">
<input name="infusionsoft_version" type="hidden" value="1.70.0.80421">
<div class="infusion-field">
    <label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
    <input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text">
</div>
<div>
    <div>&nbsp;</div>
</div>
<div class="infusion-submit">
    <button type="submit">Submit</button>
</div>

1 ответ

Решение

Я переместил команду ввода инфузии в поле инфузии. Я использовал дисплей flex и ряд flex-direction для достижения их в одном ряду.

Я знаю, что вы используете Word Press и, вероятно, просто скопировать и вставить код. Если вы планируете заниматься веб-дизайном, стоит изучить HTML и CSS. Это на самом деле не так сложно, и вы будете иметь так много контроля над тем, как все выглядит на вашем сайте!

* Редактировать в центр контента

<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
  <input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
  <input name="inf_form_name" type="hidden" value="Web Form submitted">
  <input name="infusionsoft_version" type="hidden" value="1.70.0.80421">

  <div class="infusion-field" style="display:flex; flex-direction: row; justify-content: center;">
    <label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
    <input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" style="margin-right: 10px;">
    <div class="infusion-submit">
      <button type="submit">Submit</button>
    </div>
  </div>
</form>

Другие вопросы по тегам