I need help putting all the elements of an email signup form on the same line

Question

I have a WordPress website with a bar at the top that I can add custom code to.

I'm trying to add an Infusionsoft email signup form to this bar and I want everything to be on the same line. Currently it's showing the field label on the first line, then the email field on the second line and then the submit button on the third line.

I can add whatever code I need to this form and this custom code box and I can also add custom CSS to the theme options themselves.

I've tried a bunch of things and some of them almost work but I can't figure this out.

Any help would be greatly appreciated.

Here's my form code:

<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
<input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
<input name="inf_form_name" type="hidden" value="Web Form submitted">
<input name="infusionsoft_version" type="hidden" value="1.70.0.80421">
<div class="infusion-field">
    <label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
    <input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text">
</div>
<div>
    <div>&nbsp;</div>
</div>
<div class="infusion-submit">
    <button type="submit">Submit</button>
</div>

playingwithnumbers · Accepted Answer · 2019-02-25T21:25:43.260

I moved the infusion submit div inside the infusion field div. I used display flex and flex-direction row to achieve them on the same row.

I know you're using word press and probably just copy and pasting code. If you plan to do web design work it would be well worth it to study up on HTML and CSS. It's actually not that complicated and you'll have so much control over how things look on your site!

*Edit to center content

<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
  <input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
  <input name="inf_form_name" type="hidden" value="Web Form submitted">
  <input name="infusionsoft_version" type="hidden" value="1.70.0.80421">

  <div class="infusion-field" style="display:flex; flex-direction: row; justify-content: center;">
    <label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
    <input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" style="margin-right: 10px;">
    <div class="infusion-submit">
      <button type="submit">Submit</button>
    </div>
  </div>
</form>

Thank you! I know a decent amount of HTML and CSS but for some reason I still have a ton of trouble getting forms to look right. — Kavi, Feb 25 '19 at 01:48
As a follow-up, any idea how to center the whole form? I tried wrapping everything in a div but nothing I try seems to center the form inside that div. — Kavi, Feb 25 '19 at 02:04
Add the style "justify-content: center" to the infusion-field div. This only works with divs that are 'display: flex' — playingwithnumbers, Feb 25 '19 at 02:22

I need help putting all the elements of an email signup form on the same line

1 Answers1