What would

What would be the best way I could create this look for my contact forms in wordpress?

The long narrow mutil-fieild options like this is what I am after.

I currently use Divi themes and Optmimize press 2.0 so a solution that would work for both of them would be great!

I like the hubspot landing pages etc.. they all have this similar feel

I sincerely appreciate any help given as I have searched for hours and hours trying to find something, anything to do this consistently with and the guy on fiverr wants 150.00 to tell me… needless to say, I declined to take him up on his offer…

  • Sajid
    • DEV MAN’s Sidekick

    Hello Wes,

    Hope you are doing good today :slight_smile:

    To create such form style the first thing you need to do is create a form with that fields using a plugin like Contact Form 7 or Gravity Forms.

    Since you are using Divi theme, then you can easily create that type of layout with two columns that will have more width on left and less on right side.

    Then add the contact form shortcode on right side and post the link of that page here. I will try to comeup with CSS code to make it look like that.

    Take care and have a nice day :slight_smile:

    Best Regards,

    Sajid

  • PTaubman
    • Recruit

    I agree – this is really an exercise in CSS. This should be easy to do if you are proficient with CSS. If not, contact someone on Fiverr – it should not cost you $150 – search for someone to do CSS work for you.

    If you get stuck, let me konw, Wes – I will check with guy and can get you a quote.

  • Flawless Website Design
    • Flash Drive

    Go with contact form 7.

    The process is simple, just time consuming for the css. Utilizing placeholders, removing the label tags, and inserting “label as first” for the dropdowns, custom margin and padding to make it all wrap together well.

    I pretty much recreated the entire form and tested it on a testing site.

    Screenshot: https://screenshot.net/e3mo1sn

    Here you go :wink: Here’s the contactform7 form

    <p> [text* first-name placeholder "First name"] </p>

    <p> [text* last-name placeholder "Last name"] </p>

    <p> [email* your-email placeholder "Email"] </p>

    <p> [text* company-name placeholder "Company Name"] </p>

    <p>[select* CompanySize first_as_label "Company Size (Select)" "1-10" "26-50" "51-100" "101-250" "501-1,000" "1,000-10,000"]
    </p>

    <p>[select* MonthlyEmailVolume first_as_label "Monthly Email Volume" "100k to 500k per month" "500k to 5 million per month" "5 million to 20 million per month" "20 million to 50 million per month"]</p>

    <p>[select* CurrentProvider first_as_label "Current Provider" "Adobe Campaign" "Bronto" "Experian" "InfusionSoft" "Maropost" "Postup" "Responsys"]

    <p>[checkbox SubscribeToEmail "Subscribe to the Maropost Weekly Newsletter. Get industry trends, strategies, and ideas to ignite your digital marketing."]</p>

    [submit "Send"]

    and the corresponding css

    .wpcf7 {
    background: #5b5f6a none repeat scroll 0 0;
    border-radius: 5px;
    color: #fff;
    padding:20px !important;}
    .wpcf7 input {
    width:100% !important;
    border-radius: 4px;
    color: #575c60;
    padding: 11px;
    margin: 5px 0;
    }

    .wpcf7-form p {
    padding-bottom: 0px !important; }

    select.wpcf7-select {
    background: #fff;
    height: 45px;
    padding-left: 10px;
    padding-right: 35px;
    width: 100%;
    border-radius: 4px;
    margin: 5px 0;
    }

    .wpcf7-submit {
    background: #00aeff none repeat scroll 0 0;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.6px !important;
    line-height: 45px;
    margin: 0;
    padding: 0 22px !important;
    text-align: center;
    text-decoration: none !important;
    transition: all .2s ease-in-out 0;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
    text-transform: uppercase;
    -webkit-appearance: none;
    }
    .wpcf7-checkbox input {
    width: initial !important;
    }
    .wpcf7-checkbox .wpcf7-list-item {
    margin:0px;
    }

  • Wes
    • Flash Drive

    I’m so sorry for having to ask, but I’m having trouble getting it to send me the actual input fields info

    I cannot figure out how to replace the tags in the message box so it will populate their input and send it. All I receive is the default message with no inputs except their email is correct

    This is what I received when I submitted my info into the form: (http://perfect2020.com/lp/)

    From: [your-name] <wes@wesleyharrison.com>

    Subject: [your-subject]

    Message Body:

    [your-message]

    This e-mail was sent from a contact form on Best Cataract Surgeon in Kansas City (http://perfect2020.com/lp)

    ============

    I tried all combinations I could think of to replace the elements in the message box but could not get it to work – I searched youtube and could not find anything either. Sorry for the bother.

    I would be appreciative if you could point me in the right direction.

    Thank you

  • Wes
    • Flash Drive

    I found my error after I walked away – I was adding in the word placeholder. Working fantastic !!

    (this is what is now in the ‘message body’ – in the ‘mail’ tab section)

    ==============

    From: [first-name] [last-name]

    Contact Email: [your-email]

    Contact Company: [company-name]

    Company Size: [CompanySize]

    Monthly Email Volume: [MonthlyEmailVolume]

    Current Provider: [CurrentProvider]

    Subscribe to NL: [SubscribeToEmail]

    This e-mail was sent from LP-1 (http://perfect2020.com/lp)

  • Sajid
    • DEV MAN’s Sidekick

    Hello Wes,

    Hope you are doing good :slight_smile:

    I am glad to know you have figured it out. In case you still need help regarding setting up contact form 7 then do checkout its official documentation here:

    http://contactform7.com/getting-started-with-contact-form-7/

    http://contactform7.com/best-practice-to-set-up-mail/

    Of course, you can open support ticket any time, if you need help by support staff.

    Bet Regards,

    Sajid

  • Wes
    • Flash Drive

    @ FlawlessWebDesign: Thanks to your help, I can now create exactly what I was after: How do I buy you a cup of coffee?

    Below is the result and is exactly what I was after – but more importantly, with your helping guidance, now I have the knowledge and ability to create any version of this that I want.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.