עיצוב טופס של HubSpot באמצעות CSS (וורדפרס)

הטמעת טופס של HubSpot ישירות בתוך קובץ תבנית של ערכת העיצוב באתר וורדפרס מעניקה לכם שליטה מלאה על המיקום והמבנה – אבל מה לגבי העיצוב?

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

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

אם עדיין לא שילבתם את HubSpot באתר הוורדפרס שלכם, קראו את המדריך המלא לשילוב HubSpot עם וורדפרס.

שלב 1: הטמעת הטופס בקובץ תבנית (template file)

ראשית, ודאו שהטופס מוטמע כהלכה. ניתן להשתמש בקוד ה-PHP הבא בתוך קובץ תבנית באתר (כמו single.php או page.php):

<?php
echo '<script src="https://js.hsforms.net/forms/embed/v2.js" type="text/javascript"></script>';
echo '<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "YOUR_PORTAL_ID",
    formId: "YOUR_FORM_ID"
  });
</script>';
?>

החליפו את YOUR_PORTAL_ID ואת YOUR_FORM_ID בערכים מחשבון ה-HubSpot שלכם.

שלב 2: עטיפת הטופס בקלאס CSS ייעודי

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

<div class="custom-hubspot-form">
  <?php
  echo '<script src="https://js.hsforms.net/forms/embed/v2.js" type="text/javascript"></script>';
  echo '<script>
    hbspt.forms.create({
      region: "na1",
      portalId: "YOUR_PORTAL_ID",
      formId: "YOUR_FORM_ID",
      target: ".custom-hubspot-form"
    });
  </script>';
  ?>
</div>

הפרמטר target מורה ל-HubSpot בדיוק לאן להזריק את הטופס, כך שהוא מרונדר בתוך ה-wrapper שלכם.

שלב 3: שימוש בפרמטר css כדי להסיר את עיצוב ברירת המחדל (אופציונלי)

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

hbspt.forms.create({
  region: "na1",
  portalId: "YOUR_PORTAL_ID",
  formId: "YOUR_FORM_ID",
  target: ".custom-hubspot-form",
  version: "V2_PRERELEASE",
  css: ""
});

שימו לב: שימוש ב-css: "" יסיר לחלוטין את העיצובים המובנים של HubSpot, לכן הקפידו להגדיר בעצמכם את כל העיצובים הדרושים לשדות הטופס בקובץ העיצוב.

שלב 4: כתיבת סגנונות CSS מותאמים

כעת כשעטפתם את הטופס בקלאס משלכם, תוכלו לעצב אותו בקובץ style.css של ערכת העיצוב:

.custom-hubspot-form input[type="text"],
.custom-hubspot-form input[type="email"] {
  border: 2px solid #222;
  padding: 10px;
  width: 100%;
  font-size: 16px;
}

.custom-hubspot-form .hs-button {
  background-color: #0073e6;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.custom-hubspot-form .hs-form-required {
  color: red;
  font-weight: bold;
}

שלב 5: התמודדות עם עדיפות סגנונות (Specificity)

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

.custom-hubspot-form input[type="text"] {
  border: 2px solid #000 !important;
}

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

שלב 6: טעינת הקובץ בצורה נכונה

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

function custom_hubspot_form_styles() {
    wp_enqueue_style(
        'hubspot-custom-style',
        get_stylesheet_directory_uri() . '/css/hubspot-form.css'
    );
}
add_action( 'wp_enqueue_scripts', 'custom_hubspot_form_styles' );

להבנה מעמיקה יותר של טעינת קבצי CSS ו-JavaScript בוורדפרס, עיינו במדריך על enqueue של סקריפטים וסגנונות בוורדפרס.

שימו לב לשימוש ב-get_stylesheet_directory_uri() במקום get_template_directory_uri() – כך הנתיב מצביע לספריית תבנית הבת (child theme) אם אתם משתמשים באחת.

שאלות נפוצות

שאלות נפוצות על עיצוב טפסי HubSpot ב-CSS בוורדפרס:

סיכום

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