איך להסיר תגיות p ו-br מ-Contact Form 7 (3 שיטות)

Contact Form 7 הוא מתוספי הטפסים הפופולריים ביותר לוורדפרס, עם למעלה מ-5 מיליון התקנות פעילות. אבל יש התנהגות מעצבנת שמלווה אותו מהגרסאות הראשונות: הוספה אוטומטית של תגיות <,p>. ו-<,br>. לתוך הטופס.

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

למה Contact Form 7 מוסיף תגיות p ו-br?

וורדפרס מפעיל פונקציה שנקראת wpautop שמוסיפה אוטומטית תגיות פסקה (<,p>.) ושבירת שורה (<,br>.) לכל תוכן. Contact Form 7 יורש את ההתנהגות הזו, מה שגורם לרווחים לא רצויים בין שדות הטופס.

שיטה 1: קוד PHP (מומלץ)

הוסיפו את הקוד הבא לקובץ functions.php של התבנית שלכם, או עדיף בתוסף Code Snippets:

add_filter( 'wpcf7_autop_or_not', '__return_false' ).

שורה אחת. זה כל מה שצריך. הפילטר הזה מבטל את ה-autop של CF7 בכל הטפסים באתר.

שיטה 2: CSS

אם אתם לא רוצים לגעת בקוד PHP, אפשר לפתור את זה עם CSS:

.wpcf7-form p {
  margin: 0, padding: 0, }
.wpcf7-form br {
  display: none, }

היתרון: פשוט ובטוח. החיסרון: התגיות עדיין קיימות ב-HTML, רק מוסתרות ויזואלית.

שיטה 3: JavaScript

אפשר גם להסיר את התגיות עם JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.wpcf7-form > p').forEach(function(el) {
    el.outerHTML = el.innerHTML, }), }).

שיטה זו מסירה את התגיות אחרי טעינת הדף. מומלצת פחות כי גורמת ל-layout shift קל.

איזו שיטה לבחור?

ההמלצה שלנו: שיטה 1 (PHP filter). שורה אחת, פתרון נקי, עובד על כל הטפסים.

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

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

מה אם זה לא עובד?

אם אחרי הוספת הקוד עדיין רואים רווחים מיותרים:

• נקו cache – תוספי cache כמו WP Rocket או LiteSpeed שומרים את הגרסה הישנה
• בדקו את התבנית – חלק מהתבניות מוסיפות CSS משלהן שגורם לרווחים
• בדקו תוספים אחרים – תוספים כמו Elementor יכולים להוסיף עיצוב משלהם לטפסים

צריכים עזרה עם התאמת טפסים באתר? דברו איתנו.

מעבר לבעיית ה-autop, כדאי לדעת ש-Contact Form 7 תומך ב-hooks מתקדמים שמאפשרים לשלוח את נתוני הטופס ל-CRM, לרשימת תפוצה, או למערכת אוטומציה כמו Make. במקום להסתפק בשליחת מייל, אפשר ליצור תהליך שלם שמטפל בליד מרגע שמילא טופס ועד שהופך ללקוח. ושוב, הכל בחינם ובלי תוספים כבדים.

לסיכום מהיר: Contact Form 7 + השבתת autop + אינטגרציה עם כלי אוטומציה = מערכת טפסים חזקה, חינמית, ומקצועית שתשרת אתכם שנים. אם אתם צריכים פיצ׳רים מתקדמים כמו טפסים מרובי שלבים או תשלומים, שקלו Gravity Forms או WPForms כחלופה מתקדמת יותר.

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