Support » Developing with WordPress » Creating Search Form

  • Hello,
    I am not developer but I am trying to make a form ad its not working fine. I want that I give the options to select and then user click on it after there will be page open.

    I created pages;

    www.site.com/city/new-york
    www.site.com/city/los-angeles
    www.site.com/city/texas

    And here is the form:

    <form action="www.site.com/city/" method="get">
    <fieldset>
    <select style="height:30px;">
    <option value="">Select City</option>
    <option value="">--All Cities--</option>
    <option value="" style="color:#CCC">-----------------------</option>
    <option value="new-york">New York</option>
    <option value="los-angeles">Los Angeles</option>
    <option value="texas">Texas</option>
        <input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" />
    </fieldset>
    </form>

    How I can make that user select city and page open which I mentioned above. If user select TEXAS then page will open http://www.site.com/city/texas

Viewing 2 replies - 1 through 2 (of 2 total)
  • What you’re looking for is not a search form. It’s called a “jump menu”.

    For a start it requires some HTML coding (which yu’ve got set up already), it doesn’t need the form wrapped around the select element, and it needs JavaScript to do the actual work.

    As a very quick search, this is the first item that i found:

    http://www.javascriptkit.com/javatutors/dombos4.shtml

    Moderator bcworkz

    (@bcworkz)

    JavaScript is the tried and true way to make jump menus. In modern browsers, the same sort of effect can be accomplished with plain HTML and CSS. Typically the links are organized in an unordered list (ul and li tags). It’s essentially a single nav menu item with a number of sub-menu items. You can actually create such a thing using the WP menu interface, but your theme likely needs to be modified to implement an additional menu.

    There’s no need to use the menu interface though, create the HTML list and add the CSS to the Additional CSS panel of the customizer. For examples of appropriate CSS, do a general search for “CSS drop down menu” or something similar.

    The JavaScript approach is still a reasonable approach, but if you’re not familiar with JavaScript, it adds another mysterious element to deal with. It does allow you to do some things that would be difficult with CSS alone.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Creating Search Form’ is closed to new replies.