משחקים עם עיצוב התוסף Contact Form 7

התוסף Contact Form 7 הוא התוסף הנוח והמוצלח ביותר ליצירת טפסים באתרי וורדפרס

עם מעל למיליון התקנות פעילות, Contact Form 7 הוא התוסף ליצירת טפסים מהפופולרים ביותר שקיימים לוורדפרס. אחת הסיבות להצלחתו היא האמת מאחורי התיאור שלו: ״פשוט אך גמיש״ – והוא באמת כך.

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

עיצוב ברירת המחדל

לטפסים אשר אתם יוצרים בעזרת Contact Form 7 אין הגדרות עיצוב (css) משלהם, העיצוב הקיים ברגע שהוספתם טופס הוא תוצאה של הגדרות עיצוב הקיימות בתבנית בה אתם משתמשים.

כך נראה לדוגמא הטופס הסטנדרטי אם תוסיפו אותו לתבנית Twenty Sixteen המגיעה כברירת מחדל עם וורדפרס:

עיצוב טופס ראשוני contact form 7

במקרה שלנו, נגיע עם הטופס למצב הבא בתור התחלה (אתם מוזמנים לשחק עם הטופס, זהו טופס חי):




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

  • הורדנו את הכיתוב מעל לכל שדה והחלפנו אותו ב placeholder בתוך השדה.
  • הורדנו את אפשרות ההגדלה (resize) של השדה הודעה.
  • הקטנו את גובה השדה הודעה ובהמשך נגרום לו להפתח ברגע שנלחץ על השדה.
  • גרמנו להודעות השגיאה של כל שדה להיות ממוקמות אבסולוטית.

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

נשכתב את הקוד של הטופס

החליפו את קוד הטופס שיצרתם בממשק הניהול של וורדפרס לקוד הבא:

<div class="my_form_wrapper">
    <div class="top_form_section">
        <div class="right_form">
            [text* your-name class:my_input_field placeholder "שם מלא"]
            [email* your-email class:my_input_field placeholder "אימייל"]
        </div>
        <div class="left_form">
            [text your-subject class:my_input_field placeholder "נושא"]
            [textarea your-message class:my_input_field class:my_text_area placeholder "הודעה"]
        </div>
    </div>
    <div class="bottom_form_section">
        [submit class:my_submit_button "שלח"]
    </div>
</div>

שימו לב כי קבענו placeholders והוספנו class בשם my_input_field לכל אחד מהשדות.

 

נגרום להודעות השגיאה להיות ממוקמות אבסולוטית

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

[contact-form-7 id="2851" title="טופס דוגמא לפוסט"]

נוסיף את השורה html_class="use-floating-validation-tip" כך שייראה בצורה הזו:

[contact-form-7 id="2851" html_class="use-floating-validation-tip" title="טופס דוגמא לפוסט"]

שיהיה ברור, זוהי פונקציונליות של Contact Form 7 עצמו, כלומר לתוסף עצמו יש css המשוייך ל class הזה.

הצטרפו לרשימת התפוצה!

נוסיף את הגדרות העיצוב (css)

הוסיפו את השורות הבאות לקובץ ה css של תבנית הבת שלכם:

        div.wpcf7-validation-errors {
            border: 1px solid #E8A65A;
            border-radius: 3px;
            max-width: 360px;
            margin: 0 auto;
        }

        .my_form_wrapper .my_input_field {
            border: none;
            border-bottom: 1px solid;
            background: none;
            outline: none;
            border-radius: 0;
            margin-bottom: 20px;
            width: 100%;
            max-width: 400px;
            text-indent: 0;
            font-weight: 400;
        }

        .my_form_wrapper .my_input_field.my_text_area {
            resize: none;
            height: 26px;
        }

        .my_form_wrapper .my_submit_button {
            background: transparent;
            border: 1px solid #333;
            color: #333;
            width: 100px;
            border-radius: 0;
            outline: none;
            border-radius: 0;
            font-weight: 400;
            -webkit-transition: all .3s;
            transition: all .3s;
            text-indent: 0;
            text-shadow: none;
        }

        .my_form_wrapper .my_submit_button:hover,
        .my_form_wrapper .my_submit_button:focus,
        .my_form_wrapper .my_submit_button:active {
            color: white !important;
            outline:none;
            background: #e7442a !important;
        }


        .my_form_wrapper .my_input_field.my_text_area:focus {
            border-color: #007acc;
        }


        div.wpcf7 img.ajax-loader {
            border: none;
            vertical-align: middle;
            margin-left: 0;
            display: block;
            margin: 5px auto 0;
        }

        .my_form_wrapper {
            text-align: center;
        }

      

 

נגרום לשדה ״הודעה״ לגדול במצב פוקוס

נעשה זאת על ידי מספר שורות jQuery אותן נוסיף לפוטר (footer) של האתר, הוסיפו את הקוד הבא לקובץ functions.php:

/* handles contact form 7 textarea height */
function add_cf7_script_to_footer() {
  ?>
  <script>
    (function($) {
        $(function(){
          var a=$(".my_form_wrapper .my_text_area");
          a.focus(function(){
              $(this).animate({height:"86px"})
          }),a.blur(function(){
              $(this).val() || $(this).animate({height:"39px"})
          })
         });
      })(window.jQuery);
  </script>
  <?php
}
add_action('wp_footer','add_cf7_script_to_footer');

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

 

נבטל את ה zoom במכשירי מובייל

ברגע שלוחצים על שדה של טופס ברוב מכשירי המובייל, מתבצעת הגדלה של המסך (zoom) שאני מוצא כמיותרת. במידה ואתם מעוניינים לבטל הגדלה זו הוסיפו את הקוד הבא לקובץ functions.php בתבנית הבת שלכם:

/* disable zooming on mobile devices */
function savvy_viewport_meta_tag() {
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
}
add_action ('wp_head', 'savvy_viewport_meta_tag');

 

נחליף את ה preloader הסטנדרטי של Contact Form 7שולח...

הוסיפו פונקציה זו לקובץ functions.php על מנת לשנות את ה preloader המופיע ברגע שלוחצים על כפתור השליחה. שנו את שם התיקייה ואת שם הקובץ בהתאם:

/* custom ajax loader for cf7 */

function my_wpcf7_ajax_loader() {
    return  get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
}

add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');

שימו לב – הפונקציה מעלה כבר אינה עובדת מגירסת 4.6 של Contact Form 7, במקומה יש להשתמש ב CSS הבא:

/* Custom CF7 Loader */
div.wpcf7 .ajax-loader {
background-image: url('images/ajax-loader.gif');
width: 24px;
height: 24px;
margin-left: 10px;
}

אתם מוזמנים להוריד מקישור זה מספר preloaders מעניינים:

contact form 7 preloaders


דוגמא לטופס בעל שתי עמודות

בואו נראה עוד אופציה לטופס עם מבנה של שתי עמודות כבדוגמא הבאה:



בכדי להגיע למצב זה פשוט החליפו את ה css שהוספתם בדוגמא הקודמת ב css הבא:

            .my_form_wrapper_two {
                min-height: 210px;
            }

            .my_form_wrapper_two .my_input_field {
                border: none;
                border-bottom: 1px solid #272822 !important;
                background: none !important;
                outline: none;
                border-radius: 0;
                margin-bottom: 30px;
                padding: 0;
                text-indent: 0;
                font-weight: 400;
                width: 100%;
            }

            .my_form_wrapper_two .my_input_field.my_text_area {
                resize: none;
                height: 30px;
                line-height: normal;
            }

            .my_form_wrapper_two .my_submit_button {
                background: transparent;
                border: 1px solid #333;
                color: #333;
                width: 100px;
                border-radius: 0;
                outline: none;
                -webkit-transition: all .3s;
                transition: all .3s;
                text-indent: 0;
                text-shadow: none;
            }

            .my_form_wrapper_two .my_submit_button:hover,
            .my_form_wrapper_two .my_submit_button:focus,
            .my_form_wrapper_two .my_submit_button:active {
                color: white !important;
                outline:none;
                background: #e7442a !important;
            }


            .my_form_wrapper_two .my_input_field.my_text_area:focus {
                border-color: #007acc;
            }


            div.wpcf7 img.ajax-loader {
                border: none;
                vertical-align: middle;
                margin-left: 0;
                display: block;
                margin: 5px auto 0;
            }

            .my_form_wrapper_two .right_form {
                width: 46%;
                margin-left: 8%;
                float: right;
                display: inline-block;
            }

            .my_form_wrapper_two .left_form {
                width: 46%;
                display: inline-block;
            }

            .my_form_wrapper_two {
                width: 100%;
                text-align: center;

            }


            @media screen and (max-width: 768px) {

                .my_form_wrapper_two .right_form, .my_form_wrapper_two .left_form {
                    width: 100%;
                    margin: 0;
                }

            }

דוגמא לטופס בו שלושה שדות מיושרים אופקית

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

<div class="my_form_wrapper_three">
    <div class="top_form_section">
        [text* your-name class:my_input_field placeholder "שם מלא"]
    </div>
    <div class="middle_form_section">
        [email* your-email class:my_input_field placeholder "אימייל"]
    </div>
    <div class="bottom_form_section">
        [submit class:my_submit_button "שלח"]
    </div>
</div>

הנה התוצאה לאחר שתוסיפו את ה css המופיע מטה:

    .my_form_wrapper_three {
        position: relative;
    }

    .my_form_wrapper_three > div {
        display: inline-block;
        vertical-align: top;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .my_form_wrapper_three > div {
        width: 40%;
    }

    .my_form_wrapper_three > div.bottom_form_section {
        width: calc(20% - 12px);
    }

    .my_form_wrapper_three .my_input_field {
        border: none;
        border-bottom: 1px solid #272822 !important;
        background: none !important;
        outline: none;
        border-radius: 0;
        padding: 0;
        text-indent: 0;
        font-weight: 400;
        width: 100%;
    }

    .my_form_wrapper_three .my_input_field.my_text_area {
        resize: none;
        height: 30px;
        line-height: normal;
    }

    .my_form_wrapper_three .my_submit_button {
        background: transparent;
        border: 1px solid #333;
        color: #333;
        width: 100%;
        border-radius: 0;
        outline: none;
        -webkit-transition: all .3s;
        transition: all .3s;
        text-indent: 0;
        padding: 0;
        text-shadow: none;
    }

    .my_form_wrapper_three .my_submit_button:hover,
    .my_form_wrapper_three .my_submit_button:focus,
    .my_form_wrapper_three .my_submit_button:active {
        color: white !important;
        outline:none;
        background: #e7442a !important;
    }


    .my_form_wrapper_three .my_input_field.my_text_area:focus {
        border-color: #007acc;
    }


    div.wpcf7 img.ajax-loader {
        border: none;
        vertical-align: middle;
        margin-left: 0;
        display: block;
        margin: 5px auto 0;
    }

    span.ajax-loader {
        position: absolute;
        left: -15px;
        top: 7px;
    }

    @media screen and (max-width: 768px) {
        .my_form_wrapper_three > div {
            width: 100%;
            margin: 20px 0;
        }
    }

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

לסיכום

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

ואם בא לכם להמשיך, תנו מבט במאמר המדבר על אופטימיזציה של Contact Form 7 לביצועים טובים יותר.

רועי יוסף

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

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

{ 16 תגובות… הוסף אחת }
  • רמי יושובייב 14 במרץ 2016, 11:46

    יפה מאוד!

  • משה שלומי 20 ביוני 2016, 0:27

    איזה פינוק!
    תודה

  • עבדאללה מרהג' 20 באוקטובר 2016, 22:18

    היי

    עבודה מדהימה והיא משפרת את עיצוב הפורום פלאים, פשוט גאוני
    הכל עבד לאחר מאמץ לא פשוט (בתור מתחיל) והצלחתי להתגבר על רוב בעיות עיצוב שצצו ע"י שיוניים קטנים בערכים בקוד ה CSS רק נותר שתי בעיות שלא הצלחתי למצוא להם פתרון
    1. הודעת השגיאה ממוקמות אבסולוטית אבל לא כמו שצריך, היא נמרחת למטה ומופיעה (אנוכית), קרי לא בשורה אחת אלא מלה מתחת לשנייה בתוך מרובע

    2. הקוד שאמור לבטל את ה ZOOM במובייל דופק את קובץ את function.php ומפיל את האתר

    אשמח לעזרה

    • רועי יוסף 21 באוקטובר 2016, 4:37

      היי, שמח שעבד לך יחסית חלק.

      לגבי הודעות השגיאה, אני חושב שזה קשור למבנה ה form שלך באתר, יש לי תחושה שתיבות הסימון משבשות זאת.
      בכל מקרה אתה יכול לנסות להוסיף width:160px; ל class בשם use-floating-validation-tip span.wpcf7-not-valid-tip הקיים בקובץ css שלך.

      לגבי עניין ה zoom, אנא בדוק שנית את הפונקציה, נשמע לי מוזר …

      • עבדאללה מרהג' 21 באוקטובר 2016, 10:57

        היי

        ביצעתי את השיוניים ועוד ניסיתי דרכים אחרות וזה לא עוזר
        והמוזר זה שמחקתי את הקוד בשני קבצי CSS של התוסף ועדיין רואה את ההודעה שממוקמת אבסולוטית !!!

      • עבדאללה מרהג' 21 באוקטובר 2016, 11:10

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

  • רוב 27 בדצמבר 2016, 8:58

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

  • נחמה 29 בינואר 2017, 13:06

    שלום רועי,
    אתה יודע איך מגדירים שהשדה יקלוט רק ספרות?
    אני מתכוונת לשדה של מספר טלפון, שהגדרתי שיקבל רק 10 תווים:
    minlength:10 maxlength:10
    אבל אם מישהו מכניס מקף זה גם מתקבל, והמספר שנשלח מגיע עם ספרה אחת פחות.
    תודה מראש!

  • עמי 14 ביוני 2017, 13:13

    תודה, עוזר לי המון.
    אשמח לראות דוגמאות נוספות..

  • אריק 15 ביוני 2017, 12:39

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

  • עדי 26 ביולי 2017, 0:41

    היי, אני ממש חדשה בכל נושא הוורדפרס ואני לא מצליחה להבין מה זה אומר " קוד הטופס שיצרתם בממשק הניהול של וורדפרס " איפה בדיוק הקוד הזה נמצא?

    • רועי יוסף 26 ביולי 2017, 1:04

      היי, מדובר על הטופס שיצרת בלוח הבקרה של וורדפרס – אמור להופיע תחת ״צור קשר״ > ״טפסי יצירת קשר״. שם יופיעו הטפסים.. לחצי על אחד מהם ותראי את הקוד של הטופס 🙂

השאירו תגובה

שיתופים
קראו גם את:
תגובות פייסבוק וורדפרס
שילוב תגובות פייסבוק באתר וורדפרס

פייסבוק היא הרשת החברתית הגדולה ביותר שקיימת. זו הסיבה שהרבה מאד אתרים גדולים החליטו להשתמש...