Conact form 7 styling - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
December 2, 2015 at 10:16 pm #546144

Skibro
Participant

Dear Support Staff,

please help me with the following, I could not found the answer in other topics.

I would like to use Contact form 7 (because of database saving possibility) but I would like to make it fit the theme’s design. I found this topic: https://kriesi.at/support/topic/contact-form-7-styling-enfolds-light-transparent-color-scheme/

And it worked, I’m just missing to things:
1, How can I change the field size? (1/2, 1/3 stb…)
2, How can I make the labels in-line, as in the enfold contact form?

Thank you very much for your help in advance!

Best regards,
Skibro

December 2, 2015 at 10:50 pm #546159

Basilis
Inactive Moderator

Hey Skibro!

can we see yur live form, so we can help you with the code?
Thanks a lot for your patience!

Cheers!
Basilis

December 3, 2015 at 12:48 pm #546366

Skibro
Participant

December 3, 2015 at 1:43 pm #546379

hermelina
Participant

Hi Skibro,
please, have a look at my contactform http://magazinschmiede.de/anmeldung/. I think, it’s nearly what you are searching for (on desktop; on small mobile-devices it looks different). If so, here are my settings:

I added these classes in the style.css of my child theme – I think you have to change the colors and maybe font-size:

.wpcf7
{
max-width:630px /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full, .column-third, .column-twothird{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
border-radius: 5px;
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}

/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
.column-third{
width: 30%;
}
.column-twothird{
width: 70%
}
}

.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.wpcf7 input[type=”text”]:focus{
background: #fff;
}
.wpcf7-submit{
float: left;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border-radius: 5px;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #ff0000;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #a81010;
border-color: #000000;
color: #ffffff;
margin: 0;
}

And here the data for the contact form:

<div class=”clearfix”>

<div class=”form-row”>
<div class=”column-third”>Frau/Herr* [select menu-377 “Frau” “Herr”]</div>
<div class=”column-full”>Vor- und Nachname* [text* your-name]</div>
</div>

<div class=”form-row”>
<div class=”column-half”>Straße und Hausnummer* [text* text-832]</div>
<div class=”column-half”>Postleitzahl und Wohnort* [text* text-833]</div>
</div>

<div class=”form-row”>
<div class=”column-third”>Unternehmen[text text-690]</div>
<div class=”column-third”>E-Mail* [email* your-email]</div>
<div class=”column-third”>Telefon* [tel* tel-293]</div>
</div>

<div class=”form-row”>
<div class=”column-half”>Bitte wählen Sie Ihr Training* [select* menu-789 “BasisWissen Magazin” “BasisWissen Business Blog” “Professionell schreiben” “Reportage, Feature, Portrait” “Meldung, Bericht, Interview” “Teaser, Titel, Bildunterschriften”]</div>
<div class=”column-half”>Bitte tragen Sie den Termin ein* [text* text-891]</div>
</div>

<div class=”form-row”>
<div class=”column-full”>Nachricht (optional) [textarea your-message]</div>
</div>

<div class=”form-row”>
<div class=”column-full”>Ich habe die AGB gelesen und akzeptiere sie* [acceptance acceptance-842]</div>
<div class=”column-half”>[submit “Senden”]</div>
</div>

</div><!–end 4–>

Cheers!
hermelina

December 7, 2015 at 5:31 pm #548151

Elliott
Inactive Moderator

Hey!

@Skibro, I didn’t see the CF7 form in your link. Did you remove it?

Best regards,
Elliott

December 8, 2015 at 12:10 pm #548673

Skibro
Participant

Hey!

Sorry, I updated it again, now you can check it.

Thanks,
Bálint

December 9, 2015 at 9:13 am #549557
Josue
Inactive Moderator
Hi!

Try using this CSS codes instead:
```
.wpcf7-form p br{display:none;}
.wpcf7-form label {text-transform: uppercase; display:block; visibility: visible; position: relative; }
.wpcf7-form label, .modified_width:before{display:block; visibility: visible; position: relative; margin-bottom: 7px; font-weight: 600;font-weight: normal !important;}

.wpcf7-form p{ position: relative; clear:both; float:left; width:100%;}
.wpcf7-form p.hidden{position: absolute; width:0px; left:0; top:0; }
.wpcf7-form .form_element_half{width:49.5%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_third{width:32.6%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_two_third{width:66.4%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_fourth{width:24.2%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_three_fourth{width:74.8%; float:left; margin-left:1%; clear:none;}

.wpcf7-form .first_form{clear:both;margin-left:0;}
```
Then in the form HTML wrap the labels with label elements and replace the your div columns by p with their respective column classes (there’s no need to use clearfixes or rows with this method, also set a class of button to the button element).

Best regards,
Josue
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.