Создаем уникальную форму контантов при помощи Contact Form 7

Когда речь идет о формах в WordPress, Contact Form 7 — лучший бесплатный выбор. Очень настраиваемый и очень простой в применении выбор. Если вы хоть немного знакомы с CSS, то вы можете создавать бесподобные формы. Даже несмотря на то, что Contact Form 7 не поддерживает условные формы и многостраничные формы, многим пользователям такой функционал и не нужен вовсе.

Вот пошаговая инструкция о том, как создать уникальную форму контантов при помощи Contact Form 7, где элементы формы будут располагаться в параграфах.

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

Необходимо помнить несколько вещей.

• Заключите целый абзац в тег “P”, или же заключайте каждый элемент в этот тег.
• Вы можете использовать “watermark” в качестве метки.
• Вы можете использовать тот же формат в окне сообщения для того, чтобы получить ответ на ваш емейл в виде письма.

2. Добавьте вашу форму на страницу и опубликуйте эту страницу.

3. По-умолчанию форма будет выглядеть примерно так (Все будет зависеть от таблицы стилей вашей темы).

4. Форма выглядит в принципе «ничего», однако немного ccs кода и она станет просто неотразимой. Вот наш пример css кода (мы обрамили форму в css с ID “myform”).

#myform{
    width:650px;
}
#myform p{
    font-size:14px;
    line-height:30px;
}
#myform input[type="text"]{
    border:none;
    border-bottom:1px dotted #000;
    background: transparent;
    font-size :14px;
    width:250px;
}
#myform .watermark{
    color:#ccc;
}
#myform select {
    -webkit-appearance: button;
    -webkit-border-radius: 2px;
    -webkit-padding-end: 10px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-image: url(images/select_arrow.gif), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background-color:transparent;
    background-position: center right;
    background-repeat: no-repeat;
    border:none;
    border-bottom: 1px dotted #000;
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#myform input[type="submit"]{
    padding:8px 18px;
    background:#222;
    color:#fff;
    border: 1px solid #fff;
    float:right;
    margin-right:20px;
}
#myform input[type="submit"]:hover{
    background:#fff;
    color:#222;
    border: 1px solid #222;
}

5. И вот итоговый результат. Намного лучше, чем стандартная, не так ли?