Inline “Submit” button

  • Hello!

    I’ve been searching for and trying various code suggestions to get my Contact Form 7 “SUBSCRIBE” button inline with the “Email address*” textbox in the site footer, but have not had luck. What code should I be using to accomplish this?

    Part of me thinks I need to reduce the size of the Email textbox as when I view the page on a smaller screen, the email textbox and submit button are inline without spaces. Thoughts?

    To see the site:
    user: walnut
    pass: grove2!

    Thank you for your help!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    I need to reduce the size of the Email textbox

    Right. Try adding this style rule:

    .wpcf7 input[type="email"] {
  width: 60%;
}
    Thread Starter bhaugen

    (@bhaugen)

    Thank you for your response, Takayuki!

    This may be a silly question, but where do I add that style rule? I tried adding it to the Form itself, to the Additional Settings in CF7 plugin, and in the CSS of the theme with no luck.

    This is what my form currently looks like:
    [email* your-email placeholder “Email address*”][submit “SUBSCRIBE”]

    Thank you!

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    See Styling contact form

    Thread Starter bhaugen

    (@bhaugen)

    Hello!

    I’ve been editing the Feedback Form on the site and that is causing me some issues with the edited “SUBSCRIBE” form in the footer that was modified in this forum. I’ve been reading the Styling Contact Form you linked above, but am having difficulties specifying that only the email form by the SUBSCRIBE button is to be 60% width. On the Feedback From (linked in the footer), the email line there is now also 60% width.

    There is a similar styling event happening with the SUBSCRIBE button and Send buttons in these two forms, too.

    I’ve tried styling specific fields by using IDs (see below), but that hasn’t seemed to affect the buttons or email fields.

    [submit “Send” id:Send-button]
    #send-button
    {
    color: #f00;
    font-size: 15px;
    }
    [submit “SUBSCRIBE” id:subscribe-button]
    #subscribe-button
    {
    font-size:10px;
    }

    What code suggestions do you have on how to remedy these styling issues?

    Also, I’ve successfully changed the size of the placeholder fonts in all the fields except for the dropdown box and Phone Number box. How do I get the placeholder text in these fields to match the size of the placeholder text of the other fields?

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Inline “Submit” button’ is closed to new replies.