The お名前 (onamae) field is for your name as written in Japanese normally, and it should take any of kanji, hiragana, or katakana as appropriate so long as it is 全角 (full width) and the programmer didn't screw up.
The フリガナ (furigana) field is to indicate how the name given above is read, because kanji can have many readings including completely arbitrary ones. This also serves to indicate how computers should index and sort the names when storing and processing them, so it's still applicable even if the name is all hiragana or katakana and immediately obvious.
Furigana is also used to indicate how to read kanji in ordinary text, oftentimes when dealing with rare kanji or special readings, when the text must be comprehensible by everyone (eg: emergency bulletins), or when the text is written for people learning Japanese (eg: school textbooks).
Furigana is usually written using hiragana, so the reason 全角カタカナ (full width katakana) is specified instead of just full width is to inform the form's filer that he shouldn't write hiragana like he otherwise probably would.
That's one part but another is names that use kyuujitai (pre-simplified kanji forms) or names that use unusual readings because if you're named after your father's (father's father's....) name then the pronunciation of your name might not have evolved the same way the reading of the kanji has in actual words. Also regional uses that get replaced by standardised uses in words but not names. Or someone just made it up generations ago and it caught on. Or your ancestor didn't know how to write and just picked a kanji they thought was right.
Even in English this happens, look at all the variations of Robert (Rob, Bob, Robb, Robbie, Bobbie, ...) or similar names.
How do everyday Japanese deal with the problem? Do they have the furigana on their business cards? (or the katakana reading)
I'm thinking.. I've only ever seen someone's name, will I make serious faux pas if I mispronounce it with the regular reading when I meet them?
(this is less pronounced in English because most of the time you can tell how to pronounce it by reading it. My last name suffers from the fact there is multiple possible pronunciations, so whenever I meet someone who has never heard my name they always stumble and look at me for help)
In person, if they think you'll have to write their name: "My name is XYZ, that uses the kanji for A and B"
As for business cards, yes, if they have some non-obvious reading they will have kana or romaji there somewhere. (Usage of romaji on business cards is wider than you might expect, since it's seen as kind of the equivalent of a modern sans-serif logo for a business in some circles)
On the first example -- what is the significance of the character which is a circle within a circle? I'm assuming it's some sort of graphic or punctuation, rather than a kanji...?
It's just a graphical divider/bullet that the designer of this specific business card chose to use.
The heading of that corner is just the pronounication of "m-take design" written out in katakana. The first line under the heading talks about the type of products the person works on (direct mail, leaflets, pamphlets). The second line talks about their specialities, as in the industries they focus on (cosmetics, health food), and then the last mentions they'll also do logo design, homepage design etc. I guess they wanted to emphasize the second line.
You'll sometimes see kanji-sized single circles used in Japan to indicate omitted characters (and you might see them on business card _templates_ as a sort of lorem ipsum, but unlikely on actual business cards), but this double circle doesn't have any specific meaning as far as I know.
many websites in Japan has two name field: one is kanji, another is katakana.
https://shinkabukiza.pia.jp/membmng/RegisterNormalAction.do
Take this for example, the field in first row is full-width kanji, second one is full-width katakana.