Adding calender to the Contact Form

  • bookingmom · Member ·

    Hi there,

    When creating the contact form there are some standard types of the fields available:
    text, textarea, radio, checkbox, select, email, name, url.

    Is it possible to create a field with the type Calender (like when you choose departure and arrival dates for your airplane tickets)?

    Is it also possible to change the width of the field and place more than one field for selection horizontally in one row?

    Thank you!!!
    Katherine

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    Is it possible to create a field with the type Calender (like when you choose departure and arrival dates for your airplane tickets)?

    The contact form doesn’t offer a date-picker (calendar) option.

    Is it also possible to change the width of the field

    Yes, this is possible with custom CSS. If you need help with specifics, please provide a link to your form and let me know what you have in mind.

    place more than one field for selection horizontally in one row?

    Input fields are designed to each go on one line, but it’s usually possible to override that with some custom CSS. Again, show me what you’re trying to do and I can help with specifics. Thanks!

  • bookingmom · Member ·

    Hi!
    The contact form I’d like to modify is: http://bookingmom.com/book-or-ask-ru/. It’s in Russian, sorry :)))
    If date-picker option is unavailable, then I’d like to change the fourth line, which means “Departing/Returning on dates…” to the 2 blocks:
    First block of 3 checklist fields for the “Departing on…” date: Date, Month, Year and same second block of 3 fields for the “Returning on…” date.
    Thanks a lot!

  • kathrynwp · Staff ·

    Please go ahead and add all the fields you want and then we can look at tweaking the display. We’ll need to use the unique ID for those fields to generate the CSS, but we’ll only be able to get the IDs after the fields are added. Thanks!

  • designsimply · Member ·

    To help make sure your question gets at least a good starting point, I made a short video showing how to find and test some custom CSS to adjust the placement of form elements on the http://bookingmom.com/book-or-ask-ru/ page.

    Here is the video:
    https://cloudup.com/ccK-q-l2Ac5

    Here is the sample CSS:

    label[for="g2321-2"] {
  display: inline;
}

    You can apply other CSS besides display:inline to make the changes you need, but hopefully this example will help you get started.

    That type of selector with the [attribute=”value”] format is listed here if you’d like to take a closer look at all the different types of CSS selectors available to use:
    http://www.w3.org/TR/css3-selectors/#selectors

  • The topic ‘Adding calender to the Contact Form’ is closed to new replies.