Layout and ReCaptcha Display

Hi Bob,

I'm developing a contact form for a website I have parked here and I need assistance with:

I want to add a line of text to the top of the form that says "Please complete this form.. etc, etc." Since I'm putting the form in a module, I have to do it on the form itself and I don't see the option to add text in CF5. Where should I look?

How can I adjust the width of the fields so I can make the dropdown move up the right of "Type of injury"

The Recaptcha doesn't appear to be displaying correctly

Thanks for your help!

Jose

Hi Jose,

You can use a Custom element from the Advanced group in the Designer tab to add text - or any HTML.

Some CSS like this will make the select narrower

#fin-injury select {
max-width: 190px;
}

or you can make the text shorter.

The problem with ReCaptcha appears to be coming from a bootstrap.css file loaded by your template but it's hard to be sure.

Bob

Hi Bob, thanks for the prompt reply.

I used a custom element for the into text. Perfect!

The code you gave me didn't work (I added it to the style field, maybe I put it in the wrong place??), but I used your suggestion of shortening the words, which snapped the field back up. -- I would still like to learn how to manipulate the fields' width thought. So, I'd appreciate clarification on what I did wrong with the CSS.

I did a search for bootstrap.css and there are not files called that. The closest I found was bootlist.css. Could it be it? -- Also, I work with RocketTheme templates, which can run a custom.css file for editing styles. I'm using one, but it's not for this module position. The file is located at: /templates/rt_plethora/css/rt_plethora-custom.css in case you want to take a look at it. Finally, I have the module position where the form is styles (via suffix style) with: box3 nomarginall. I removed the styling to make sure it wasn't that and the ReCaptcha still looks the same.

Thanks for your help!

Jose

Jose

Jose

Hi Bob, the website went live today. It's now located here.

I appreciate your help!

Hi Bob,

I posted the question on the RocketTheme forums and got the answer. Here it is:

It's caused by bootstrap styling....

Use this code in a custom CSS file...

div.recaptcha_input_area input {
height: auto;
}

Best,

Jose