Contact Page Form

[rmcgroup]

Does anyone know how to make a form with fields within sentences like the one pictured below?

[Prasant]

Hello @rmcgroup,

Thanks for asking.

You can use Contact form 7 plugin to create a form as shown in screenshot. You need to place elements shortcodes accordingly in between texts. After that you need to place section background to mimic the look and feel and then using text element, place Contact Form 7 plugin to display form.

Thanks.

[rmcgroup]

Thank you.

I created a form but it’s putting the form field underneath the text. I want it side by side, in a sentence structure like the screenshot originally provided…

Instead, it looks like this:

[Prasant]

Hello @rmcgroup,

Thanks for updating thread.

Please share website URL so we can share the exact CSS code.

Thanks.

[rmcgroup]

www.naplesinsurancegroup.com/contact/

[mldarshana]

Hi there,

Thanks for writing in! Could you please try adding the following CSS rules into your Theme Options > Global CSS area or your page CSS area.

.wpcf7-form label {
    width: 50%;
    float: left;
}
.wpcf7-form .wpcf7-form-control-wrap {
    float: right;
}

Hope that helps.

[rmcgroup]

Thanks for the instructions. Here is how my page is looking now.

Is there any way to stagger the fields so the form fields sit flush against the label, like my original example photo?

Also…

• how do I change the color of the field to a darker blue?
• how do I change the color of the font in the form field to white?
• how do I get rid of the border inside each of the fields?
• how do I increase the size of the font inside the fields to match whatever font size elect for the label?

Thank you again!

[nabeel]

Hi again,

You can remove the custom CSS provided above and restructure your HTML like this:

<p>
    <label style="display: inline-block; float: none; width: auto;"> Hello! My name is </label> 
    <span style="display: inline-block" class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> 

</p>

The result will be like this:

You can do this for all of your fields.

For the rest of your queries, please make use of the following code:

.wpcf7-form-control {
    background: #1a92cc !important;
    color: #fff !important;
    border: none !important;
    font-size: 20px !important;
}
.wpcf7-form-control::placeholder {
    color: #fff !important;
}

Hope this helps!

[rmcgroup]

It’s looking a LOT better, thank you! A few more questions… first, here’s the form as it looks right now: www.naplesinsurancegrop.com/contact

1. How do I create a drop-down within one of the fields? The part that says… “and I want to discuss >> Select” When you click Select, I’d like it to give drop-down options “Personal Insurance, Business Insurance, Life Insurance, Captives, Pension Plans” and also add a few more…

2. Do I have the fields coded correctly to actually pass the info being collected along as 1 form?

3. Can I somehow control the height of the fields instead of just the length?

4. How do I create a larger field for the text area under “Here’s my message”? more rows in the text area would be great.

5. Is it possible to put the part that says “Here’s my message:” on a second screen after clicking a “Next” button?

Thanks again!

[jade]

Hi there,

I tried checking the page that you have linked but this is what I am seeing:

Would you mind double checking if it is the correct link so that we can check it?

Thank you.

[rmcgroup]

www.naplesinsurancegroup.com/contact

I noticed the form I created does not actually tie to anything… meaning, when you fill out the fields and click submit it doesn’t relay the info anywhere. All I have created are unlinked form fields that aren’t tied to a Contact Form 7 form… if you could, please help me figure out how to tie these together.

Of course, I also have unanswered questions posted above as well in my last 2 comments.

Thanks again for all your help!

[christopher]

Hi there,

1. To add a select you need to add it to the Contact form 7 as mentioned below:

https://contactform7.com/checkboxes-radio-buttons-and-menus/ (Read the SELECT section)

2. I see no fields at the moment and it shows only labels. So no you did not add the fields correctly. I suggest that you read more about the COntact Form 7 here:

Docs

3. It is possible using the height property of the field in CSS. You will need to have the actual fields in place so that we suggest the proper CSS to control the height of the fields.

4. You will need to add a Text Area in the Contact Form 7. For more information:

Text Fields

5. Contact Form 7 does not support such a functionality. But you can consider using 3rd party plugins such as https://wordpress.org/plugins/contact-form-7-multi-step-module/

The 3rd plugin above is not an official recommendation from us and is an extra step to be helpful, you will need to use that plugin at your risk.

Regarding the last question, it seems that you need to read more about the Contact Form 7. It has all the options available to send the result of the form as an email. Please read the documentation for details and specifically this section:

Setting up mail

Thank you.

[rmcgroup]

Ok, two more questions -

How do I change the size of the font for the dropdown text? It doesn’t seem to be changing with the rest of the field text sizes…

Also, how do I change the button info:

1. Remove the background color
2. Change the background hover color
3. Add a white border
4. Increase the font size
5. Change the font color
6. Add an arrow icon after the button text “Leave a message >”

[Joao]

Hi There,

You can add the following code to Theme Options CSS

 [type="submit"]{
  
       border: 2px solid white !important;
        background: none !important;
        text-shadow: none;
        font-size: 30px !important;
    }

To ajust the hovering effect you can add the following code and change the settings according to your needs:

 [type="submit"]:hover {
 
    border: 2px solid white !important;
    background: none !important;
    text-shadow: none;
    font-size: 30px !important;
}

To add an icon you can edit your contact form and add beside the button text:

<i class="x-icon x-icon-chevron-right" data-x-icon="" aria-hidden="true"></i>

Further customizations will fall out of the scope or out support.

Thanks for understading.

[rmcgroup]

Awesome! Thank you, I’ll try.

How about editing the color of the notification down below after you submit the form? I want to change the background color, font size and font color.

Thank you again!

[rmcgroup]

@Joao

<i class=“x-icon x-icon-chevron-right” data-x-icon=“” aria-hidden=“true”></i>

For the icon, I was hoping to include it WITHIN the button, instead of outside of it. Do I need to do this with another CSS element?

Thank you.

[nabeel]

Hey there,

You can replace your button code with the following code to include icon inside the button:

<button type="submit" class="wpcf7-form-control wpcf7-submit" style="outline: none;"><i class="x-icon x-icon-chevron-right" data-x-icon="" aria-hidden="true"></i> Leave a Message</button>

To change the notification colors, make use of the following CSS code:

.wpcf7-response-output {
    border-left: 5px solid #4a6ab4 !important;
    color: #ffffff !important;
    background-color: #5b9adb !important;
}

Hope this helps!