Search code examples
formsinfusionsoft

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


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>


Solution

  • 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>