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> </div>
</div>
<div class="infusion-submit">
<button type="submit">Submit</button>
</div>
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>
Related
I have tried to make the submit button outside with this code it works on normal browser as firefox. Is there somebody who got a good solution for this?
<label for="submit-form" id="upload_yes_cursor" onClick="parent.location='edit_note.php'">Yes</label>
<div id="edit_note_box_wrapper">
<div id="edit_note_box_inner">
<form action="insert.php" method="post" onSubmit="this.color.value = document.form2.color.value; this.color.value = document.form2.color.value;" name="form1">
<input type="text" class="edit_note_title" placeholder="Title" name="title">
<div data-role="fieldcontain">
<label for="textarea"></label>
<textarea name="textarea" id="textarea" placeholder="Description" data-role="none"></textarea>
</div>
<div id="check">
<input type="hidden" name="color">
</div>
<div id="submit_hidden">
<input type="submit" id="submit-form"/>
</div>
</form>
Your using Javascript in your button submition. Many mobile browsers are not able to use javascript. So, yeah xD
I'm trying to draw an horizontal form that should be horizontal even on mobile view.
Currently I have this simple form:
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="username">{{_USERNAME}}:</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control" id="username" value="{{username}}">
</div>
</div>
</form>
It works correctly as expected, so it is horizontal on large screens and classic on small screens.
Current:
Expected:
How can I force this form to be horizontal even on small screens? Do I have to write CSS by myself or there is some standard way using Bootstrap?
Okay I've found the solution.
Use col-xs-* instead of col-ms-*
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label" for="username">{{_USERNAME}}:</label>
<div class="col-xs-10">
<input type="text" readonly class="form-control" id="username" value="{{username}}">
</div>
</div>
</form>
Since non of the above met my needs. I drawed a table and inserted the label inside a td and the input in the next td. All within the same row. Finally adjusted the margins as needed.
Note: This worked for an exclusive mobile UX.
I want to use html input elements in twitter bootstrap. I have a label on the left and an input element on the right. I pretty much used the example given in the bootstrap documentation. But my problem is that I don't have IDs for every input element and so I can't specify the "for"-value of the labels.
My solution in previous projects was wrapping the input element with a label, but this results in a wrong styling when I use bootstrap.
<div class="control-group">
<label class="control-label">MyTitle:
<div class="controls">
<input type="text" value="..." />
</div>
</label>
</div>
Will this work for you?
<div class="control-group">
<div class="controls">
<label class="control-label">MyTitle:
<input type="text" value="..." />
</label>
</div>
</div>
I have one input field that submits on pressing enter, like so:
<form action="" method="POST" >
<input type="text" name="name"/>
<input type="submit" style="display:none;" />
</form>
But when I add another field, pressing enter doesn't do anything:
<form action="" method="POST" >
<input type="text" name="name"/>
<input type="text" name="message"/>
<input type="submit" style="display:none;" />
</form>
Why not? How can this be resolved?
Thanks a lot!
I wouldn't use display:none.
I think you wanted visibility: hidden.
At any rate, I wouldn't use either. If you do not want a submit button I would first moved those / after the input names one space to the right and then use a hack suggested on SO.
<form action="index.php" method="POST" >
<input type="text" name="name" />
<input type="text" name="message" />
<input type="submit" style="position: absolute; left: -9999px;
width: 1px; height: 1px;"/>
</form>
Also, please check out this Question as it has some great Answers on it.
Submitting a form by pressing enter without a submit button
I'm doing this HTML5 form, but when I check it on the browser (running it locally) it displays the label next to the input space next to le label and so.
heres the code:
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" placeholder="Ingresa tu Nombre" required />
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Ingresa tu e-mail " required />
<label for="message">Mensage:</label>
<textarea id="message" placeholder="Ingresa tu Mensaje" required></textarea>
<input type="submit" value="Envia tu mensage" >
</form>
should I use <br />? I already checked on other web pages and they dont use it
thank you.
As Kolink pointed out, the form displays inline as all the elements inside it are inline.
You shouldn't be using <br/> or <p> as they are not intended for that purpose (You shouldn't be using a toothbrush to clean a toilet). Better use a <ul> with <li> for each field. This makes sense as the form is nothing but a list of fields.
The mark-up would be like this:
<form>
<ul>
<li>
<label for="something">some label</label>
<input id="something" />
</li>
</ul>
</form>
Alternatively, you can go ahead and use <div> as well (but not <p>).
Well, <label> is inline, <input> is inline, <textarea> is inline...
If all your elements are inline, of course your overall form will be.
Try using the <br /> tag, or maybe <p>...</p>.
Kolink is correct. Another way to address this is to add
display: block;
to all input and label elements using CSS.