צרו קשר

בחירת מדינה בשדה טלפון בטופס אלמנטור (כולל דגלים וחיפוש מהיר)

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

תוכן עניינים

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

פינגוינים

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

לעומת זאת, כאשר אנו מבקשים יכולות מתקדמות יותר, כמו למשל בחירת מדינה מרשימה מובנית, אנו מוצאים שחלקן חסרות בטפסים הבסיסיים של אלמנטור. תוספי טפסים מתקדמים (למשל Gravity forms וWP forms) מציעים פתרונות מובנים למקרים כאלו, אך מי שכמוני, אוהב להשתמש דווקא בטפסים של אלמנטור, צריך להתגבר על המגבלות על ידי יישום פתרונות יצירתיים, וזה בדיוק מה שנעשה במדריך הזה! צילום מסך - טופס עם שדה קידומת מדינה

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

צילום מסך - טופס עם שדה קידומת מדינה - שדה בחירה פתוח

יתרונות הפיתרון שלי:

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

צילום מסך - שדה חיפוש בתוך שדה בחירת מדינה

יוצאים לדרך – יוצרים שדה קידומת מדינה חכם

הוספת והגדרת שדות באלמנטור

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

לשדה בחירת המדינה יש להגדיר את השם ל-"country_prefix" ולשדה הטלפון יש להגדיר את השם ל-"phone". שימו לב, שאם מסיבה כלשהי אתם משנים את שמות השדות לשמות אחרים, אתם חייבים לעדכן את הסקריפט ואת הCSS בהתאם לשמות החדשים שבחרתם. אם לא תעשו זאת, הסקריפט לא יזהה את השדות בטופס (ולא יפעל כראוי) והשדות לא יראו טוב בגלל חוסר התאמה בסלקטורים של הCSS.

כדאי (אבל לא חובה) להגדיר רוחב של כל שדה, כך שהשדות ימוקמו זה לצד זה.

טעינת Select2

כברירת מחדל אנחנו מניחים שספריית Select2 בכלל לא נטענת באתר שלכם. בואו נטען אותה! הוסיפו את הקוד הזה לקובץ functions.php בתבנית הבת. בדוגמה כאן אני טוען את הספרייה רק בשני עמודים: העמוד שהסלאג שלו הוא contact והעמוד שהסלאג שלו הוא lets-talk. אתם חייבים לשנות את זה בהתאם לסלאגים של הדפים בהם אתם רוצים להציג רשימת מדינות בשדה טופס. אתם יכולים להוסיף עוד עמודים, לשנות סלאגים או להשאיר את הטעינה לעמוד יחיד, אבל חשוב שלא תסתפקו בהדבקת הקוד, אלא תתאימו את השורה השלישית לאותם עמודים בהם אתם צריכים את שדה הטלפון עם קוד המדינה.

// Load Select2 on selected pages for phone country code field
function load_select2() {
    if ( is_page( array('contact', 'lets-talk') ) ) {
        //Add the Select2 CSS file
        wp_enqueue_style( 'select2-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css', array(), '4.1.0-rc.0');
        //Add the Select2 JavaScript file
        wp_enqueue_script( 'select2-js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js', 'jquery', '4.1.0-rc.0');
    }
} 
add_action( 'wp_enqueue_scripts', 'load_select2' );

אם אתם מעדיפים לטעון את select2 בכל האתר ולא רק בדף ספציפי (לא מומלץ בגלל ביצועים) אתם יכולים להשתמש בקוד הבא:

// Load Select2 on all pages for phone country code field
function load_select2() {
    //Add the Select2 CSS file
    wp_enqueue_style( 'select2-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css', array(), '4.1.0-rc.0');
    //Add the Select2 JavaScript file
    wp_enqueue_script( 'select2-js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js', 'jquery', '4.1.0-rc.0');
} 
add_action( 'wp_enqueue_scripts', 'load_select2' );

אם זה לא עובד לכם או שאתם מעדיפים לא לגעת בתבנית, אתם יכולים לטעון את select2 גם באמצעות תגיות HTML (פחות מומלץ):

<!-- Include Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<!-- Include jQuery and Select2 JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

הסקריפט שעושה את כל הקסם

יש סקריפט אחד שעושה את כל הקסם. אני ממליץ בחום לא להטמיע את הסקריפט הזה בוידג'ט HTML בתוך אלמנטור, אלא בצורה חיצונית (למשל, באמצעות הפיצ'ר Custom Code של אלמנטור או תוסף סניפטים).

אני רוצה להציע לכם כאן שתי גרסאות לבחירתכם:

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

כדי למשוך לשדה הבחירה את כל המדינות הקיימות בעולם השתמשו בקוד הזה:

document.addEventListener("DOMContentLoaded", function(event) {
    // Create the fieldset and legend elements with classes
    var fieldset = $('<fieldset>').addClass('phone-number-fieldset');
    var legend = $('<legend>').addClass('phone-number-legend').text('Phone Number');
    
    // Append the legend to the fieldset
    fieldset.append(legend);

    // Insert the fieldset before the first field group
    $('.elementor-field-group-country_prefix').before(fieldset);

    // Create a div with class "phone-inner" to wrap the fields
    var phoneInner = $('<div>').addClass('phone-inner');

    // Move the existing field groups inside the "phone-inner" div
    $('.elementor-field-group-country_prefix, .elementor-field-group-phone').appendTo(phoneInner);

    // Append the "phone-inner" div to the fieldset
    fieldset.append(phoneInner);


    // Fetch country data from an open API
    $.ajax({
        url: 'https://restcountries.com/v3.1/all',
        method: 'GET',
        success: function(data) {
            var $select = $('#form-field-country_prefix');
            $select.empty(); // Clear any existing options

            // Prepare data with country names and prefixes
            data.forEach(function(country) {
                if (country.idd && country.idd.root && country.idd.suffixes) {
                    var name = country.name.common;
                    var prefix = country.idd.root + country.idd.suffixes[0];
                    var flag = country.flags && country.flags.svg ? country.flags.svg : '';

                    // Correct the US prefix
                    if (name === 'United States') {
                        prefix = '+1'; // Ensure prefix is correctly formatted
                    }
                    
                    // Append each country as an option
                    var optionText = name + ' (' + prefix + ')';
                    var $option = $('<option>', { value: prefix, 'data-flag': flag, 'data-prefix': prefix }).text(optionText);
                    $select.append($option);
                    
                    // Set USA as the default selected option
                    if (name === 'United States') {
                        $option.prop('selected', true);
                    }
                }
            });

            // Set USA as the default selected option
            $select.find('option').each(function() {
                if ($(this).text().includes('United States')) {
                    $(this).prop('selected', true);
                }
            });

            // Initialize Select2 for the select element
            $select.select2({
                placeholder: 'Country',
                allowClear: true,
                templateResult: formatState,
                templateSelection: formatSelection
            });
        }
    });

    // Function to format the options with flags
    function formatState(state) {
        if (!state.id) {
            return state.text;
        }
        var flagUrl = $(state.element).data('flag');
        var $state = $(
            '<span><img src="' + flagUrl + '" class="img-flag" /> ' + state.text + '</span>'
        );
        return $state;
    }

    // Function to format the selected option with flag and prefix only
    function formatSelection(state) {
        if (!state.id) {
            return state.text;
        }
        var flagUrl = $(state.element).data('flag');
        var prefix = $(state.element).data('prefix');
        var $state = $(
            '<span><img src="' + flagUrl + '" class="img-flag" /> ' + prefix + '</span>'
        );
        return $state;
    }

    // Enhance search input with placeholder
    $('select').on('select2:open', function() {
        $('.select2-search--dropdown .select2-search__field').attr('placeholder', 'Search for your country...');
    });
});

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

document.addEventListener("DOMContentLoaded", function(event) {
    // Create the fieldset and legend elements with classes
    var fieldset = $('<fieldset>').addClass('phone-number-fieldset');
    var legend = $('<legend>').addClass('phone-number-legend').text('Phone Number');
    
    // Append the legend to the fieldset
    fieldset.append(legend);

    // Insert the fieldset before the first field group
    $('.elementor-field-group-country_prefix').before(fieldset);

    // Create a div with class "phone-inner" to wrap the fields
    var phoneInner = $('<div>').addClass('phone-inner');

    // Move the existing field groups inside the "phone-inner" div
    $('.elementor-field-group-country_prefix, .elementor-field-group-phone').appendTo(phoneInner);

    // Append the "phone-inner" div to the fieldset
    fieldset.append(phoneInner);

    // Define the list of common and additional countries
    var countries = [
        'United States', 'Canada', 'United Kingdom', 'Germany', 'France', 'Australia',
        'Japan', 'Italy', 'Spain', 'Netherlands', 'Switzerland', 'Sweden', 'Norway',
        'Denmark', 'Finland', 'Belgium', 'Austria', 'Ireland', 'New Zealand', 'Brazil',
        'Mexico', 'Argentina', 'Chile', 'Colombia', 'Israel', 'China', 'India', 'South Korea',
        'Turkey', 'Saudi Arabia', 'United Arab Emirates', 'South Africa', 'Egypt',
        'Singapore', 'Thailand', 'Vietnam', 'Philippines', 'Bangladesh',
        'Ukraine', 'Poland', 'Portugal', 'Greece', 'Czech Republic', 'Hungary', 'Romania',
        'Slovakia', 'Croatia', 'Serbia', 'Slovenia', 'Estonia', 'Latvia', 'Lithuania'
    ];

    // Fetch country data from an open API
    $.ajax({
        url: 'https://restcountries.com/v3.1/all',
        method: 'GET',
        success: function(data) {
            var $select = $('#form-field-country_prefix');
            var countryData = {};

            // Prepare data with country names and prefixes
            data.forEach(function(country) {
                if (country.idd && country.idd.root && country.idd.suffixes) {
                    var name = country.name.common;
                    var prefix = country.idd.root + country.idd.suffixes[0];
                    var flag = country.flags && country.flags.svg ? country.flags.svg : '';

                    if (countries.includes(name)) {
                        // Correct the US prefix
                        if (name === 'United States') {
                            prefix = '+1'; // Ensure prefix is correctly formatted
                        }
                        countryData[name] = { prefix: prefix, flag: flag };
                    }
                }
            });

            // Append options in the order defined in the countries array
            countries.forEach(function(countryName) {
                if (countryData[countryName]) {
                    var prefix = countryData[countryName].prefix;
                    var flag = countryData[countryName].flag;
                    var optionText = countryName + ' ' + prefix;
                    var $option = $('<option>', { value: prefix, 'data-flag': flag, 'data-prefix': prefix }).text(optionText);
                    $select.append($option);
                    
                    // Set USA as the default selected option
                    if (countryName === 'United States') {
                        $option.prop('selected', true);
                    }
                }
            });

            // Initialize Select2 for the select element
            $select.select2({
                placeholder: 'Select a country prefix',
                allowClear: true,
                templateResult: formatState,
                templateSelection: formatSelection
            });
        }
    });

    // Function to format the options with flags
    function formatState(state) {
        if (!state.id) {
            return state.text;
        }
        var flagUrl = $(state.element).data('flag');
        var $state = $(
            '<span><img src="' + flagUrl + '" class="img-flag" /> ' + state.text + '</span>'
        );
        return $state;
    }

    // Function to format the selected option with flag and prefix only
    function formatSelection(state) {
        if (!state.id) {
            return state.text;
        }
        var flagUrl = $(state.element).data('flag');
        var prefix = $(state.element).data('prefix');
        var $state = $(
            '<span><img src="' + flagUrl + '" class="img-flag" /> ' + prefix + '</span>'
        );
        return $state;
    }

    // Enhance search input with placeholder
    $('select').on('select2:open', function() {
        $('.select2-search--dropdown .select2-search__field').attr('placeholder', 'Search for your country...');
    });
});

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

התאימו את הסקריפט לצרכים שלכם

    1. אני הגדרתי שהקידומת של ארה"ב תופיע כברירת מחדל. אתם יכולים לשנות את זה לכל מדינה אחרת (ישראל, למשל). קטע הקוד הרלוונטי הוא זה: 
      // Set USA as the default selected option
 if (countryName === 'United States') {
    $option.prop('selected', true);
 }

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

    2. הפלייסהולדר של שדה החיפוש – כרגע כתוב 'Search for your country…'. זה מגיע ממש מהסוף של הקוד. מצאתם? אתם יכולים לשנות את הכיתוב לכל כיתוב אחר שנראה לכם (למשל 'Find countries').

הגדרות סגנון – CSS מותאם

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

/* International phone field */
.phone-number-fieldset {
    width: 100%;
    border: 0;
    padding: 0 calc(10px / 2);
    margin: -10px 0 20px 0;
}

.phone-inner {
    display: flex;
    flex-direction: row;
    border: 2px solid #ffffff;
}

.phone-number-legend {
    width: 100%;
    color: #ffffff;
}
div:is(.elementor-field-group-phone, .elementor-field-group-country_prefix) label.elementor-field-label {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

ul#select2-form-field-country_prefix-results {
    width: 260px;
    background-color: #ffffff;
    font-size: 1rem;
}

img.img-flag {
    height: 1em;
    vertical-align: middle;
    width: 2em;
    margin-right: 10px;
}

span#select2-form-field-country_prefix-container {
    position: absolute;
    color: #ffffff;
}

.elementor-form .elementor-field-type-select.elementor-field-group.elementor-field-group-country_prefix,
.elementor-form .elementor-field-type-tel.elementor-field-group.elementor-field-group-phone {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
}

.elementor-form {
    --country-code-field-width: 122px;
}
.elementor-field-type-select.elementor-field-group.elementor-field-group-country_prefix {
    width: var(--country-code-field-width, 122px);
}

.elementor-field-type-tel.elementor-field-group.elementor-field-group-phone {
    width: calc(100% - var(--country-code-field-width, 122px));
}

#form-field-phone {
    border: 0;
}

span.select2-selection.select2-selection--single.select2-selection--clearable,
.select2-container--default .selection .select2-selection.select2-selection--single
{
    background-color: unset;
    border-width: 0;
    border-color: #ffffff;
    border-style: solid;
    min-height: 45.2px;
    margin-right: -1px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #ffffff;
}

/* Custom scrollbar for Select2 dropdown */
.select2-results__options {
    max-height: 200px; /* Adjust the height as needed */
    overflow-y: auto;
}

/* Minimal scrollbar styling */
.select2-results__options::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.select2-results__options::-webkit-scrollbar-track {
    background: #f1f1f1; /* Track color */
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #888; /* Handle color */
    border-radius: 4px; /* Rounded corners for the handle */
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #555; /* Handle color on hover */
}

.select2-container--default .select2-selection--single .select2-selection__arrow b,
button.select2-selection__clear,
span.select2-selection__arrow,
.select-caret-down-wrapper
{
    display: none;
}

.select2-dropdown {
    width: 260px!important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding-left: 30px; /* Space for search icon */
}
.select2-container--default .select2-placeholder {
    display: flex;
    align-items: center;
}
.select2-container--default .select2-placeholder svg {
    margin-right: 8px; /* Space between icon and text */
}

.select2-container--default .select2-search--dropdown.select2-search .select2-search__field {
    font-size: 1.125rem;
}

.select2-container .select2-selection--single .select2-selection .select2-selection__rendered {
    padding-right: 10px;
    padding-top: 4px;
}

התאמת עיצוב השדות לאתר

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

לדוגמה: את הרוחב של שדה הקידומת אפשר לערוך בשורה הזאת: –country-code-field-width: 122px;
אם הרוחב של 122px שקבעתי הוא יותר מידי או פחות מידי בשבילכם – קבעו אותו בהתאם לצרכים שלכם.

בדוגמה שלי גם יש שימוש בשדות עם מסגרת לבנה (והרקע של האזור כולו הוא כחול כהה), לכן קיים הסגנון הזה:

.phone-inner {
    display: flex;
    flex-direction: row;
    border: 2px solid #ffffff;
}

אם אתם רוצים צבע מסגרת שונה או עובי מסגרת שונה, התאימו זאת בשורה border: 2px solid #ffffff.
אם אתם רוצים להוסיף צבע רקע לשדה, הוסיפו גם אותו כאן בשורה חדשה. למשל: background-color: #efefef;
אם כל השדות בטופס שלכם עם קצוות מעוגלים, כדאי מאוד שגם השדה החדש יהיה כזה. הוסיפו שורה כזאת: border-radius: 10px; (כמובן שעליכם להתאים את הערך כך שיתאים לעיצוב).

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

קצת על הטכנולוגיה שמאחורי הפיתרון

מה זה בעצם Select2?

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

מה זה בעצם Rest countries?

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

REST COUNTRIES API הוא כלי נגיש לציבור המספק מידע מפורט על מדינות ברחבי העולם. ה-API הזה נגיש בחינם לשימוש ומציע נתונים כגון שמות מדינות, קודים, שפות, ערי בירה, אזורים ועוד בפורמט JSON. הוא פועל תחת ארכיטקטורה RESTful, מה שמבטיח שהשימוש בו לשליפת נתונים ספציפיים למדינה פשוט וישיר. המידע נטען בצד לקוח אחרי שהדף כבר נטען בדפדפן של המשתמש. Rest countries אינו הAPI היחיד שזמין לאיתור מידע על מדינות, אבל בחרתי דווקא בו כי הוא אמין, חופשי (חינמי) ונוח למימוש.

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

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

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

חמש נשים בבית מלון באנטרקטיקה

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

אם אהבתם את המדריך הזה אתם מוזמנים לגלות עוד מדריכים שכתבתי להעשרת הפונקציונליות של טפסי אלמנטור: איך לשלוח SMS מתוך טופס אלמנטור? , איך לשלוח נתונים מטפסי אלמנטור ל-Google Sheets?, חיבור טופס אלמנטור למערכת הדיוור Smoove. ואם נתקלתם בבעייה שהטפסים שנשלחים מהאתר לא מגיעים לתיבת המייל המדריך שלי על SMTP נועד בדיוק בשבילכם.

אלחנן לבבי

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

שיתוף  

הרשמה לקבלת עדכונים

תמונה של אלחנן לבבי

אלחנן לבבי

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

עוד באותו נושא

סגירת חלון יצירת קשר

נשמח לספק לחברה שלך פתרונות מקצועיים בהתאמה אישית.

אלחנן, מנהל הסטודיו, יחזור אליך בשעות הקרובות וישמח לשוחח איתך.

דילוג לתוכן