Как добавить поля Контактной формы 7 в мой собственный HTML-код?

Question

Как добавить поля шорткода Контактной формы 7 в пользовательский HTML с именем класса CSS?

Код моей формы HTML:

<div class="form-section">
  <strong class="form-heading"> Your Details </strong>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Your Name <span class="required">(required)</span></label>
        <input name="yourname" type="text" class="form-control icon icon-person" placeholder="First name, Surname" />
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Phone Number <span class="required">(required)</span></label>
        <input name="phonenumber" type="text" class="form-control" placeholder="">
      </div>
    </div>
    <div class="col-sm-6 col-xs-12 col-lg-12">
      <div class="form-group">
        <label> Email Address <span class="required">(required)</span> </label>
        <input name="email" type="text" class="form-control icon icon-email" placeholder="Enter email address" />
      </div>
    </div>
  </div>

Пример формы контактной формы 7:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

Answer 1

Вы можете добавить класс следующим образом: это пример преобразования html в поле контактной формы 7, см. Разницу

например, 1) html

 <input type="email" class="form-control class:icon icon-email" id="email" placeholder="Enter email address" name="myemailaddress">

2) Редактор формы контакта 7

[email* myemailaddress class:form-control class:icon class:icon-email id:email placeholder "Enter email address"]

В контактной форме 7 есть много типов ввода, см. Здесь (http://prnt.sc/pkdymc) Вы должны использовать это, поэтому в основном мы должны позаботиться о синтаксисе формы контакта 7 для типов ввода, и выможете добавить класс, идентификатор и заполнитель, все, что вы хотите очистить с помощью этого

. Для более подробной информации я изменил ваш пользовательский HTML на поля формы контакта в контактной форме 7 редактор

Пожалуйста, укажите код ниже в контактной форме7 редактор Вы получите именно то, что вы хотите

<div class="form-section">
  <strong class="form-heading"> Your Details </strong>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Your Name <span class="required">(required)</span></label>
       [text* yourname class:form-control class:icon class:icon-person placeholder "First name, Surname"]
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Phone Number <span class="required">(required)</span></label>
         [tel* phonenumber class:form-control placeholder "Phone Number" ]
      </div>
    </div>
    <div class="col-sm-6 col-xs-12 col-lg-12">
      <div class="form-group">
        <label> Email Address <span class="required">(required)</span> </label>
         [email* email class:form-control class:icon class:icon-email placeholder "Enter email address"]
      </div>
    </div>
  </div>
[submit class:btn-default class:btn "submit"]

Надеюсь, вы очистите!

Answer 2

Этот код с активного веб-сайта Wordpress, который я недавно создал, поможет вам _, хотя вам нужно будет внести некоторые изменения в соответствии с вашей собственной формой и добавить любые классы, которые вы создали в своем CSS

Самая важная вещь, которую следует помнить, - это то, что каждый класс должен быть добавлен отдельно

Я оставил необходимые классы Bootstrap на месте + «ДОБАВИТЬ КЛАСС ЗДЕСЬ ЗДЕСЬ» для любого другого класса CSS, который у вас может быть

Надеюсь, это поможет

<div class="form-group">
    <label for="yourname">Your Name (required)</label>
    [text* your-name id:yourname class:form-control class:ADD CSS CLASS HERE ]
</div>

<div class="form-group">
    <label for="youremail">Your Email (required)</label>
    [email* your-email id:youremail class:form-control class:ADD CSS CLASS HERE]
</div>

<div class="form-group">
    <label for="yourmessage">Your Message (required)</label>
    [textarea* your-message id:yourmessage class:form-control class:ADD CSS CLASS HERE]
</div>

[submit class:btn class:ADD BUTTON CLASS HERE "Send"]