Text is too small on Forms when used on phone

[Angler]

Hi,
I've had a look through posts etc but couldn't see a fix.

The input text onto my forms look ok on pc's and laptops but are unreadable on mobiles.
Most of the text input is ok (i.e. contact details at top of page)
Moving down the form the text gets smaller i.e.

Description input = small
Other Information input = even smaller

At the bottom of form, Name of person completing form and Please enter the word input are too small to read.
Can anyone help please.

https://www.fish-uk.com/advert_form_fishing_tackle.htm

[Angler]

Sorry this is example form page

https://www.fish-uk.com/advert_form_fishing_tackle.htm

[Pablo]

The font size can be set per breakpoint.
It looks like you have used a different font size for the mobile breakpoint.

To solve this, go the breakpoints and update the font size.
Or in the property inspector select 'reset property' or 'reset all properties'
https://www.wysiwygwebbuilder.com/rwd_tools.html

[Angler]

Hi Pablo, Thanks for your reply.
How do I, go to the breakpoints and update the font size
and where is the property inspector?

Thanks

[Pablo]

- switch to the breakpoints, via the breakpoint toolbar or page menu
- update the font size in the properties of the input field.

The property inspector is normally in the bottom right corner.
https://www.wysiwygwebbuilder.com/introduction.html

[Angler]

Hi Pablo , In the link below you will see an image of page builder. I don't see the property inspector anywhere. I have one breakpoint and I can see nowhere to alter font size or anything else.

https://www.fish-uk.com/test.htm

[crispy68]

It's the right bottom window that says "Properties"

[Angler]

Hi Crispy, I have looked at Properties. I clicked the spanner then on the box that popped up I clicked Style at the top, I see that Font family is Arial, Size is 10 Enable Responsive Fonts is Unchecked.

[BaconFries]

See the following tutorial on "Responsive Text" How to create Responsive Text?

[Pablo]

You wrote:

At the bottom of form, Name of person completing form and Please enter the word input are too small to read.

An editbox does not have a ' Enable Responsive Fonts' property, so I think you are looking at the wrong properties.
You will have to adjust the font of the editbox, not of a text object.

[Angler]

Thanks BaconFries
I had a look at tutorial but I don't think I need text to be responsive as I have it set at 10 so should be ok on default and 320 breakpoint pages, I would have thought. (I haven't got a responsive text icon as shown on link page, this must be later edition builder than mine).

Thanks Pablo
I'm lost with this. I've checked properties for Editbox 33 and 34 (person completing form etc) and the text is set at 10 for both. please see
https://www.fish-uk.com/test.htm

[Pablo]

If you need further assistance then please share a DEMO project. I cannot see what you have done based on the published HTML.

See also the forum rules:
viewtopic.php?f=10&t=82134

[Angler]

Hi Pablo, Thanks. I think it's sorted. I rebuilt the forms and checked all fonts were correct and it looks ok. Only problem I have is, when form has been sent the Formmail default return page is unreadable. Anyone know how I can sort this? I was told to add this code to my form pages, (change URLs to mine)
<input type="hidden" name="good_url" value="http://yoursite.com/thanks.htm" />
<input type="hidden" name="bad_url" value="http://yoursite.com/error.htm" />
I don't know where though, tried a few places but no good.
Thanks

[Pablo]

If you use the built-in script then you can set the error and success page in the properties of the form. There is no need to manually add code.

[wwonderfull]

<input type="hidden" name="good_url" value="http://yoursite.com/thanks.htm" />
<input type="hidden" name="bad_url" value="http://yoursite.com/error.htm" />
I don't know where though, tried a few places but no good.

Instead of htm set the page extension to HTML (Suggestion)

[Angler]

Thanks Pablo,
I used the built-in script for the forms and linked them to Formmail file in cgi-bin . I'll have a look into it again.

I need to figure out how to change the Formmail default return page to a page on my site. I can then set the font size etc.

Thanks to all who helped with these problems. Appreciated.
Thank you

[Pablo]

I am not familiar with Formmail cgi-bin, so I cannot help you with that.
But in WWB you can add hidden fields via the 'Hidden Fields' properties of the form.

[BaconFries]

Why have you added the following form code to the HTM! of the software? it doesn't make sense and it is also not required!!
Not to sound rude but who is telling you this? You can already add these fields and the submit button to your form made with the software. Adding code that you don't understand only complicates things and makes it harder to help you with any issues you might run into.

Code: Select all

<div id="Html1" style="position:absolute;left:450px;top:20px;width:300px;height:30px;z-index:101">
<form action="https://www.fish-uk.com/search_results.htm" id="cse-search-box" style="word-spacing: 0; margin: 0">
        <div style="width: 277; height: 24">
          <input type="hidden" name="cx" value="017908923303095653805:qjcw-b0uvdw">
          <input type="hidden" name="cof" value="FORID:9">
          <input type="hidden" name="ie" value="UTF-8">
          <p style="margin-top: 0; margin-bottom: 0">
          <input type="text" name="q" size="23" style="border: 1px solid #C0C0C0">
          <input type="submit" name="sa" value="Search Fish-uk" style="word-spacing: 0; border: 1px solid #C0C0C0; margin: 0"></div>
      </form></div>

[BaconFries]

@wwonderfull Why? they are both the same apart from 1 letter there will also be no issue(s) it is all down to user preference. Once apon a time it might have caused issue but modern operating system can handle 4 letter words extensions where older systems couldn't.

Instead of htm set the page extension to HTML (Suggestion)

[wwonderfull]

@BaconFries

There are a few reasons as for this suggestion.

Compatibility: ".html" is the standard and widely accepted file extension for HTML (Hypertext Markup Language) documents. Most web servers and web browsers are configured to handle ".html" files by default. Using ".htm" may lead to compatibility issues with some servers and browsers that do not recognize this extension.

Convention: ".html" follows the naming convention established by the World Wide Web Consortium (W3C), the organization responsible for developing web standards. Adhering to established conventions makes your code more accessible and understandable to other developers and web designers.

SEO (Search Engine Optimization): Search engines, like Google, tend to favor URLs with ".html" extensions over ".htm." While the file extension alone may not significantly impact SEO rankings, using ".html" can be seen as a best practice and may indirectly contribute to better search engine visibility.

User Expectations: Many internet users are accustomed to seeing ".html" in URLs, and it has become a part of web browsing culture. Using ".html" makes your URLs more user-friendly and familiar, enhancing the overall user experience.

Future-Proofing: Web standards and technologies evolve over time. While ".htm" may work today, using ".html" ensures your web pages will remain compatible with future web technologies and standards, reducing the risk of having to update or migrate your URLs later.

Consistency: Consistency in file extensions across your website simplifies management and maintenance. Using ".html" throughout your site ensures uniformity and makes it easier to keep track of your web pages.

Improved Debugging: Some web development tools and IDEs (Integrated Development Environments) may offer better support and syntax highlighting for ".html" files. This can aid in the development and debugging process.