Docs

[jclay12345]

Is it possible to put an audio player side by side next to a form or a button?

[Thai]

Hi There,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[jclay12345]

From the attached screenshot, I want to put the audio player to the left of the form and I want the audio player to be the size of the play button.

Every time I’ve tried shortening the width of the player, there’s always still been an empty gap.

Thanks.

[Rue Nel]

Hello There,

Thanks for providing the screenshot. Please use two columns and make sure that Marginless column option in the row settings is enabled. To better assist you with this issue, please provide us the url of the page in question with your form and the audio player. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[jclay12345]

Here the link. http://thesliprecords.com/choose/

[Rad]

Hi there,

Been trying it but became messy since the two elements are different, setting fixed width did it but responsiveness is affected.

How about adding the video shortcode directly to form code? That way, it resides on the structure of the form making them inline. http://demo.theme.co/integrity-1/shortcodes/responsive-video/

Thanks!

[jclay12345]

I tried that but my biggest problem is just changing the width of the audio player. Whenever I do, the actual player shortens, but there’s still an empty gap that I just can’t get rid of.

[Rad]

Hi there,

You added them into separate columns, hence, still different width and structure. Would you mind adding the video shortcode to your form’s content ( Admin > Contact > {YOUR FORM} ) as suggested? And please leave it that way while I’m checking it.

Thanks!

[jclay12345]

Ok, I changed it back to putting the shortcode inside the actual form.

[Lely]

Hello There,

Please try using the following custom CSS:

form.wpcf7-form {
    text-align: left;
}
.wpcf7-form .x-audio.player {
    display: inline-block;
    float: left;
}

The following part is optional. Add it in case you want some space between play button and the dropdown.

span.wpcf7-form-control-wrap.vote-and-we-ride {
    margin-left: 10px;
}

See attached screenshot.
Hope this helps.

[jclay12345]

Yes, thank you. I’ve been trying forever. You are awesome!!!!!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts