• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How can I make the search form in my navigation Bar work? Using Bootstrap 4

Community Beginner ,
Sep 12, 2023 Sep 12, 2023

Copy link to clipboard

Copied

Hello all,

 

I've made a website in Dreamweaver using Bootstrap 4 and it includes a navigation bar with a search button.

 

This is the code of the search button:

<form class="d-flex"> <input class="form-control me-2" type="text" placeholder="Search site"> <button class="btn btn-searcher" type="button">:magnifying_glass_tilted_left:</button> </form> </div></nav> <form class="form-inline my-2 my-xs-0 small-screen"></form>

 

I've tried to search internet on how to add data to my website for the search form, but I did not find a clear anwer.

I know how to add meta-tags to a page, but I don't think that's enough.

 

Can someone explain to me step-by-step how I should proceed?

 

Thank you!

p.s. Please let me know it you need more information.

Views

274

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 12, 2023 Sep 12, 2023

Copy link to clipboard

Copied

The forms in Bootstrap templates don't actually "do" anything, they're just the bare HTML and CSS of the front-end of a form. You'll need to connect them to a form processing script. 

Your hosting company may have a form processing script available to you, with the instructions to implement it. Contact them to see what, if anything is available for use. If they don't have a script, they should at least be able to point you in the right direction as to what you can use, based on what's installed on your server.

With a search box, you'll need to have a database driven site, or your search functionality is going to be very limited and clunky. Adding a Google Search bar may be an option for you

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 12, 2023 Sep 12, 2023

Copy link to clipboard

Copied

Hello Jon Fritz,

Can you tell me how a form processing script works? I use Dreamweaver CC.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 12, 2023 Sep 12, 2023

Copy link to clipboard

Copied

A form processing script resides on your server and takes information submitted to it from your form, processes it.

They can do all kinds of things, from sending emails, to uploading images, to spitting out search results.

They can also do absolutely nothing, if installed on a server that's not set up for them.

Dreamweaver can't create a form processing script for you, that you'll need either a fairly experienced programmer, a 3rd party script, or a third party app (like Google) that moves all the heavy lifting off your server.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 12, 2023 Sep 12, 2023

Copy link to clipboard

Copied

Looks as if it's nearly impossible for me to make my website searchable! Come on , there must be a way for me to fix this?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 12, 2023 Sep 12, 2023

Copy link to clipboard

Copied

as tell you @Jon Fritz first place to check is your web hotel, to see if they propose such form processing script.

then, in order to help you step by step, implementing a search engine on your site first requires a few points of clarification:

 

In short, as you can see, it's not possible to propose any ideas without clarifying what you want to put in place.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 12, 2023 Sep 12, 2023

Copy link to clipboard

Copied

I just want users to be able to search the site on names and terms used in the pages on the site, for instance "conference', "Great Expectations" etc  that might interest them, in the form of meta tags in the html-code. I'm striving to publish the site within three days, but I'm thinking to hide the search button for the time being, for I don't think I can accomplish this in such a short time.

Spell or syntax checker might be handy, but this is not my first priority. My site contains Dutch and English text, so I like to have a bilingual search.

Hopefully I've made my intentions a bit clearer.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 12, 2023 Sep 12, 2023

Copy link to clipboard

Copied

In the absense of a database driven site to search, you must use a 3rd party search engine.

 

The world's most popular search engine is Google.  Create an account and follow the steps on Google Developer's site.

https://programmablesearchengine.google.com/controlpanel/create

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 13, 2023 Sep 13, 2023

Copy link to clipboard

Copied

Hello Nancy,

 

I've got a Google account, I will chek it out.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 13, 2023 Sep 13, 2023

Copy link to clipboard

Copied

Hello Nancy,

I made my own search engine with an apdapted lay-out, and I tried it on a test page. However, it does not exactly look like Google showed it to me. I see a ugly 'clear-button' at the right side:

Scherm­afbeelding 2023-09-13 om 12.59.20.png

I really don't know why it looks that way or what I can do to fix this.

Well, I suppose I should ask Google.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 13, 2023 Sep 13, 2023

Copy link to clipboard

Copied

That looks like your browser's default form & button styles. 

To make it look pretty, you'll need to tweak the code with Bootstrap classes.

If you want more help, post a link to your online test page.

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 12, 2023 Sep 12, 2023

Copy link to clipboard

Copied

Get Google Search and add it to your Navbar search form.

https://developers.google.com/custom-search/docs/tutorial/implementingsearchbox

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 12, 2023 Sep 12, 2023

Copy link to clipboard

Copied

Please be reminded that Bootstrap 4 has reached its End of Life (EOL) on the 1st Jan 2023.

 

You should be using Bootstrap 5

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 27, 2023 Sep 27, 2023

Copy link to clipboard

Copied

LATEST

I will use Bootstrap 5. However, I made the last website with Bootstrap 4 and will keep it that way for now.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines