adding a dropdown menu in form

[owenpga2]

I need some help adding a few dropdown menus to the form (code)below.

i managed to create a form in my other website - Golf Lesson Form for Owen Dawson Golf Instuction although i don't like the overall look of it.

i think the coding is different than below.

i'd like to have the form look similar to this  Business Contact - Harford County, Baltimore MD family photographer Jen Snyder

any help would be great. thank you

owen

<form action="https://mobirise.com/" method="post" data-form-title="CONTACT FORM">

                        <input type="hidden" value="k6SCWAPQpKTCR3dXaQWVGcUy3cf8+GuSiwPmA8kodnQ+mF9GnPQiW7TPT8CgDPUm/irzDbMANtqIXCQO44ibk/smX4BUKpREMrnFgHM3Xmdi1Tz+5xTnCCskLNfTwvhA" data-form-email="true">

                        <div class="row row-sm-offset">

                            <div class="col-xs-12 col-md-4">

                                <div class="form-group">

                                    <label class="form-control-label" for="form1-q-name">Name<span class="form-asterisk">*</span></label>

                                    <input type="text" class="form-control" name="name" required="" data-form-field="Name" id="form1-q-name">

                                </div>

                            </div>

                            <div class="col-xs-12 col-md-4">

                                <div class="form-group">

                                    <label class="form-control-label" for="form1-q-email">Email<span class="form-asterisk">*</span></label>

                                    <input type="email" class="form-control" name="email" required="" data-form-field="Email" id="form1-q-email">

                                </div>

                            </div>

                            <div class="col-xs-12 col-md-4">

                                <div class="form-group">

                                    <label class="form-control-label" for="form1-q-phone">Phone</label>

                                    <input type="tel" class="form-control" name="phone" data-form-field="Phone" id="form1-q-phone">

                                </div>

                            </div>

                        </div>

                        <div class="form-group">

                            <label class="form-control-label" for="form1-q-message">Message</label>

                            <textarea class="form-control" name="message" rows="7" data-form-field="Message" id="form1-q-message"></textarea>

                        </div>

                        <div><button type="submit" class="btn btn-primary">CONTACT US</button></div>

                    </form>

[BenPleysier]

The Jen Snyder site uses the Bootstrap framwework. If you have a look at http://getbootstrap.com/css/#forms you will see some examples.

Problem is, for you to use Bootstrap and ditch Spry is going to be a huge step. I could give you some pointers to start using Bootstrap, but you need to be comfortable with the change.

You could also have a look at some of these examples https://medium.com/swlh/creative-form-input-field-design-examples-bfe5dd50808a

[owenpga2]

thanks Ben

so  is there a way i could copy an paste a drop-down section of the coding from some source and paste it into the code i attached in the first post and change the wording for but not functionality? i'm guessing not? this code is from mobirise which is a drag and drop interface with no need for dreamweaver, although i would use DW to alter the code on the back end if  possible. thanks

owen

[owenpga2]

or......is there a way just to add a dropdown menu to the code i attached in the first post? it doesn't have to look exactly like the link i provided it just has to have the dropdown functionality with options to be able to click on . thanks for you help

[BenPleysier · Accepted solution]

I think that the easiest way is to add bootstrap.css to your document and giving each input a class of form-control.

For the Bootstrap bit, add the following line just above the end head tag like

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

Adding the class will look like

<select name="handicap" class="textfield form-control" id="handicap">

and

<input name="customername" type="Customername" class="textfield form-control" id="customername" />

[Rob Hecker2]

is there a way just to add a dropdown menu to the code i attached in the  first post? it doesn't have to look exactly like the link i provided it  just has to have the dropdown functionality with options to be able to  click on

<p>What's the most peace-loving species? <select name='species'>
    <option value='Chimpanzee'    > Chimpanzee</option>
    <option value='Human'>Human</option>
    <option value='Bonobo'>Bonobo</option>
    <option value='Grizzly Bear'>Grizzly Bear</option>
</select></p>

Note that this is called a "select" element. A dropdown menu is something else.