Setting Text box length

Hey will2016,

Yes it is possible.

Regards,
Lehel

Hello, Lehel,

Thanks for the tease, lol.

OK now that I know it is possible, allow me to introduce myself and my problem.

I work for a small company. Tight budget.

It has fallen on me to develop an order form in word press, with plugin and all the other programs that WP works with.

I am new to All of it.

I watched the front page video, but it dealt mostly with preset templates. I need to build a custom one. All the samples I saw had one field per line. When I tried it in the CF7 Style edit page all the commands appeared to be global, changing all field of the same type at once to specified sizes, fonts, etc.

I’m just looking for a way to learn this, to do this, and I don’t know enough yet to accomplish that.

If someone could point me in a direction to where I could learn how to do this, I’d be somewhere that I am not now, which is no where, and I would be very grateful.

Thanks.

Nice to meet you. ??

OK I have this one partially solved.

If you insert a “size” command into the short code, it will work for text fields. For example:

<label>[text your-name size:35 placeholder "City"]</label><label> [text your-name size:2 placeholder "State"]</label><label> [text your-name size:4 placeholder "Zip"]</label>

The only change I had to make was inserting “size:35”, where ’35’ can be substituted with whatever size number you are looking for. As you can see the State is only 2.
This will layout the boxes on one horizontal line with no problem as long as you stay within the max size limit.

However, this does not work with ‘textarea’ boxes, only ‘text’ boxes.

I would like to alter the size of textarea boxes as well, but I have read that the value will reset to 40 upon an update of the plugin.

If anyone knows a trick to customize the size of textarea boxes, please share. ??

Thanks

• This reply was modified 7 years, 9 months ago by will2016.

Greetings Will2016,

As I can see in your example, you are using label elements as containers for the shortcodes in Contact Form 7 setup.

Can you share the whole structure of your form? Maybe screenshot it? It is very important for us to see the structure, so we can suggest a solution for arranging the elements in a horizontal layout.

For textareas you have to define the columns and rows too. If you do not, it will reset to default value.

To achieve this please use as in the example below:

[textarea your-message 40x10 "your message here ..."]

Where “40” is the number of columns and “10” represents the rows used in the textarea.
You can read more about setting up fields here: https://contactform7.com/text-fields/

Best Regards,
Lehel

Hello Lehel,

Thank you so much for that code solution on textarea. It worked great.

Before I post anything I have to ask for permission. At present it is a non published site, set to be released soon. I will ask this coming week at the meeting.

Also that link you gave helped a lot as well. I was not aware of the telephone tag.

So now I need to change the font color of the placeholder text as it is hard to read. I am assuming if I want to use custom colors I can do that within the brackets in the same way as the text box sizing, is that correct?

I still have a lot to learn, but I am starting to understand it better.

Thank you again.

EDIT:

After additional reading it appears the “placeholder” font cannot be altered, at least according to W3.org. Plus, it seems like placeholder might not be recognized by older browsers such as windows 9 and FF 3.6, so I better play it safe and use labels for the input titles.

Hey Will,

You can use placeholders nowadays. Modern browsers do accept this property, because it’s part of HTML5. FF3.6 is a very old browser.

If you want accurate answer to your question, please take a look at this link:
https://caniuse.com/#feat=css-placeholder where you will see that it can be used on 93.9% of the browsers, which is pretty good.

You have to style the placeholder elements like this:

.cf7-style input::-webkit-input-placeholder,
.cf7-style textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
  opacity: 1;
}
.cf7-style input::-moz-placeholder,
.cf7-style textarea::-moz-placeholder { /* Firefox 19+ */
  color: pink;
  opacity: 1;
}
.cf7-style input:-ms-input-placeholder,
.cf7-style textarea:-ms-input-placeholder { /* IE 10+ */
  color: pink;
  opacity: 1;
}
.cf7-style input:-moz-placeholder,
.cf7-style textarea:-moz-placeholder { /* Firefox 18- */
  color: pink;
  opacity: 1;
}

You can read more about this on the https://css-tricks.com/almanac/selectors/p/placeholder/ website.

If you enjoy our work, please feel free to give us a five star rating or consider donating.

Best Regards,
Lehel

Hello Lehel,

Again, Thank you for the help, the links, and the feedback. I am just now starting to learn CSS and realized how important it is to implement when I downloaded CF7 and CF7 Style. I’m honestly not sure where to put that code you added above. Should it be in the folder cf7/includes/css/styles.css? or styles-rtl.css, in one of the files in the cf7s folder, or use the dashboard plugin interface?

That’s the part I’m struggling with now, where to put stuff with so many options to choose from for specialty or custom code.

And yeah I’ll be rating this 5 star. Everything works very well.

Greetings Will2016,

You can add the code snippet I’ve added above in our CSS editor, which should look like this: https://s.w.org/plugins/contact-form-7-style/screenshot-6.jpg?r=1605027

Thank you for the compliments.

Have a great day,
Lehel

Hello Lehel,

I was wondering – does this style plugin work with other form plugins, such as fast secure contact form?

The reason I am asking is I have run into a problem with contact form 7. It won’t submit the form.

I have developed a rather complex form layout (compared to the CF7 default form), and the submit button did not respond to a click to submit to CFDB.

I checked all the code and there were no obvious issues, so I went back and created a new form based on the very simple default form that cf7 comes with. That submit button did respond to a click, however it just kept spinning and spinning and never submitted. I read up on this issue, and there were multiple other people who had the same problem, with no clear solution I could do. It isn’t CFDB, as that works with FSCF with no issues.

I am under a tight deadline to get this finished, and I don’t have the chops to debug something that does not generate error messages. It simply does not respond onclick, and from what I’ve observed on the CF7 forum, the developer is not as responsive as you are certainly, and most of the questions there go unanswered.

If a revision for cf7 is issued that addresses this or at least if the problem is acknowledged with a path to a solution I would consider using it again, but for now I need to generate results in a short period of time.

from the sound of it the problem may lie with the browser and how it deals with the data submission, but I could not find any solution, nor is there anyone for me to ask.

I was able to submit form data from FSCF to CFDB on the first try so I have to go with that for now, although I find the CF7/CF7 Style interfaces more user friendly, my boss wants results yesterday.

Thanks once again for all your help. I hope you can expand your style plugin to work with other form plug ins. ??