46664660 na@drweb.no
Vi har byttet navn tilFjordweb Solutions AS

Divi er et populært og fleksibelt tema til WordPress laget av Elegant Themes. Du kan lage nesten hvilken som helst webside med Divi og litt CSS og PHP kunnskaper.

En ting vi syntes er litt for simpelt i Divi er kontaktskjemaet. Det består kun av tre felt som er: navn, e-post og din beskjed. Ønsker du for eksempel telefonnummer i tillegg må du se etter andre løsninger som gjøre jobben. Ulempen med dette er ofte at utseende på disse ikke passer inn i Divi og derfor ser lite bra ut.

I dette eksempelet tar vi for oss det populære tillegget Contact Form 7. Dette er en plugin som gir deg frihet til å lage avanserte kontaktskjemaer på en enkel måte. Dessverre ser den ikke særlig bra ut som standard og trenger en del CSS styling for å tilpasses Divi. Slik ser den ut som standard uten styling:

Contact Form 7 Standard

For å få Contact Form 7 til å se ut som Divi sine kontaktskjemaer kan du kopiere følgende koder og lime det inn i ditt Divi epanel eller eventuelt i child theme style.css.

 

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #eee !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 14px;
color: #999 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: grey !important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
width: 100%;
}
.wpcf7-submit:hover {
background-color: #eee;
border-color:#eee;
padding: 6px 20px !important; }

 

 

Slik vil det se ut etter at du har lagt inn koden over

Contact Form 7 Divi