-
Posts
-
Hello,
I am using contact 7 plugin.
Now, I want to style it by columns. I looked at many forum posts, and I finally wrote the code, but it is not working…
<div class=”avia_ajax_form”>
<p class=”first_form form_element form_element_half”>Your Name *<br />
[text* your-name class:text_input] </p><p class=”form_element form_element_half”>Your Phone *<br />
[tel* your-tel class:text_input] </p><p class=”first_form form_element form_element_half”>Your Email *<br />
[email* your-email class:text_input] </p><p class=”form_element form_element_half”>Your suburb *<br />
[text* your-suburb class:text_input] </p><p class=”first_form form_element form_fullwidth”>Your Message *<br />
[textarea* your-message class:text_area] </p></div>
<p>[submit “Send”]</p>
Can you please write me a code for this…
Best regards
Hey ivancg,
I’m not sure I understand what you are looking to achieve, do you want the fields next to each other, two by two maybe?
Best regards,
RikardHello Rikard,
I need contact form in this way:
– two fields next to each other
– two fields next to each other
– one field
– send buttonThanks in advance
just look to a enfold layout with developer tools of your browser- you can use that html as well:
<div class="flex_column av_one_half first"> <label>[text* your-name placeholder "Your first and last name * "] </label> </div> <div class="flex_column av_one_half"> <label> [email* your-email placeholder "your E-mail address *"] </label> </div> <div class="flex_column av_one_full"> <label>[text* your-subject placeholder "Your Subject *"] </label> </div>Here on that example it is with placeholder text for the input fields. But this is not necessary.
Just place the given content of contact form 7 inbetween these divsmaybe you style your layout on a post first with only columns in advanced layout builder and look to this post on your browser with dev tools
f.e. this is the needed code for 1/3 – 2/3<div class="flex_column av_one_third first"> content from contact form 7 </div> <div class="flex_column av_two_third"> content from contact form 7 </div>Hey, I use this, that works:
Copy that into the contact-form-7
<div class=”wps-form”>
<div class=”wps-form-row”>
<div class=”wps-form-column”>
[text* your-name class:vornachname placeholder “Ihr Name”]
</div>
<div class=”wps-form-column”>
[email* your-email class:mailadresse placeholder “Ihre E-Mail-Adresse”]
</div>
</div><div class=”wps-form-row”>
<div class=”wps-form-column”>
[text your-subject class:betreff placeholder “Betreff”]
</div>
</div><div class=”wps-form-row”>
<div class=”wps-form-column”>
[textarea your-message class:ihre-nachricht placeholder “Ihre Nachricht”]
</div>
</div>
<div class=”wps-form-row”>
<div class=”wps-form-column_akzeptanz”>
[acceptance acceptance-gdpr] Ich stimme zu, dass meine Angaben aus dem Kontaktformular zur Beantwortung meiner Anfrage erhoben und verarbeitet werden. Die Daten werden nach abgeschlossener Bearbeitung Ihrer Anfrage gelöscht.
Hinweis: Sie können Ihre Einwilligung jederzeit für die Zukunft per E-Mail an ###### widerrufen.
Einzelheiten dazu regelt unsere Datenschutzerklärung.
</div>
</div>
<div class=”wps-form-row”>
<div class=”wps-form-column_picture”>
[cf7ic id:picture class:svgpicture]
</div>
<div class=”wps-form-column_send”>
[submit “Senden” id:versenden]
</div>
</div>
</div>
######################
use this for acceptance dsgvo = tab Additional settings:acceptance_as_validation:on
########################################
and this css in custom.css (or quick css)/*Formular stylen + Captcha*/
/*Stylen der Formularelemente*/
.vornachname, .mailadresse, .betreff, .ihre-nachricht, .svgpicture {font-size:0.9em !important; font-weight:500; background-color: rgba(250,250,250, 0.05); color:#611730 !important; padding:0 0 0 8px; border:none !important;} /*border-radius: 4px;*/
.ihre-nachricht {padding:16px 0 0 8px;}
.vornachname, .mailadresse {line-height: 2.8em !important;}
.betreff {line-height: 2.8em !important;}
.svgpicture,.wpcf7-not-valid-tip {color:#E3A381;}
.beweis {margin:auto !important; text-align:left; width:80%; font-weight:400; color:#ddd;}
input.vornachname, input.mailadresse, input.betreff {background-color: rgba(250, 250, 250, 0.05); color:#E3A381; padding:0 0 0 8px; border-color: rgba(57, 121, 120, 0.3);}
/*.captcha-image {border: 1px solid #ddd; color:#ddd; border-radius: 4px;}*/
.captcha-image label > input:checked + i {color:#dfdfdf;} /*Farbe ändern, wenn Bild ausgewählt/angeklickt/checked*/
.kc_captcha {margin-left: -10px;}
.wpcf7-not-valid-tip {margin-left:10px; font-weight:500; font-size:1.1em;}
.wps-form {
width: 90%;
margin: 30px auto 50px auto;
}
.wps-form-row {
display: flex;
flex-direction: column;
width: 100%;
}
.wps-form-row .wpcf7-form-control {
width: 100%;
}
.wps-form-column {
flex: 1;
padding: 0.5rem 0;
width: 100%;
}
/* Notebook / Desktop */
@media only screen and ( min-width: 48em ) {
.wps-form-row {
flex-direction: row;
}
.wps-form-column, .wps-form-column_picture, .wps-form-column_send {
padding: 0.5rem 1rem;
}
}/*Schrift innerhalb der Fomularfelder*/
.wpcf7-form-control-wrap input::placeholder, .wpcf7-form-control-wrap input, .wpcf7-form-control-wrap.your-message ::placeholder {color:#611730; font-size:18px;}/*submit button*/
input.wpcf7-submit
{
border-radius: 4px !important;
border:none;
background-color: #E3A381 !important;
color: #ddd;
font-weight: 500;
font-variant: small-caps!important;
font-size: 1.1em;
cursor: pointer;
letter-spacing:0.1em;
margin-top:10px;
}/*Schriftfarbe im Button + bei hover*/
input.wpcf7-form-control.wpcf7-submit {color:#611730 !important;}
input.wpcf7-form-control.wpcf7-submit:hover {color:#cc0000 !important;}/* Farbe und Schriftfamilie für Satz ‘Beweisen sie , dass Sie ein Mensch sind*/
.wps-form-column_beweis {color:#E3A381; padding-left:16px; font-size:0.8em !important; font-family: ‘open-sans’,’HelveticaNeue’,’Helvetica Neue’,’Helvetica-Neue’,Helvetica,Arial,sans-serif;}/*Schriftfamilie für ‘Wählen Sie…*/
.cf7ic_instructions {font-family: ‘open-sans’,’HelveticaNeue’,’Helvetica Neue’,’Helvetica-Neue’,Helvetica,Arial,sans-serif;}/*Button umgebender div nach unten + Schriftfarbe bei hover*/
.wps-form-column_send {margin-top:35px;}div.wpcf7-response-output {margin:-40px auto 30px auto !important; width:76%; border:1px solid #E3A381 !important; border-radius:4px; color:#E3A381 !important; font-size:1em;}
/*Instruction ‘Wählen Sie’ als Block*/
.cf7ic_instructions {display:block; font-size:20px !important;}/*Satz: Bitte beweisen Sie….*/
.wps-form-column_beweis {font-size:20px !important;}/*######Struktur-CSS des Formulars#########*/
.wps-form {
width: 80%;
margin: 30px auto 50px auto;
}
.wps-form-row {
display: flex;
flex-direction: column;
width: 100%;
}
.wps-form-row .wpcf7-form-control {
width: 100%;
}
.wps-form-column {
flex: 1;
padding: 0.5rem 0;
width: 100%;
}
/* Notebook / Desktop */
@media only screen and ( min-width: 48em ) {
.wps-form-row {
flex-direction: row;
}
.wps-form-column, .wps-form-column_picture, .wps-form-column_send {
padding: 0.5rem 1rem;
}
}#########################
I also use the additional plugin image captcha pro — > https://kccomputing.net/ no recptcha needed for security
- The topic ‘Enfold & contact 7 columns styling’ is closed to new replies.