עיצוב טופס צור קשר "contact form 7"

טופס יצירת קשר contact form 7 הוא תוסף נפלא לוורדפרס והוא מאד פופולרי בקהילת משתמשי וורדפרס בעולם. תוסף זה מאפשר ליצור כל הסוג של טופס התקשרות כולל טפסי סקר או ארגון באופן מלא.

בכל פעם שמתקינים את התוסף נשאלת השאלה איך מתאימים אותו באופן אישי לאתר, אז הנה מדריך קצר על עיצוב הטופס בקלות וביעילות…

1. לפניכם נמצא הקוד שיש להכניס בהגדרת הטופס דרך הממשק ניהול של וורדפרס בצד, לוחצים על צור קשר, נכנסים להגדרת הטופס ובריבוע הראשון מחליפים את הקוד עם הקוד הזה:

 

<p>שם [text* your-name] </p>
<p>מייל [email* your-email] </p>
<p>הודעה[textarea your-message]</p>

<p>[submit class:buttons_form "שלח"]</p>

 

 

2.  להוסיף את קוד ה CSS  הזה לקובץ העיצוב style.css

.wpcf7-form{
    background:#000;
    width :375;
    height:460px;
    overflow: hidden;
    margin:20px;
    border:2px solid #fff;}.wpcf7-form h2{
    font-size :20px;
    text-align: center;}.wpcf7-form input,.wpcf7-form textarea {
    border-color:#808080 #C0C0C0 #C0C0C0 #D4D4D4;
    border-style: solid;
    border-width:1px;
    padding:4px;
    line-height:16px;
    font-size:14px;
    width:350px;float: none;
    margin:0;}.wpcf7-form textarea {
    line-height:16px;
    font-size:14px;
    height:100px;}.wpcf7-form p{
    font-size :14px;
    margin-left:20px;
    margin-top:0px;
    margin-bottom:0px;
    width:290px;
    padding:0010px;
    color:#fff;}
.buttons_form {
     padding:0px;
     height:30px;
     width:150px!important;
     border: none !important;
     cursor: pointer;
     color:#fff;-webkit-border-radius:.5em;-moz-border-radius:.5em;
     border-radius:.5em;
     color:#faddde;
     border: solid 1px#980c10;
     background:#d81b21;
     background:-webkit-gradient(linear, left top, left bottom,from(#ed1c24), to(#aa1317));
     background:-moz-linear-gradient(top,#ed1c24,  #aa1317);
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');}

 

 

כך זה ייראה בסיום:

contact form 7

 

עכשיו אתם יכולים פשות לשנות את ההגדרות של קובץ העיצוב ולהתאים אותו באוםן מושלם לאתר.

אם יש לכם שאלות בנוגע לקוד העיצוב ניתן להשאיר תגובה, בהצלחה.

כתובת אתר התוסף:  http://wordpress.org/extend/plugins/contact-form-7

תגובות פייסבוק