Hi guys,

For a better layout view I needed to create a contact form with columns, using Contact Form 7, but I could never make it work perfectly. When works fine on Mac, doesn’t work on my iDevices… and when works on my iDevices, doesn’t work on my Mac. It’s making me crazy, so I decided to look the css files and… Voilà! I found what could be the source of my “problems” and “fix it”.

But how I did that? First: I take a look on CF7 Support Page to know how the “form-tag types” and the “targeting css” works and how to customize it. Second: I get a good html code and make all necessary changes to work the way I need. Third: Put all together and test it. ;-)

*** IMPORTANT ADVICE ***
If you don’t have enough knowledge about HTML/CSS don’t do it. You can mess with your template layout and functionality. Always make a backup before continue!
*** IMPORTANT ADVICE ***

Lat’s start to work…

1st file (easy part).
Open the wp-content/themes/photographer/css/768.css.
Search for /* FORMS */
Comment the first 3 lines.

input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]), select, .uploader, .selector {
max-width: 320px;
}

Save and close the file.

2nd file (most important).
Open the wp-content/themes/photographer/css/main.css.
Change as below.

— Contact Form & Compatibility —

.wpcf7 input[type=submit] {
margin-top: 1.4em;
float: left;
}

.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 input[type=”url”], .wpcf7 input[type=”tel”], .wpcf7 input[type=”number”], .wpcf7 input[type=”range”], .wpcf7 input[type=”date”], .wpcf7 input[type=”acceptance”], .wpcf7 input[type=”quiz”], .wpcf7 input[type=”text”], .wpcf7 input[type=”file”], .wpcf7 textarea {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

— 2. FORMS (@forms) – form elements —

#responsive-form {
max-width: 768px;
margin: 0 auto;
width: 100%;
}
.form-row {
width: 100%;
}
.column-half, .column-full {
float: left;
position: relative;
padding: 0.65rem;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}

@media only screen and (min-width: 48em) {
.column-half {
width: 50%;
}
}

Save and close the file.

Now, it’s just make the contact form.

div id=”responsive-form” class=”clearfix”
div class=”form-row”
div class=”column-half”>Seu nome (obrigatório) [text* FirstName] /div
div class=”column-half”>Seu sobrenome (obrigatório) [text* LastName] /div
/div

div class=”form-row”
div class=”column-half”>Nome da empresa (obrigatório) [text* Company] /div
div class=”column-half”>Telefone de contato (obrigatório) [tel* Phone] /div
/div

div class=”form-row”
div class=”column-half”>Local do evento (obrigatório) [text* Place] /div
div class=”column-half”>Data do evento (obrigatório) [date* Phone] /div
/div

div class=”form-row”
div class=”column-full”>Descrição do serviço (obrigatório) [textarea* Message] /div
/div

div class=”form-row”
div class=”column-full”>[submit “Enviar”] /div
/div

/div

* I have to erase the to avoid problems (I don’t know how to insert a code here).

I hope this could help someone else and be in the next update of the template.

Best regards guys.