Previous Syscality

Tag: Wordpress Forms

  • 2 Stunning Methods to Create A HubSpot Form on WordPress

    Create a HubSpot form on your WordPress website lets you efficiently capture leads and collect customer information.

    With HubSpot forms, you can track submissions, automate follow-up emails, and nurture leads using CRM tools.

    This integration boosts your marketing efforts, enhances customer engagement, and drives conversions while maintaining a smooth user experience. It also centralizes customer interactions and optimizes your marketing campaigns.

    In this blog, we will learn two distinct methods to create a HubSpot form for your WordPress website, which will make your site more engaging and interactive.

    Benefits to Create a HubSpot Forms

    Before learning how to build a HubSpot Form, let’s first understand the benefits to create a HubSpot form. This section will show the advantages of making a HubSpot form for a WordPress website.

    HubSpot is a widespread platform that lets you grow your organization through marketing and sales. It offers numerous tools, including a content management system, customer relationship manager, form builder, email marketing, live chats and chatbots, and more.

    Among all these tools, HubSpot Form Builder is the best tool for WordPress websites. It allows you to build customized forms for lead generation and business growth. Its drag-and-drop feature enables you to create specialized forms with zero technical expertise.

    Using HubSpot Form Builder for your site provides many benefits, such as customization, specialized fields, and more. Here are some advantages of operating HubSpot for creating forms:

    • Drag-and-drop feature to build pop-up or embedded forms
    • Style form according to the company’s goals and brand
    • Directly save the information into your company’s database
    • Get blank and pre-designed templates according to your requirements
    • Receive notifications with new form submissions to build a connection with users

    Since you have learned all the benefits of using HubSpot as a form builder for your WordPress website, it’s time to discuss how to create a HubSpot form for your website.

    Methods of Create HubSpot Form

    There are two different methods for building a customized and interactive HubSpot form for your website. These two methods let you create a HubSpot form and pop-ups from different templates for lead generation.

    HubSpot Plugin

    It is one of the easiest ways to create a HubSpot form for your WordPress website. Please install and activate the HubSpot plugin on your site to create a form using it.

    Hubspot Create Account

    After activating the HubSpot plugin, it will be added to the new menu item of your WordPress admin sidebar. Afterwards, click on the HubSpot option to open the plugin.

    Log in Hubspot

    Now, create an account for the HubSpot dashboard. Log in to your account by entering your username and password. Click on the “Login” button to open the dashboard.

    Continue With This Account

    Once you have logged into your account, HubSpot will ask your permission to continue using this account.

    To continue, click the “Continue with this account” button.

    Connect Website Options

    After that, WordPress will ask your permission to connect the HubSpot account with the WordPress website.

    Hit the “Connect Website” to move ahead with the website.

    Create a Free Form in Hubspot

    After connecting HubSpot and the WordPress website, head to the WordPress dashboard. Click the “Forms” button under the HubSpot section to continue creating forms.

    Now, you are heading towards the “Forms” page, where you can create a form by clicking the “Create a Free Form” button.

    Choose Form Type Options

    In the next step, you must choose the form type and click the “Next” button at the top to initiate the process.

    We are creating an “Embedded Form,” so we will choose the same for form creation.

    Select a Template Options

    Once you select the form type, you will move towards the HubSpot template library.

    Now, choose the template you want to add, such as Registration or Contact Us. Then, hit the “Start” button to proceed.

    New Contact Us Form

    Selecting the template will open the form builder, which you can use to customize your form. You can customize the template by dragging and dropping fields from the left side to the right side.

    After customizing the form, click the “Submit” button at the top right corner of the page.

    Review and Publish Options

    After submitting the form, you will see a pop-up stating “Review and Publish.” To publish your form, scroll down the page and click the “Publish” button.

    Using Shortcode

    Once you click the “Publish” button, a pop-up window with a short code will appear on your screen.

    Copy this short code and embed the form to your site’s pages wherever you want.

    WP-Forms

    Another method to create a HubSpot form is using the WP-Forms. Over 6 million people use this drag-and-drop WordPress form builder with a HubSpot integration add-on.

    You can add a WP-Forms plugin to activate this plugin for your WordPress website.

    Once you activate the WP-Forms plugin, go to the “Add-ons” tab in the WP-Forms section of the dashboard.

    You will now be directed to the “WP-Forms Add-ons” page, where you will see the “HubSpot” add-on. To upgrade this add-on, click on the “Upgrade Now” button.

    Addons Wpforms

    You will move to the “WP-Forms Account” page. Scroll down to the “HubSpot Add-on” section and click the download button.

    Then, you can easily install and activate this add-on just like you activated the plugin.

    Hubspot Addon Download

    For the next step, go to WP-Forms and head towards the “Settings” from the WordPress dashboard. In the dashboard, select the “Integrations” tab.

    In the Integrations list, you will see HubSpot. Against the HubSpot option, click the arrow button to expand the section, and click the “Add New Account” button to add your account.

    Choose Hubspot For Integration

    After adding your account, you will see a prompt on the screen asking you to log in to your HubSpot account by entering your login credentials.

    continue With This Account

    When you log into your account, click the “Continue with this account” button to click the form creation.

    Connecting Wpforms

    Then, a pop-up will appear asking permission to connect WP-Forms with the HubSpot account. Click on the “Connect App” button to move ahead.

    Connected Hubspot

    Once you have connected the WP-Forms with HubSpot, head to the WordPress dashboard and return to the “Integrations” screen. Here, you will see “Connected” against the HubSpot section.

    Select A Template

    Select the “Add New” button to create a HubSpot Form under the WP-Forms section.

    Then, choose the form template you want to build from the WP-Forms library.

    Add New Connection

    After selecting the desired form template, you will directed towards the WP-Forms interface. Here, you can edit the form template.

    Click on the “Marketing” button under the menu bar on the left-hand side. You will see HubSpot under the list of integrations.

    Choose the HubSpot option, which will open a pop-up. Then, hit the “Add New Connection” button at the top.

    Enter Connection Nickname

    Under WP-Forms, add a nickname for your HubSpot form. To save your name, hit the “OK” button.

    Add Action to Perform in Hubspot

    Now, allow the WP-Forms permission to add your HubSpot account and choose the action plan.

    Select the account from the dropdown and choose “Action to Perform” according to the content you want to collect.

    Fill in Form

    Then, select the details you need from the visitors, including Name, Email address, lead status, and more.

    Simple Contact Form

    Now, customize your form from the form builder with the drag-and-drop feature.

    Add the information you want to collect and your HubSpot account.

    Simple Contact Form Options

    After finishing the customization, click the “Embed” button at the top right of the form builder.

    Select Existing Page Option

    It will open a pop-up saying “Embed in a Page” with two options. To add the form to a new page, click the “Create New Page” option. To add a form to a pre-existing page, click the “Select Existing Page” option.

    Then, select the desired page from the dropdown menu. Click the “Let’s Go” button to embed the form.

    Lets Go Options

    Afterward, you will be directed to the selected page, where you will see that the form has already been embedded.

    To make your form live, click the “Publish” button at the top right corner.

    Add Title Click Publish Button

    Now, your HubSpot form is live on your WordPress website.

    Conclusion

    Create a HubSpot form for your website brings more leads and makes your site more interactive. Hence, to create a HubSpot form, you must align it according to your website’s theme and brand. These two methods are the best to create a HubSpot form for your website as they provide the easiest methods to customize the forms. This step-by-step tutorial assists you in making an interactive HubSpot form according to your preferences. We hope that this blog will be helpful for you.

  • Customize WPForms with a Date Picker in 4 Easy Steps

    A date and time picker field helps you to collect date-related information on your WordPress forms.

    For instance, if you want to gather your users’ birthdates or allow them to schedule appointments for your services easily via your forms.

    Here, we will guide you on effortlessly creating WPforms with a date picker.

    Benefits to Add Date Field in WordPress

    When you add new form with date picker field, you give your users the benefit of choosing a custom date and time using the WPforms.

    Use can use these WPforms with a date picker for the following purposes:


    • Registration Forms that require users to enter their birth dates.

    • Order Forms where users need to choose a delivery date and time.

    • Rental Item Forms that allow users to select a pick-up or drop-off date.

    • Callback Request Forms where users can specify when they want to be contacted.

    • Leave Request Forms enable employees to select a date range for leave.

    A date range input field makes it much easier for users to insert dates than manually typing them.

    Ensuring that the date and time format remains consistent across all form submissions is a great practice.

    Therefore, having a WordPress form with a date picker helps reduce errors and improves the user experience.

    Tutorial on adding WPforms with a date picker field

    Using a date and time picker field helps you to schedule meetings, calls, and appointments.

    However, you must learn how to add a date field in WordPress.

    This section will help you understand how to add a date time picker for WPforms in 4 simple steps.

    1. Install the WPForms Plugin and Choose a Template

    To create WPforms with a date picker, you must first install WPForms, the best contact form plugin available.

    After activating WPForms, go to WPForms > Add New page from your WordPress dashboard.

    WP forms add new

    To add a date field in WordPress, navigate to the ‘Select a Template‘ page.

    It’s always a good idea to give your form a name so that you can quickly identify it later.

    Enter the form name

    Here, you will find a variety of pre-made form templates, many of which already include a date and time picker field.

    We will use the Simple Contact Form template to add WPforms with a date picker.

    Use template option

    However, feel free to select the template that best suits your needs.

    Once you choose your template, click the ‘Use Template‘ button to create WPform.

    2. Install the WPForms Plugin and Choose a Template

    By default, the Simple Contact Form only has the name, email address, and comments field added to the form.

    In the left column, scroll down to the Fancy Fields section, where you will find the “Date/Time” field.

    Drag and drop this date range and time field to the desired location on your form.

    Here, we have placed it just below the Email field.

    Add date time field to the form

    After adding the field, click on the “Date/Time” field to edit it. To open up the “Field Options” tab on the left-hand side of your screen, please follow these steps.

    From here, you can change the field label, date format, and description text to give more context for what the user needs to enter in the field.

    General date time

    You can also check the ‘Required’ box to make this a mandatory field.

    It seems that the WPforms with a date picker requires the user to select a specific date range and time before they can successfully submit it.

    Once you have made all the necessary changes, don’t forget to click the ‘Save’ button at the top to store your form settings.

    Today’s Tip

    If you want to ensure that your users can easily input specific dates for their stay using the WPforms with a date picker, then use the Hotel Reservation Form template. This template is specifically designed to include two date picker fields, one for the arrival date and one for the departure date, making it incredibly simple for your users to select the dates they want to stay.

    3. Configure the Advanced Options for the Date Time Picker

    After adding the date picker field to a WordPress form, the question arises, “How to change date format in WPforms?“

    The WPforms with a date picker field has a default calendar and a time dropdown menu. This section will explain how to change the date format in the WPforms.

    The current date range is selected by default, but the user can choose a different date. The date format is month/day/year, while the time dropdown defaults to a 12-hour clock with 30-minute intervals.

    Change the default date pattern

    Users can select a time slot that suits them. However, sometimes you may need to change the date and time picker field settings.

    For instance, if your country follows the day/month/year or 24-hour date and time formats instead of the default ones.

    Change the default time pattern

    You need to switch to the ‘Advanced’ tab at the top of the left-side panel.

    Drop down date option

    To customize the size of the date picker field, simply navigate to the Date section and make the necessary adjustments.

    If the form has limited space and the default calendar view looks too small, you can switch to a date dropdown menu instead.

    Date drop down menu

    Adding WPforms with a date picker will make your users’ experience more user-friendly and make it easier for them to select a date from a list.

    You can also change the date format in WPforms from month/day/year to day/month/year.

    If you choose the calendar date picker, you can insert placeholder text in the “Date” field to let users know what format you are using so they don’t get confused.

    Apply advanced settings

    To adjust the date range that can be selected, you can enable the “Limit Days” switch. This is particularly useful if you want to disable past dates and operate only on certain days of the week.

    You can also disable past dates to prevent users from selecting previous dates.

    Limit days disable past dates option

    In the “Time” section, you can change the interval to 15 minutes or 1 hour instead of 30 minutes. You can also input placeholder text to show your time format.

    • The time picker defaults to a 12-hour clock, but you can switch to a 24-hour clock.
    • You can also turn on the ‘Limit Hours’ setting to specify the start and end times of your services.
    • You can enter a CSS class name for the date picker field to override the form’s style using code later.

    Lastly, you can hide the form field label and sub-label if necessary.

    Once you are satisfied with your form, you can save it as WPforms with a date picker by clicking the “Save” button at the top right corner of the screen.

    4. Embed the WordPress Form on Your Website

    To add your new WPforms with a date picker to your website, click the ‘Embed’ button at the top of the form builder.

    This will bring up a pop-up asking you to either select an existing page to add the new form with a date picker or create a new page for the form from scratch.

    Embed WP forms

    If you want to add the form to an existing page, click the ‘Select Existing Page‘ button and choose one of the pages on your WordPress website.

    Select the existing page option

    If you prefer to add WPforms with a date picker to a new page, click the ‘Create New Page’ button and give the new page a name.

    Both options will take you to the block editor, where you can add the date field in WordPress form block to the page.

    Create a new form

    To do this, click the ‘+’ add block button, type ‘WPForms’ into the search bar, and drag and drop the block to where you want it on the page.

    Add WP forms block

    Next, click the dropdown menu and select the WPforms with a date picker that you just created.

    Choose form option

    In the Block settings sidebar, you can customize the form field, label, and button styles to match your WordPress theme.

    You can also change each element’s size, border radius, and colors.

    Once satisfied with the settings, click the “Update” or “Publish” button to make the form live on your website.

    Update the WP Form

    If you want to add the WPforms with a date picker to a post instead of a page,

    you can create a new post or open an existing one in the block editor and follow the same steps.

    Different ways to use WPForms with a Date Picker

    In this section, you will learn how to use the date picker form as a widget or embed it as a shortcode.

    It will help you quickly integrate your WPforms date picker on your website.


    • Method 1

    WP form with Date Picker as a Widget

    Below are the easy steps to add the WPforms Block to a Widget-Ready Area.

    You can display it if you have a classic WordPress theme and your form is short enough to fit in a widget-ready header, footer, or sidebar area.

    To add the WPforms block to such an area, go to Appearance > Widgets in the WordPress admin area.

    Afterward, find the widget-ready area where you want your form to appear, and click the white ‘+’ add block button inside it.

    Widget WP forms

    Then, search for the WP Forms block and select the form you want to add.

    You can customize the design in the Block settings sidebar to match your WordPress theme.

    Update your widget

    Once done, click the “Update” button to save your changes.


    • Method 2

    Use Date Picker form as a Shortcode

    Remember that this method won’t work if you use a block theme.

    Alternatively, you can embed your WPforms with a date picker using a shortcode.

    Embed WP forms from a shortcode

    If the WPForms block or widget doesn’t work, click the ‘Use a shortcode’ link in the ‘Embed in a Page’ popup.

    You will see a shortcode you can copy and paste into a page, post, or widget-ready area.

    Customizing WPForms Date Picker Settings

    Customizing date picker settings enables developers to “optimize the user experience“

    by fine-tuning how users select dates in web forms or applications. Let’s start with setting a date ranges:

    1. Setting Date Ranges

    Let’s discuss about setting date ranges in your WPforms date picker. To set a date range, you’ll usually need to define a start date and an end date.

    Here’s how you might do it:


    • Choose a minimum date (the earliest date users can select)

    • Set a maximum date (the latest date users can pick)

    For example, if you’re booking a vacation, you might want to set the range from today to one year from now.

    This way, users can’t book too far in advance or choose dates in the past.

    Setting Date Ranges

    For example, if you’re booking a vacation, you might want to set the range from today to one year from now.

    This way, users can’t book too far in advance or choose dates in the past.

    Pro Tip

    Consider your users needs when setting date ranges. Too wide a range can be overwhelming, while too narrow might be restrictive.

    2. Formatting Date Display

    Now, let’s make those dates look good! Formatting your date display is all about making the dates easy for your users to read and understand.

    Here are some common date formats:


    • MM/DD/YYYY (like 12/25/2023)

    • DD/MM/YYYY (like 25/12/2023)

    • YYYY-MM-DD (like 2023-12-25)

    Formatting Date Display

    Remember, different countries have different date formats. It’s a good idea to use the most common format in your target area or give users the option to choose their preferred format.

    You can also get creative with how you display the date. Maybe you want to spell out the month or add the day of the week.

    Just make sure it’s clear and easy to understand!

    3. Adding Placeholder Text

    Placeholder text is super helpful for guiding your users. You see that light gray text in an input field of the WPforms date picker before you start typing.

    Adding Placeholder Text

    For a date picker, your placeholder might look something like this:


    • Select a Date

    • MM/DD/YYYY

    • Start Date – End Date (for a range picker)

    The key is to make it clear what kind of input you’re looking for.

    Your placeholder should give users a hint about the expected format or what they’re supposed to do.

    4. Configuring Date Restrictions

    Sometimes, you don’t want users to be able to select certain dates. That’s where date restrictions come in handy.

    You might want to restrict dates for a few reasons:


    • To prevent bookings on holidays

    • To block out dates that are already full

    • To stop users from selecting weekends for business appointments

    To set these up, you’ll usually need to create an array of restricted dates or define rules for what dates should be unavailable.

    5. Testing your WPforms Date Picker

    Alright, you’ve set everything up. Now it’s time to make sure it all works smoothly!

    Here’s a quick checklist for testing your WPforms date picker:


    • Try selecting dates within the allowed range

    • Attempt to pick dates outside the range

    • Test all format options if you’re allowing users to change formats

    • Make sure restricted dates can’t be selected

    • Check that the placeholder text displays correctly

    • Test on different devices and browsers

    Testing Your Date Picker

    With these tips, you’ll have a user-friendly, fully customized date picker in no time.

    Conclusion

    WPforms date picker on your website helps your users understand more about your services. They will also be able to understand your working pattern and value your work timings.

    Hence, it will help you and your website serve your visitors more profoundly and answer their queries shortly.