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

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

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

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

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

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

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

<?php
// Replace YOUR_PORTAL_ID and YOUR_FORM_ID with actual values from HubSpot
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>';
?>

שלב 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>

שלב 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;
}

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

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

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

מחשבות לסיום

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

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