Tel field in Bootstrap responsive website design

  • Resolved Candlelite

    (@candlelite)


    7 years, 11 months ago

    Hi I am using Cf7 in a Bootstrap design website with the additional plugin Bootstrap for Contact Form 7. When I adjust the screen size all fields adapt to the changing screen size except the tel field. Is this a bug?

    Here is part of the code

    <div class="row">
		<div class="col-sm-6" style="padding: 5px;">
			[tel* phone-num minlength:11 placeholder "*Enter Phone Number"][/tel*]
		</div>
		<div class="col-sm-6" style="padding: 5px;">
			[email* email placeholder "*Enter Email Address"][/email*]
		</div>
	</div>
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    It is a theme issue. Contact the theme author and ask for a fix.

    Relevant FAQ > Why does my email address input field look different than other text input fields?

    Thread Starter Candlelite

    (@candlelite)

    Many thanks for your fast response Takayuki. The theme has been created using Template Toaster – I will ask them for a fix. I have another non bootstrap responsive website where the tel field does adapt to screen size. This is part of the code:

    <div style="float:left; width: 100%; margin-bottom: 10px;">[tel* phone-num minlength:11 placeholder "*Phone Number"]</div>

    Clearly the problem is related to the bootstrap framework.

    Thread Starter Candlelite

    (@candlelite)

    Hi Takayuki I went back to Template Toaster and they supplied a small css change:

    input[type="tel"] 
{
width:100%;
}

    and this solved the problem however the field is a different shape compared to the other fields (now square with outline). What is worse is that field input error reporting no longer works. I reinstalled version 4.5.1 (with WordPress 4.7) and I do not have any of these problems with the template – i.e. tel field is adaptive and field input error works.
    Do you still feel this is a template problem or an issue with your update to 4.6?

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    You just confirmed it was a template problem, and I trust you.

    Thread Starter Candlelite

    (@candlelite)

    I have contacted Template Toaster and they say they will fix this problem in their next build. However anyone using templates created using their software should NOT update your plugin to 4.6 – version 4.5.1 works with the current build of Template Toaster (version 6.0.0.10477). Best regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Tel field in Bootstrap responsive website design’ is closed to new replies.