[Kalista ZParticipant]

Hey guys, I know this is not your plugin, but hopefully you guys can help on this. I have two half columns setup on this page: http://pbpromos.com/contact/ I made the input fields long so that the can look good and be aligned on the right and the left by setting them within contact form 7

Specifically I have this in the contact form:

<div style=”float:left; width:100%;”>
<br />[text* your-name 60/ placeholder “Your Name (required)”] </p>
<br />[email* your-email 60/ placeholder “Your Email Address (required)”] </p>
<br />[text your-subject 60/ placeholder “Subject”] </p>
<br />[textarea your-message 58x placeholder “Message..”] </p>
<p align=”right”>[submit “Send”] &nbsp</p>
</div>

And again this code is in the second Half column within:

[column type=”one-half” last=”true”]
[custom_headline level=”h2″ looks_like=”h3″ accent=”true”]Drop us a Line[/custom_headline]
[contact-form-7 id=”1517″ title=”Contact Us”]
[/column]

When I try to go to different smaller screens or just taking the browser window and trying to scale the window down, I notice that the input fields do not get smaller, but they protrude out of the screen. I have set them to a length of 60 for esthetics to take up the full column width.

OR>>> Can I make it responsive using columns so that the right half having the contact page can jump down below the first column if the screen was squeezed so that the input fields do not extend outside the page?

Any ideas?

[Kalista ZParticipant]

EUREKA!

I put this code in Custom CSS and it works fine. CONTACT-Background was a class I created for the page so I can qualify the text fields in this page specifically.

.CONTACT-Background .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea {
position: relative;
max-width: 98%;
}

[KoryKeymaster]

Hey Kalista,

Thanks for writing back and we’re glad to know that everything is working for you now. 🙂

Thanks!

[Benjamin HParticipant]

I believe that I’m having a similar issue. I have each text input field set to be a specific size on this page, however they are all showing as full width. http://www.lvbaptist.org/bible-study-lesson-one/

Thank you!

[John EzraMember]

Hi Benjamin,

Thanks for writing in. Upon checking your site. I can’t see that your input fields have any specific size to them.

It shows they are set to 100% width.

.wpcf7 select, .wpcf7 textarea, .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="datetime"], .wpcf7 input[type="datetime-local"], .wpcf7 input[type="date"], .wpcf7 input[type="month"], .wpcf7 input[type="time"], .wpcf7 input[type="week"], .wpcf7 input[type="number"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="search"], .wpcf7 input[type="tel"], .wpcf7 input[type="color"] {
width: 100%;
}

Could you please share with us how your are adding the code so we can check if anythings is going wrong. Thanks.

[John EzraMember]

Hi Benjamin,

Thanks for writing in. Upon checking your site. I can’t see that your input fields have any specific size to them.

It shows they are set to 100% width.

.wpcf7 select, .wpcf7 textarea, .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="datetime"], .wpcf7 input[type="datetime-local"], .wpcf7 input[type="date"], .wpcf7 input[type="month"], .wpcf7 input[type="time"], .wpcf7 input[type="week"], .wpcf7 input[type="number"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="search"], .wpcf7 input[type="tel"], .wpcf7 input[type="color"] {
width: 100%;
}

Could you please share with us how your are adding the code so we can check if anythings is going wrong. Thanks.

[Benjamin HParticipant]

Thank you for looking into that for me. This is the Contact Form Shortcode that I put on the website, Titus 1:15 , “The conscience may be [text* text-titus1_15 12/12″D”] ”

It is supposed to allow 12 characters to be entered with a form width of 12 characters. This is the first form entry on that page…

[FriechModerator]

Hi there,

Thank you for writing in! to make the input field not taking up the full width of the page please
add this under Custom > CSS in the Customizer.

.wpcf7-form li {width: 30%;}

Hope it helps, Cheers

[Benjamin HParticipant]

Thank you, that does help, but isn’t there a way to specify the width per box? Some answers require a sentence and some only one short word.

Also, the boxes don’t need to be on a separate line, they should be inline with the rest of the text. It seems to start a new line whenever a text form box is added.

Thank you for your help!

[Nabeel AModerator]

Hi again,

You can give a unique class to each input field and then specify width individually for each input field e.g:

.custom-field-one {
width: 40%;
}

Hope this helps!

[Benjamin HParticipant]

How would I specify the the class for each individual input field and would each of those class codes (such as your code above) need to put in the customizer?

Do you suggest that contact form 7 is the best form program to use in WordPress?

Also, will this fix the issue of getting each form box inline with the rest of the text?

Thank you 🙂

[FriechModerator]

Hi Benjamin,

I see that your text fields are in unordered list tag (<ul>) that is the reason why they are on separate line. You could place the verses and the text field in one paragraph tag (<p>) like this

<p>Titus 1:15 , The conscience may be [text* your-name]</p>

On the input field creation there is an class option, but if you already created the field you could insert a code like this class:myclass next to the field name.

Hope it helps, Cheers!

[Benjamin HParticipant]

Thank you for your help! Right now the boxes will only stay at 30% if I have the

. Selecting <p> may make the the box to stay inline, but I can’t tell because the box fills the remainder of the available space on that line.

[ChristianModerator]

Hey Benjamin,

Please add myclass to one of your text input fields and add the code below in your Appearance > Customize > Custom > CSS

.my-class {
    width: 350px;
}

That’ll make your fields 350px in width.

Hope that helps. 🙂

[Benjamin HParticipant]

This is the phrase on which I tested the class (I called the class bible-study). This is the text that I entered into Contact Form 7:

Titus 1:15 , The conscience may be [text* text-titus1_15 12/12 class: bible-study “D”]

It still is putting the text field on a separate line and at full size, instead of 350 px. Adding the <p> tag doesn’t seem to help either. Any other ideas that we could try? 😀

[Author]

Posts